取父窗口的元素方法:$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);
类似的,取其它窗口的方法大同小异
1 $(selector, window.top.document); 2 $(selector, window.opener.document); 3 $(selector, window.top.frames[0].document);
详解:(以上方法较好用)
一、获取iframe里的内容
在开始之前,首先我们来看看如何获取iframe里的内容,获取iframe中内容主要的两个API就是contentWindow
,和contentDocument iframe.contentWindow
, 获取iframe的window对象 iframe.contentDocument
, 获取iframe的document对象 这两个API只是DOM节点提供的方式(即getELement系列对象)
1 var iframe = document.getElementById("iframe1"); 2 var iwindow = iframe.contentWindow; 3 var idoc = iwindow.document; 4 console.log("window",iwindow);//获取iframe的window对象 5 console.log("document",idoc); //获取iframe的document 6 console.log("html",idoc.documentElement);//获取iframe的html 7 console.log("head",idoc.head); //获取head 8 console.log("body",idoc.body); //获取body
实际情况如:
另外更简单的方式是,结合Name属性,通过window提供的frames获取.
1 <iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes"> 2 <p>Your browser does not support iframes.</p> 3 </iframe> 4 <script type="text/javascript"> 5 console.log(window.frames['ifr1'].window); 6 console.dir(document.getElementById("ifr1").contentWindow); 7 </script>
其实window.frames[‘ifr1']
返回的就是window对象,即
1 window.frames['ifr1']===window
这里就看你想用哪一种方式获取window对象,两者都行,不过本人更倾向于第二种使用frames[xxx].因为,字母少啊喂~ 然后,你就可以操控iframe里面的DOM内容。
二、在iframe中获取父级内容
同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取.
window.parent
获取上一级的window对象,如果还是iframe则是该iframe的window对象window.top
获取最顶级容器的window对象,即,就是你打开页面的文档window.self
返回自身window的引用。可以理解window===window.self
(脑残)
如图: