`

postMessage的使用,frame跨域传值

    博客分类:
  • js
阅读更多
1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递

2、postMessage(data,origin)方法接受两个参数:

(1)data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果,

(2)origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/";

二、使用#
1、子页面向父页面传递消息

<!-- index.html -->
<iframe src="http://127.0.0.1:5000/frame1.html" frameborder="1"></iframe>
<iframe src="http://127.0.0.1:5000/frame2.html" frameborder="1"></iframe>
<script>
window.addEventListener('message',function(e){
  console.log(e.data)
},false)
</script>

<!-- frame1.html -->
<h1>iframe1 page</h1>
<script>
  window.top.postMessage('message from iframe1');
</script>
分享到:
评论

相关推荐

    跨域传值即主页面与iframe之间互相传值

    // 使用 postMessage 发送数据 } // 主页面A的 JS 代码 window.addEventListener('message', function(event) { if (event.origin === 'http://test.com') { // 验证来源是否安全 var receivedData = event.data...

    layer弹窗:top.layer弹窗到父页面跨域解决办法

    在跨域环境下,如果我们需要从子页面使用layer弹出一个窗口到父页面,就需要利用`postMessage`来传递信息。 步骤如下: 1. **子页面操作**: - 创建一个layer弹窗,但不立即显示,而是存储配置信息。 - 使用`...

    iframe子向父传值实例.rar

    1. **使用Window的postMessage方法**:这是现代浏览器支持的一种跨域通信方式。`iframe`内的页面可以通过`window.parent.postMessage()`方法发送消息,而父页面通过监听`window.addEventListener('message', ...

    iframe父子传值

    与父向子传值类似,子`iframe`也可以通过`postMessage`向父页面发送数据: ```javascript // 子页面 window.parent.postMessage('我是来自子页面的数据', '父页面的源URL'); // 父页面 window.addEventListener('...

    iframe与父页面传值

    总结来说,`iframe`与父页面传值涉及的技术包括`postMessage`、`window.name`、查询字符串、hash等,并且需要注意跨域安全和同源策略的限制。这些技术在实际开发中被广泛应用于实现各种复杂功能,如组件化开发、页面...

    使用postMesssage()实现跨域iframe页面间的信息传递方法

    由于web同源策略的限制,当页面使用跨域...2. postMessage() postMesssage()是HTML5提供的一个基于事件的消息传输API,可以实现跨文本档、多窗口、跨域消息传递。 postMessage(data,origin)方法接受两个参数  1.data

    iframe与父页面传值(方法互调)

    除此之外,HTML5引入了`postMessage`和`message`事件,提供了更安全、跨域的通信方式。`postMessage`允许一个窗口向其他窗口发送消息,无论这个窗口是否在同一个源下。在`iframe`中发送消息: ```javascript window...

    iframe 子父界面 传值.zip

    `postMessage` API 是现代浏览器支持的一种安全的跨域通信方式,`iframe`与父页面之间可以通过这个API传递消息。发送方使用`postMessage`方法发送消息,接收方监听`message`事件接收消息。 **子页面发送消息:** `...

    iframe消息监听传递

    在Web开发中,`iframe`(Inline Frame)是一种嵌入其他网页的HTML元素,常...理解并掌握`postMessage`和`message`事件的使用,以及如何利用`MessengerJS`这样的库,对于提升Web应用的用户体验和安全性具有重要意义。

    js 实现iframe 之间传值

    为了解决这个问题,我们可以利用`window.postMessage()`方法,它允许跨域通信。 2. `window.postMessage()`方法: 这是HTML5引入的一种安全的跨窗口通信方式。`window.postMessage()`接收两个参数:要传递的数据和...

    JS中Iframe之间传值及子页面与父页面应用

    除了上述的基本访问方法,还有其他一些高级的交互方式,例如使用`postMessage`和`message`事件: - `window.postMessage()`: 这个API允许跨域通信,无论是在同一页面内的`&lt;iframe&gt;`,还是不同源的`&lt;iframe&gt;`,都...

    Chrome下ifame父窗口调用子窗口的问题示例探讨

    1. 使用`postMessage`和`message`事件:通过`window.postMessage`方法在父窗口向子窗口发送消息,然后在子窗口监听`message`事件来接收并处理消息。这是一种标准的跨窗口通信方法,不受同源策略限制。 2. 如果控制着...

Global site tag (gtag.js) - Google Analytics