如果两个网页不同源，就无法拿到对方的DOM。典型的例子是 iframe 窗口和 window.open 方法打开的窗口，它们与父窗口无法通信。

比如，父窗口运行下面的命令，如果 iframe 窗口不是同源，就会报错。

document.getElementById("myIFrame").contentWindow.document // Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

上面命令中，父窗口想获取子窗口的DOM，因为跨源导致报错。

反之亦然，子窗口获取主窗口的DOM也会报错。

window.parent.document.body // 报错

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的 document.domain 属性，就可以规避同源政策，拿到DOM。

对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

• 片段识别符（fragment identifier）
• window.name
• 跨文档通信API（Cross-document messaging）

1 片段识别符

片段标识符（fragment identifier）指的是，URL的 # 号后面的部分，比如 http://example.com/x.html#fragment 的 #fragment 。如果只是改变片段标识符，页面不会重新刷新。

父窗口可以把信息，写入子窗口的片段标识符。

var src = originURL + '#' + data; document.getElementById('myIFrame').src = src;

子窗口通过监听 hashchange 事件得到通知。

window.onhashchange = checkMessage; function checkMessage() { var message = window.location.hash; // ...

同样的，子窗口也可以改变父窗口的片段标识符。

parent.location.href= target + "#" + hash;

2 window.name

浏览器窗口有 window.name 属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入 window.name 属性。

window.name = data;

接着，子窗口跳回一个与主窗口同域的网址。

location = ' http://parent.url.com/xxx.html ';

然后，主窗口就可以读取子窗口的 window.name 了。

var data = document.getElementById('myFrame').contentWindow.name;

这种方法的优点是， window.name 容量很大，可以放置非常长的字符串；缺点是必须监听子窗口 window.name 属性的变化，影响网页性能。

3 window.postMessage

上面两种方法都属于破解，HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。

这个API为 window 对象新增了一个 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源。

举例来说，父窗口 http://aaa.com 向子窗口 http://bbb.com 发消息，调用 postMessage 方法就可以了。

var popup = window.open(' http://bbb.com ', 'title'); popup.postMessage('Hello World!', ' http://bbb.com ');

postMessage 方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为 * ，表示不限制域名，向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', ' http://aaa.com ');

父窗口和子窗口都可以通过 message 事件，监听对方的消息。

window.addEventListener('message', function(e) { console.log(e.data); },false);

message 事件的事件对象 event ，提供以下三个属性。

• event.source ：发送消息的窗口
• event.origin : 消息发向的网址
• event.data : 消息内容

下面的例子是，子窗口通过 event.source 属性引用父窗口，然后发送消息。

window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*');

event.origin 属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage); function receiveMessage(event) { if (event.origin !== ' http://aaa.com ') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data);

4 LocalStorage

通过 window.postMessage ，读写其他窗口的 LocalStorage 也成为了可能。

下面是一个例子，主窗口写入iframe子窗口的 localStorage 。

