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>

 

posted @ 2013-09-04 13:14  小七丶  阅读(1584)  评论(0)  编辑  收藏  举报