获取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>