• iframe的操作


    获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe

    这是demo.html,这个页用iframe嵌入了iframe.html,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title> Demo页 </title>
    </head>
    <body>
    <h1>我是Demo页</h1>
    <iframe id="ifr" src="iframe.html" frameborder="0"></iframe>
    <div id="btn">
        <input type="button" value="获取iframe的window对象"/>
        <input type="button" value="获取iframe的document对象"/>
        <input type="button" value="这个window不是iframe,返回null"/>
        <input type="button" value="这个window是iframe"/>
        <input type="button" value="动态加载iframe"/>
    </div>
    <script type="text/javascript">
        var oIfr = document.getElementById("ifr"),
            aBtns = document.getElementById("btn").getElementsByTagName("input");
    
        //设置domain,和谐跨域访问限制
        document.domain = "localhost";
    
        //iframe相关操作
        var getIframe = {
            //获取iframe的window对象
            getWin : function(obj){
                return obj.contentWindow;
            },
            //获取iframe的document
            getDoc : function(obj){
                //chrome and ff or ie
                return obj.contentDocument || obj.contentWindow.document;
            },
            //在iframe里获得父页面的window对象
            getParents : function(){
                return {
                    parent : window.parent,
                    top : window.top
                }
            },
            //当前环境是不是iframe
            isIframe : function(win){
                return win.frameElement;
            },
            //动态创建iframe,返回创建好的iframe标签html
            createIframe : function(src, fncallback){
                var ifr = document.createElement("iframe");
                ifr.src = src;
                if(ifr.attachEvent){
                    ifr.attachEvent("onload", fncallback);
                }else{
                    ifr.addEventListener("load", fncallback, false);
                }
    
                return ifr;
            }
        };
    
        //子页面执行的方法
        function showDemo(){
            alert("我是Demo页的方法,在iframe里触发:showDemo");
        }
    
        //获取iframe的window对象
        aBtns[0].onclick = function(){
            getIframe.getWin(oIfr).showWindow();
        };
        //获取iframe的document对象
        aBtns[1].onclick = function(){
            alert(getIframe.getDoc(oIfr).getElementById("oDiv").innerHTML);
        };
        //当前的window不是iframe
        aBtns[2].onclick = function(){
            alert(getIframe.isIframe(window));//null
        };
        //当前的window是iframe
        aBtns[3].onclick = function(){
            alert(getIframe.isIframe(getIframe.getWin(oIfr)));
        };
        //动态加载iframe
        aBtns[4].onclick = function(){
            var t = null;
            t = getIframe.createIframe("http://www.baidu.com/", (function(){
                alert("这个新创建的iframe元素load时发生");
            }()));
            document.getElementsByTagName("body")[0].appendChild(t);
        }
    </script>
    </body>
    </html>

    这是iframe.html页面,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title> iframe页 </title>
    </head>
    <body style="border: 1px #ccc solid;">
    <h1>我是iframe页</h1>
    <div id="oDiv">我是iframe页:iframe页的oDiv</div>
    <div id="btn">
        <input type="button" value="获取父页面的window对象"/>
    </div>
    <script type="text/javascript">
        var oIfr = document.getElementById("ifr"),
            aBtns = document.getElementById("btn").getElementsByTagName("input");
    
        //设置domain,和谐跨域访问限制
        document.domain = "localhost";
    
        //iframe相关操作
        var getIframe = {
            //在iframe里获得父页面的window对象
            getParents : function(){
                return {
                    parent : window.parent,
                    top : window.top
                }
            }
        };
    
        //Demo里执行的方法
        function showWindow(){
            alert("我是iframe页:iframe页的showWindow方法");
        }
    
        //获取父页面的window
        aBtns[0].onclick = function(){
            getIframe.getParents().parent.showDemo();
        };
    
    </script>
    </body>
    </html>
  • 相关阅读:
    N天学习一个linux命令之scp
    php svn仓库提交预处理
    NTP-网络时间协议
    N天学习一个linux命令之umask
    N天学习一个linux命令之xz
    N天学习一个linux命令之xargs
    N天学习一个Linux命令之hostnamectl
    jQuery easyUI的datagrid,如何在翻页以后仍能记录被选中的行
    multiselect2side:jQuery多选列表框插件
    springmvc+jquery实现省市区地址下拉框联动
  • 原文地址:https://www.cnblogs.com/jununx/p/3300800.html
Copyright © 2020-2023  润新知