`
zhangyaochun
  • 浏览: 2595761 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

window.postMessage

阅读更多

只是做一些简单的知识积累,初探

 

HTML5标准下的postMessage

 

 

  •     postMessage可以实现跨文档消息传输(Cross Document Messageing).
  •     IE 8,FF3,Opera9,Chrome 3和Safari4多支持
  •     可以通过绑定window的message事件来监听发生跨文档消息传输内容
  •     也可以在同源策略中使用
  •     可以根据Event.origin属性来过来不合法的域名传输的数据
document B 
 
/*
绑定事件
*/
if(typeof window.addEventListener != 'undefined'){
     //非ie
     window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    //ie
     window.attachEvent('onmessage',onmessage);
}
 
function onmessage(e){
     console.log(e.data); //e.data---信息  e.origin---跨域传的源
}
 
 
 
 
document A
 
/*
父页面内嵌iframe
找到一个iframe
*/

var  o = document.getElementsByTagName('iframe')[0];
       o.contentWindow.postMessage('Hello','parant');
 
 
postMessage的参数
 
  • message         ----传递过来的信息
  • targetOrigin    ----
  • transfe

 

0
1
分享到:
评论
1 楼 yuanliangding 2012-02-15  
html里事件派发的雏形。

相关推荐

    HTML5如何用window.postMessage在网页间传递数据

    window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作...

    js中窗口的postMessage方法1

    window.postMessage() 方法在 JavaScript 中的应用 window.postMessage() 方法是 JavaScript 中的一种跨源通信机制,允许两个不同页面的脚本之间进行通信。通常情况下,两个页面的脚本只能在执行它们的页面位于同一...

    利用HTML5的window.postMessage实现跨域通信

    接下来,我们将深入探讨`window.postMessage`的工作原理、使用方法以及它在实际开发中的应用。 ### 一、`window.postMessage`工作原理 `window.postMessage`允许一个窗口向其他窗口发送消息,这些窗口可以是不同的...

    ipfs-postmsg-proxy:通过window.postMessage到IPFS的代理

    通过window.postMessage代理到IPFS 该代理在使用创建一个对象,该对象看起来像网页上的IPFS实例。 这只是一个带有“存根”(功能)的对象,这些对象使用window.postMessage与在浏览器扩展中运行的真实IPFS节点进行...

    postMessage-l10n:使用 window.postMessage 进行本地化的性能测试集合

    《使用window.postMessage进行本地化性能测试的探讨》 在现代Web开发中,本地化(l10n)已经成为一个至关重要的部分,它涉及到使网站内容适应不同语言和文化的用户。JavaScript作为前端的主要脚本语言,提供了多种...

    详解HTML5 window.postMessage与跨域

    HTML5中的window.postMessage是一个非常重要的API,它允许跨源通信,即在不同域之间进行安全的数据交换。同源策略是浏览器的一种安全机制,限制了不同源之间的交互。postMessage的出现,突破了这一限制,允许页面在...

    js弹窗并返回值(window.open方式)

    新窗口通过`window.postMessage`发送消息,原窗口通过`message`事件监听。这种方式可以跨域通信,是现代浏览器中实现窗口间通信的一种常见方法。 综上所述,`window.open`方法在JavaScript中提供了强大的功能,可以...

    PostMessage:Ext JS 应用程序中 window.postMessage 消息的 Observable 处理程序

    Ext JS window.postMessage Observable 使用 window.postMessage 可以作为一种更安全的方式在单个页面中的不同文档之间进行通信。 例如,如果您有多个<iframe>文档而不是尝试在父文档上执行方法(这可能是不...

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript利用window.postMessage实现跨域通信,首先需要了解的是同源策略:当两个页面具有相同的协议、端口和主机名时,我们说这两个页面具有相同的源。同源策略是一种安全机制,它限制了不同源之间的文档或脚本间...

    微信小程序webview与h5通过postMessage实现实时通讯的实现

    在做 React Native 应用时,如果需要在 App 里面内嵌 H5 页面,那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯,但是在小程序里面,虽然也提供了一个 webview 组件,但是,在进行 post...

    WKWebViewJS调用OC Demo

    if ([message.name isEqualToString:@"方法名"]) { // 处理接收到的参数 NSString *param = message.body; NSLog(@"接收到的参数:%@", param); // 在这里根据参数执行OC的相关操作 } } ``` 在这个例子中,`...

    window.open父子窗口传值问题

    newWindow.postMessage(data, "*"); // 子窗口接收数据 window.addEventListener("message", function(event) { if (event.origin !== "http://yourdomain.com") return; // 检查来源 console.log("Received ...

    解决window.showModalDialog跨域返回值

    在JavaScript中,`window.showModalDialog`是一个古老但仍然有用的函数,用于打开一个模态...因此,对于新项目,更推荐使用现代的API,如`window.postMessage`进行跨域通信,或者考虑采用服务器端代理等其他解决方案。

    html5 API postMessage跨域详解.pdf

    window.postMessage(message, targetOrigin); ``` - `message`:这是一个任意类型的数据,可以是字符串、对象等,用于传递信息。 - `targetOrigin`:一个字符串,用于指定接收消息的窗口的源。它可以是URL,也可以是...

    PostMessage和SendMessage的区别

    在探讨《PostMessage和SendMessage的区别》这一主题时,我们深入分析了两种消息发送机制的特点、应用场景以及它们在多线程环境中的行为差异。通过详细解释PostMessage与SendMessage的工作原理,我们可以更好地理解这...

    Delete All Cookies From JavaScript-crx插件

    要使用javascript删除所有cookie,请运行以下行:window.postMessage({type:“ CLEAR_COOKIES_EXTENSION_API”},“ *”); 要使用javascript删除当前页面的域和超级域的cookie,请运行以下行:window.postMessage...

    js window.open iframe dialog

    window.parent.postMessage('你好,父窗口', '*'); ``` - 父窗口接收子窗口消息: ```javascript window.addEventListener('message', function(event) { if (event.origin !== 'https://example.com') return; ...

Global site tag (gtag.js) - Google Analytics