js/jquery如何获取获取父窗口的父窗口的元素

取父窗口的元素方法:$(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(脑残)

如图:

posted @ 2019-12-25 13:30  微光半夏星  阅读(6110)  评论(0编辑  收藏  举报