zoukankan      html  css  js  c++  java
  • iframe2016/4/12

    js操作iframe 

    contentWindow    
    在服务器环境下测试
    contentDocument
    二种方法的区别
    子级iframe修改父级元素内容
    window.parent
    window.top与window.parent的区别

    window.top:是当前文件最顶端的那个文件,window.parent:是当前文件上面的文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <div style="200px; height:200px; background:red;"></div>
    </body>
    </html>

    上面是iframe4

    下面是iframe5

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <div style="200px; height:400px; background:green;"></div>
    </body>
    </html>
    

      父文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload = function(){
        var aInput = document.getElementsByTagName('input');
        var oIframe = document.getElementById('iframe1');
        
        function changeHeight(){
            
            setTimeout(function(){
                oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
            },100);//防止转向文件与changeHeight函数同时运行
            
        }
        changeHeight();
        
        aInput[0].onclick = function(){
            oIframe.src = 'iframe4.html';
            changeHeight();
        };
        
        aInput[1].onclick = function(){
            oIframe.src = 'iframe5.html';
            changeHeight();
        };
    };
    </script>
    </head>
    
    <body>
    <input type="button" value="切换1" />
    <input type="button" value="切换2" />
    <iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe>
    </body>
    </html>
  • 相关阅读:
    [转载]oracle 存储过程的基本语法及注意事项
    [转载]Oracle常用函数大全
    [转载]Java编程思想:面向对象的逻辑思维方法
    [转载]细说Java反射
    [转载]一位大学老师写给大学新生的100条肺腑之言
    [转载]学习java30条基本的概念
    [转载]细说Java反射
    [转载]Java编程思想:面向对象的逻辑思维方法
    Item 38. 异常安全之公理(Exception Safety Axioms)
    Item 36. ClassSpecific Memory Management
  • 原文地址:https://www.cnblogs.com/hduhdc/p/5383658.html
Copyright © 2011-2022 走看看