如何用javascript 跨域获取iframe子页面的元素信息

jquery、contentWindow

$("#ii")[0]contentWindow 如果用jquery选择器获得iframe，需要加一个0；

$("#ii")[0]contentWindow$("#dd")val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面 *** 作;

1、需求描述

一个页面中包含两部分内容，一块内容是本系统中的页面，要展示一些本系统中后端接口返回的数据的内容，一块完全是另一个项目的页面，但这个页面是需要认证信息才能打开的，因此会涉及到跨域信息传递的问题，iframe 引入的页面能拿到主站页面传递给它的认证信息，然后正常展示出来页面。

2、解决思路

实现的时候考虑使用iframe引入第三方页面的方式。

1) 传递认证信息的方式—postMessage

对于主站向iframe引入的页面传递认证信息，可以通过 postMessage 来进行，但是要能够 postMessage 传递认证信息的前提是iframe 引入的页面能够正常显示，但是事实上没有认证信息，iframe引入的页面是不能正常显示的，这貌似就陷入了一个死循环。

2）传递认证信息—cookie

另一个想到的方法就是 cookie 传递信息了，这个引入的页面和当前的主站页面有一个关系就是，引入的页面是主站的子域，那么写cookie的时候有一个规则，cookie 的 domain 写成 aaacom写到主站,那么 testaaacom 和aaacom 页面都可以获取到cookie信息并利用起来。

上面的第二种方法是已经经过实践检验的，在打开主站的情况下，cookie 的domain设置成xxxcom的方式，浏览器打开子域的页面，子域页面中是可以拿到这个cookie的信息的。

但是当前的问题并不是直接在浏览器中打开页面，而是在主站中以 iframe 的方式引入页面，这样也能看到吗？？

3、实践

有句话是这么说的，实践是检验真理的唯一标准，经过实践检验后，第二种方法是可行的，在浏览器中保存过一个页面的cookie之后，无论是直接打开一个页面，还是别的页面通过 iframe 引入该页面，cookie都是可以被利用到的。

4、思考

所以 cookie 其实是存在浏览器中的，只要浏览器中的这个cookie 文件保存，并且cookie是有效的，那么在当前页面引入与本页面无关的页面，都是可以的，csrf 跟这个有什么关系呢？

其实觉得自己写了一堆智障的东西，以后还是要多写，多研究，才能真正知道自己有多浅薄。

获得iframe的window对象 存在跨域访问限制

chrome iframeElement contentWindow firefox iframeElement contentWindow ie iframeElement contentWindow

文章Iframes onload and document domain中说“he iframe element object has a property called contentDocument that contains the iframe s document object so you can use the parentWindow property to retrieve the window object ”意思就是一些浏览器可以通过iframeElement contentDocument parentWindow获得iframe的 window对象 但经过测试firefox chrome的element contentDocument对象没有parentWindow属性

(javascript)

复制代码 代码如下: function getIframeWindow(element){ return element contentWindow; //return element contentWindow || element contentDocument parentWindow; }

获得iframe的document对象 存在跨域访问限制

chrome iframeElement contentDocument firefox iframeElement contentDocument ie element contentWindow document 备注 ie没有iframeElement contentDocument属性

(javascript)

复制代码 代码如下: var getIframeDocument = function(element) { return element contentDocument || element contentWindow document; };

iframe中获得父页面的window对象 存在跨域访问限制

父页面 window parent 顶层页面 window top 适用于所有浏览器

获得iframe在父页面中的标签 存在跨域访问限制

window frameElement（类型 HTMLElement） 适用于所有浏览器

iframe的onload事件 非ie浏览器都提供了onload事件 例如下面代码在ie中是不会有d出框的

(javascript)

复制代码 代码如下: var ifr = document createElement( iframe ); ifr src = ; ifr onload = function() { alert( loaded ); }; document body appendChild(ifr);

但是ie却又似乎提供了onload事件 下面两种方法都会触发onload

方法一

复制代码 代码如下: <iframe onload="alert( loaded );" src="

方法二 //只有ie才支持为createElement传递这样的参数

复制代码 代码如下: var ifr = document createElement( <iframe onload="alert( loaded );" src=" ); document body appendChild(ifr);

由于iframe元素包含于父级页面中 因此以上方法均不存在跨域问题

实际上IE提供了onload事件 但必须使用attachEvent进行绑定

复制代码 代码如下: var ifr = document createElement( iframe ); ifr src = ; if (ifr attachEvent) { ifr attachEvent( onload function(){ alert( loaded ); }); } else { ifr onload = function() { alert( loaded ); }; } document body appendChild(ifr);

frames window frames可以取到页面中的帧(iframe frame等) 需要注意的是取到的是window对象 而不是HTMLElement

复制代码 代码如下: lishixinzhi/Article/program/Java/JSP/201311/19939

获取所有的iframe标签

取完整iframe元素必须用getElementById的方法获取。

这里主要拿到iframe的document *** 作元素，有些浏览器可以直接contentDocument获取document *** 作元素，有些需要通过contentWindowdocument获取

这样就能获取iframe所有的输入框标签。

注意：当iframe跨域的时候，就无法获取iframe的document *** 作。

以上就是关于如何用javascript 跨域获取iframe子页面的元素信息全部的内容，包括:如何用javascript 跨域获取iframe子页面的元素信息、利用iframe引入需要认证的跨域页面、js *** 作iframe的一些方法介绍等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！