window.onmessage = function(e) { if (e.origin !== ' http://bbb.com ') { return; var payload = JSON.parse(e.data); localStorage.setItem(payload.key, JSON.stringify(payload.data));

上面代码中，子窗口将父窗口发来的消息，写入自己的LocalStorage。

父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow; var obj = { name: 'Jack' }; win.postMessage(JSON.stringify({key: 'storage', data: obj}), ' http://bbb.com ');

加强版的子窗口接收消息的代码如下。

window.onmessage = function(e) { if (e.origin !== ' http://bbb.com ') return; var payload = JSON.parse(e.data); switch (payload.method) { case 'set': localStorage.setItem(payload.key, JSON.stringify(payload.data)); break; case 'get': var parent = window.parent; var data = localStorage.getItem(payload.key); parent.postMessage(data, ' http://aaa.com '); break; case 'remove': localStorage.removeItem(payload.key); break;

加强版的父窗口发送消息代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow; var obj = { name: 'Jack' }; // 存入对象 win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), ' http://bbb.com '); // 读取对象 win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*"); window.onmessage = function(e) { if (e.origin != ' http://aaa.com ') return; // "Jack" console.log(JSON.parse(e.data).name); 父 子窗体 交互 方式通过contentWindow 交互 通过postMessage 交互 通过contentWindow 交互 主窗体内嵌的 iframe 或者是其通过js打开的新 窗口 都可以通过contentWindow与主窗体 交互 。所以首先需要 获取 到contentWindow才可以。要 获取 到可访问的contentWindow对象需要满足同 源 策略,这里需要保证两个 窗口 的域名完全相同才可以。也就是： 主窗体: ... 在日常开发中会遇到一种情况，就是页面需要嵌套 iframe ，由于 iframe 无法自适应里面样式高度，所以我们需要去监听 iframe 的动态高度。当 iframe 内部链接发生变化，或者是后端或者网关重定向页面，如何去 获取 最新的 iframe 里面的href？对此我们可以去监听 iframe 的load方法，并且在 iframe 第一次加载完之后开始监听，保证代码的健壮性。但实际使用就会发现，在某些特定的时刻 iframe 的onload事件只会触发一次。有人可能会说用onload方法,例如。需要监听的 iframe 。 是浏览器提供的跨文档通信 API，允许‌ 不同 源 ‌的 窗口 （如 iframe 、新标签页、弹出 窗口 ）之间安全传递数据，突破同 源 策略限制。2.基本语法// 发送消息方// 接收消息方// 处理消息});/*message：必填，表示要传输的内容，支持字符串、数字、对象、数组等（通过结构化克隆算法传输）targetOrigin：必填，指定接收方的 源 （如 'https://example.com'），或 '*' 允许任意 源 （不推荐） 解决：回头看了一下 源 码，调用了 iframe 标签 这不就好解决了嘛，话不多说上代码 解释一下相关的属性contentWindow 这是个只读属性，返回指定的 iframe 的 窗口 对象。它虽然不是标准的一部分，但各个主流浏览器都支持。 contentDocument Firefox 支持，IE6，IE7都不支持，IE8开始支持... 在工作中，我们会遇到一些需求，使用 iframe 嵌套另一个页面，这个页面大部分情况下不会部署在 父 页面相同的域名下，但是又需要 父 子页面进行数据 交互 ，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~ iframe 页面添加代码。 iframe 页面添加代码。 iframe 页面添加代码。 iframe 页面添加代码。一起来看一下效果吧~ 使用 iframe 实现跨域访问是一种常见的技术。通过将另一个域的内容嵌入到当前页面的 iframe 中，可以实现跨域访问。这种方法通常用于在网页中嵌入来自 不同 域的内容，比如嵌入其他网站的地图、视频或其他资 源 。 但需要注意的是，由于安全原因，浏览器通常会限制跨域访问，因此在使用 iframe 实现跨域访问时，需要确保被嵌入的内容允许跨域访问，或者采取其他安全措施来确保安全性。使用 iframe 实现跨域访问是一种常见的技术。通过将另一个域的内容嵌入到当前页面的 iframe 中，可以实现跨域访问。 工作了两年，面试官问我什么是跨域，以及跨域怎么形成的，怎么解决，我蒙了。。。什么是跨域？解决1：解决2：解决3：解决4： 工作了两年，面试官问我什么是跨域，以及跨域怎么形成的，怎么解决，我蒙了。。。什么是跨域？解决1：解决2：解决3：解决4： 什么是跨域？ 跨域就是浏览器的同 源 策略导致的，同 源 策略：协议+域名+端口，只要有一个 不同 ，就不是同 源 。 当前端部署在Nginx上监听的端口是8000.但是后端部署在tomcat上监听8080端口，那么浏览器访问前端页面的时候是8000端口，但是要到后端8080端口 获取 在Web开发中，为了避免安全漏洞，浏览器会实行同 源 策略（Same-Origin Policy），即只允许同 源 网页之间进行 交互 ，而跨域的 交互 是被禁止的。但是，有时我们需要在 不同 域名的页面之间进行数据传递和 交互 。 被嵌套的网页中可以使用parent.【函数名】来访问 父 级别的js， 父 级别的网页可以使用window.framename.【函数名】来访问子页面的js function modifyWH(){ var ifr = document.getElementById("ifcontent"); if (ifr.contentDocument && ifr.contentDocum... postMessage(message, targetOrigin,[transfer]) 参数：message：要发送到其他window的数据 targetOrigin：发送消息 窗口 的 源 （协议+主机+端口号），指定哪些 窗口 能接收到消息 transfer：可选（默认false） 2、接收消息 window.addEventListener("message", function (e) {