`
- 浏览:
34411 次
-
iframe间的跨域通信(添加onmessage 或message事件)
1，跨域的一个示例
当你需要操作一个内嵌iframe是，如果这个内嵌iframe和打开的网站不在同一个域中，你时常会遇到这样的报错：
Unsafe JavaScript attempt to access frame with URL http:/www.d1.com from frame with URL http://www.d2.com. Domains, protocols and ports must match.
从报错信息中我们可以知道，浏览器是通过域名(domain)，协议(HTTP)，端口(Port)。也就是说这三点只要有一个不匹配那就是跨域(Cross domain)。
对于跨域，我们通常的解决办法是在原来的域添加一个文件，用该文件作为中间人来实现跨域。也就是说，先发消息到该文件，由该文件再操作同域的HTML。
HTML 5给我们带来了安全的跨域通信接口，即window.postMessage()方法。它方法原型是：
window.postMessage(msg, domain);
我们可以给指定的domain发送msg。而接收msg的iframe只要注册一个监听事件就可以了。我们看示例：
www.d1.com/a.html
<html>
<head>
<title>operate the iframe on other domain</title>
<script>
function sendMessage(){
var frm = document.getElementByIdx_x_x("iframe1");
frm.contentWindow.postMessage("hello","*")
}
</script>
</head>
<body>
<input id="send" type="button" onclick="sendMessage()" value="send message" />
<br />
<iframe style="width:300px; height:400px;" id="iframe1" src="http://www.d2.com/b.html">
</iframe>
</body>
</html>
我们再看看监听的那个iframe
www.d2.com/b.html
<html>
<head>
<title>a frame which receive the message</title>
<script>
var OnMessage = function (e) {
alert(e.data);
}
function init() {
if (window.addEventListener) { // all browsers except IE before version 9
window.addEventListener("message", OnMessage, false);
} else {
if (window.attachEvent) { // IE before version 9
window.attachEvent("onmessage", OnMessage);
}
}
};
init();
</script>
</head>
<body>
<p>a iframe to receive the message</p>
</body>
</html>
在监听处理函数中我们可以判断具体的那个domain发来的消息。
2，浏览器支持
IE8+, FF3+, Chrome, Safari
IE8中需要注意的是msg这个参数只能是string，而其他浏览器支持JavaScript的object。变通办法就是发送一个在发送时JSON.stringfy格式化一下，而在接受端JSON.parse就可以了。
Update:2012-08-30
前些日子我发现Tecent的一个Team的Blog的一篇文章，利用”about:blank”很好地解决的IE6和IE7下的iframe跨域问题，具体请猛击：iframe跨域通信的通用解决方案
3，注意事项
如果你在接受消息的iframe中通过JavaScript来修改DOM元素。要确保iframe已经加载完成，可以这样做：
_overlay = document.getElementByIdx_x_x("iframe1");
if(_overlay.attachEvent){
_overlay.attachEvent("onreadystatechange", function(){
if(_overlay.readyState === "complete" || _overlay.readyState == "loaded"){
_overlay.detachEvent( "onreadystatechange", arguments.callee);
sendMessage();
}
});
} else {
if(_overlay.addEventListener){
_overlay.addEventListener( "load", function(){
this.removeEventListener( "load", arguments.call, false);
sendMessage();
}, false);
}
}
参考：
---------------------------------------------------------------------------------------
http://blog.css-js.com/javascript/javascript-iframe-readystate.html
http://msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
http://www.alloyteam.com/2012/08/lightweight-solution-for-an-iframe-cross-domain-communication/
分享到：
相关推荐
在Web开发中，`iframe` 是一个非常常用的元素，它允许我们在一个页面中...理解并正确使用上述方法，可以有效地解决跨域限制，实现`iframe`间的通信。在实际项目中，务必确保遵循最佳实践，同时注意安全性和性能影响。
**iframe跨域通信封装详解** 在前端开发中，由于浏览器的安全策略，JavaScript默认情况下不允许跨域访问资源。这意味着，一个页面中的脚本只能操作属于同一源（协议+域名+端口）的页面元素。然而，当需要在一个页面...
`postMessage`是现代Web开发中跨域通信的重要工具，它使得不同源的页面可以通过安全的方式来交换数据，这对于实现单页应用、嵌入式内容、第三方组件之间的交互等场景非常有用。同时，由于`postMessage`提供了源验证...
标题“同级iframe间的函数调用”涉及的是如何在不同`iframe`之间共享数据和交互，这是跨域安全策略下实现页面间通信的一种方式。 在同一个域名下，`iframe`可以相互访问，这是因为它们被视为同一源（same-origin ...
总之，jcrossdomain插件提供了一种方便的方式来解决JavaScript的双向跨域问题，通过IFrame和window.postMessage API实现通信，让不同源的Web应用能够安全、高效地共享数据。对于需要在多个域之间进行数据交互的项目...
HTML5的`window.postMessage` API 是一种允许不同源的窗口或`iframe`之间安全地进行跨域通信的技术。这一功能的引入解决了之前由于同源策略限制导致的跨域数据交换问题，无需服务器端的额外配合。 `window.post...
然而，在实际开发过程中，由于安全策略和技术限制，不同域名或端口的应用之间可能会遇到跨域问题。例如，当报表系统（FineReport）与OA系统位于不同的服务器或端口时，直接通过JavaScript进行交互就会遇到跨域调用的...
4. 如果是同源策略导致的iframe跨域问题，可以利用window.postMessage API来实现在不同源的窗口之间传递消息。只要双方监听和发送消息的事件是同步的，就可以实现跨域通信。 5. 代理服务器 通过设置一个中间代理...
例如，父窗口可以监听`iframe`的某个事件，而`iframe`可以通过`window.postMessage`或`dispatchEvent`触发这个事件。 3. **window.postMessage**： - `window.postMessage`是现代浏览器支持的一个API，用于安全地...
2. `onmessage`事件处理程序的漏洞：接收方在处理接收到的信息时，如果未进行充分的校验，可能导致XSS攻击或其他恶意行为。 3. 信息处理不当：收到的数据未经安全处理，可能导致账号被盗，如微博OAuth授权过程中的...
通过postMessage和onmessage事件，Web Workers也可以进行跨域通信。 8. **Service Worker**：Service Worker是运行在浏览器后台的脚本，它可以拦截网络请求并处理响应，实现离线缓存等功能，同样可以用来处理跨域...
// 在iframe的window对象上监听message事件 window.addEventListener('message', function(event) { if (event.origin !== 'http://127.0.0.1:8080') return; console.log('Received:', event.data); }, false); `...
js可以通过`postMessage()`向Iframe发送消息，而Flex应用监听`window.message`事件来接收这些消息。确保发送和接收方都正确设置目标Origin以防止跨站脚本攻击。 ```javascript // js 代码 var iframe = ...
然而，不同浏览器之间的兼容性问题常常成为开发者面临的一大挑战，尤其是在处理跨域通信、事件处理等方面。本文将深入探讨在`iframe`中生成父窗口元素以及如何在`iframe`内触发父窗口的事件，特别是针对IE和Firefox...
iframe.html的JavaScript代码中，在窗口对象上设置message事件的监听器来接收信息： ```javascript var parentWin = window.parent; window.onmessage = function(e) { document.getElementById("test").innerHTML...
对于支持`postMessage`的浏览器，会使用`addEventListener`或`attachEvent`来添加消息监听事件。对于不支持`postMessage`的浏览器，则通过轮询`window.name`的变化来接收数据。 #### 使用示例 在父窗口中使用插件：...
- **iframe通信**：同页面内或跨页面的`iframe`间的`contentWindow`和`Window.frames`。 - **父子窗口通信**：`Window.parent`与子窗口间的通信。 3. **安全漏洞示例** - **不严谨的onmessage验证**：攻击者可能...
开发者可以通过监听`message`事件来接收来自其他窗口或框架的消息，并使用`postMessage()`方法向其他窗口发送数据。例如，在一个简单的例子中，父页面可以监听子页面发送的消息，根据接收到的信息调整子页面IFrame的...
在使用SharedWorker时，可以通过`postMessage`方法和`onmessage`事件处理来在不同标签页之间传递消息。不过需要注意的是，Web Worker不是线程而是独立的后台线程，不支持DOM操作。 4. **iframe通讯**：iframe内嵌...