JavaScript 怎么跨域获取 iframe 中的内容

JavaScript013

JavaScript 怎么跨域获取 iframe 中的内容,第1张

如果 iframe地址与当前页面地址同域,js可以访问该页面内的对象.

使用 window.frames[0] 或者window.frames[name] 来访问frame的window对象

如要获取元素,使用 window.frames[0].document.getElementById

另外 ,ie系列和webkit系列可能访问方法上略有区别,具体可调试查看

A域名下的页面index.htm中内嵌了一个iframe页面,iframe内引用的是B域名的sub-index.htm页面,但是为了避免出

现在index.htm页面中出现滚动条,需要明确知道sub-index.htm页面的高度和宽度,可是sub-index.htm的页面内容是不可控的,可能会根据不同用户页面大小会不一样;问题就是如何把sub-index.htm页面的高度和宽度传递给index.htm页面?

具体解决:

1、在index.htm页面中声明一个js函数process(height, width)用来实现设置页面内iframe的高度和宽度;

2、

在sub-index.htm页面中再内嵌一个隐藏的iframe,iframe的src指向A域名下的页面ex.htm?height=xx&

width=yy,该页面没有任何内容,只是用来传递sub-index.htm页面加载完之后的宽度和高度这两个数据的,页面内js拿到request

中的参数之后直接调用parent.parent.process(height, width)完成对父页面宽度和高度的设置;

如图:

概述

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:

首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

对于主域相同子域不同的通信方法这里不一一列举了,这里主要讲解一下跨主域的通信问题。

postMessage方法

window.postMessage 是一个用于安全的使用跨源通信的方法。通常,不同页面上的脚本只在这种情况下被允许互相访问,当且仅当执行它们的页面所处的位置使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的主机(两个页面的 document.domain 的值相同)。 在正确使用的情况下,window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

兼容性

http://caniuse.com/#search=postMessage

具体用法

发送消息:destination.postMessage(message, targetOrigin)

destination: 目标窗口

message:发送的消息

targetOrigin: 定义发送消息的范围

监听接受消息:window.addEventListener(‘message’,callback,false)

已知问题

部分版本IE8/9浏览器只支持iframe通信,不支持tabs之间通信。

IE8/9不能传输对象,只能传输string。

参考资料

mozlia官方文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage

IE官方文档: https://status.modern.ie/postmessage

webplatform文档: https://docs.webplatform.org/wiki/apis/web-messaging/MessagePort/postMessage

HTML5官方文档: https://html.spec.whatwg.org/multipage/comms.html#web-messaging

window.navigator(适用于ie6/7)

ie6/7有个漏洞,父窗口与所有的iframe共享window.navigator对象,可以利用这个漏洞,由于ie6/7不支持postMessage,所以可以利用这个漏洞对ie6/7做兼容跨域通信支持。

具体用法

途中A过程和B过程都是初始化监听事件,类似于onmessage事件。只不过实现方法不一样而已。

按执行顺序来描述的话,如下:

B: 父窗口向window.navigator添加一个监听函数,并打上父窗口的戳。

A: 子窗口向window.navigator添加一个监听函数,并打上子窗口的戳。

C: 父窗口执行post的时候,调用原先子窗口添加在navigator里的监听函数,并将要传输的数据作为函数参数传入。

D: 子窗口执行post的时候,调用原先父窗口添加在navigator里的监听函数,并将要传输的数据作为函数参数传入。

注意:子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