父：<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>跨域测试</title>
</head>
<body>
<script>
if (typeof window.postMessage != 'undefined'){// 检查浏览器是否支持postMessage
var iframe = document.createElement('iframe');
iframe.src = 'http://login2.qingdao.gov.cn/uc/iframe1.html';
document.body.appendChild(iframe);
var reciever = function(e) {////监听到事件之后的回调
debugger;
var data = e.data;
alert(data);
};
if (window.addEventListener){//兼容监听绑定事件---addEventListener：不带on
window.addEventListener('message', reciever, false);
}else if (window.attachEvent){
window.attachEvent('onmessage', reciever);
}
}
</script>
</body>
</html>
子：<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<script>
if (typeof window.postMessage != 'undefined') {// 检查浏览器是否支持postMessage
setInterval(function(){
var message="nihao";
window.parent.postMessage(message, '*');//注意向父窗口发送消息，如果往本页面的iframe发消息，需要指明哪个iframe.contentWindow.postMessage
},1000);
}
/*
通过调用目标页面window对象中的postMessage()函数可发送消息，代码如下：
window.parent.postMessage(“Hello, world”, “portal.example.com”);
第一个参数包含要发送的数据，第二个参数是消息传送的目的地。
注意：要发送消息给iframe，可以在相应iframe的contentWindow,中调用 postMessage，代码如下：
document.getElementsByTagName(“iframe”)[0].contentWindow.postMessage(“Hello, world”, “url”);例如iframe2
*/
</script>
</body>
</html>
相关推荐
由于可能存在跨域限制，插件可能需要采用特殊方法，如通过设置`postMessage`通信来从iframe内部传递高度信息到外部。 3. **设置iframe高度**：获取到准确的高度后，插件会动态更新iframe的`height`属性，使其适应...
### iframe跨域通信解决方法 在现代Web开发中，跨域问题经常出现并困扰着开发者。尤其是在使用`iframe`嵌入不同源的内容时，主页面往往无法直接与`iframe`内的内容进行交互，这就需要一种解决方案来实现跨文档消息...
iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
为了解决这一问题，HTML5引入了一种叫做跨文档消息传递（Cross-document messaging）的技术，允许不同源的窗口（包括`iframe`）通过`window.postMessage()`方法发送和接收消息。使用`postMessage`，父页面可以向`...
总结来说，`iframe-resizer-master`是解决`iframe`高度自适应和跨域问题的强大工具，它通过监听DOM事件和`postMessage`通信，使得`iframe`的使用更加灵活和高效。在网页开发中，合理运用`iframe-resizer-master`，...
HTML5的`window.postMessage`是解决跨域通信问题的一个重要机制。在Web开发中，由于浏览器的安全策略，不同源的页面之间默认不允许进行数据交互，但`postMessage`提供了一种安全的方式，允许来自不同源的脚本采用...
综上所述，"javascript经典特效---IFRAME间链接变换.rar"这个资源将教你如何利用JavaScript实现IFRAME之间的链接切换，涉及到了IFRAME的基本使用、跨域通信、事件监听以及性能优化等多个方面，对于希望提升网页交互...
1. **使用`window.postMessage`**：这是一种现代浏览器支持的跨域通信方式，通过向`window`对象发送消息，可以在不同源的iframe之间传递数据。发送端使用`postMessage(data, targetOrigin)`，接收端监听`message`...
- 使用`window.postMessage`进行跨域通信，可以实现更灵活的Iframe页面交互，但需要在主页面和Iframe页面之间协调。 以上就是关于"Iframe页面的滚动"这个主题的主要知识点。通过学习和实践这些内容，开发者可以更...
### 三、iframe跨域通信 在涉及到iframe的场景下，`postMessage`是解决跨域问题的关键。假设我们有一个父页面和一个嵌入的子页面（位于不同域），我们可以这样使用`postMessage`： #### 1. 子页面向父页面发送数据...
在IT行业中，跨域通信是一个常见且重要的主题，特别是在Web开发中。本示例涉及到的“iframe-cross-domain.rar”文件，很可能包含了一组用于演示或教学如何处理iframe跨域问题的资源。`iframe`（内联框架）是HTML中一...
`iframe`中的页面可以使用`window.postMessage()`发送消息，然后父页面通过监听`message`事件来接收这些消息。 3. **`window.name`属性**：由于`window.name`不会在页面刷新时丢失，因此可以用来传递跨域数据。`...
`window.postMessage()`方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文档的消息传递，即跨域通信。它的工作原理是：一个窗口向其打开的子窗口、其父窗口或者任何其他与之有某种关系的窗口发送...
- **Window.postMessage()**：这是HTML5引入的一种安全的跨文档消息传递方法，允许来自不同源的iframe与父窗口或另一个iframe通信。 - **事件监听**：设置事件监听器来接收和响应来自其他源的消息。 - **Origin...
标题中的“iframe跨域通信的通用解决方案-第二弹!（终极解决方案）”指的是在Web开发中，使用`iframe`元素进行跨域通信的一种高级技术。跨域通信是Web应用程序中常见的需求，特别是在需要集成不同来源的网页内容或者...
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个...
HTML5的`postMessage` API是为了解决Web应用程序之间的跨域通信问题而引入的。在传统的Web开发中，由于浏览器的同源策略限制，不同源的页面无法直接交互，但`postMessage`提供了一种安全的方式，允许来自不同源的...
使用`window.postMessage`进行父页面与子页面间的数据通信，从而实现跨域交互。 - **沙箱模式（sandbox）** 使用`sandbox`属性可以限制`iframe`的行为，允许跨域加载但不执行任何脚本。 ```html <iframe src=...
练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...