当先锋百科网

首页 1 2 3 4 5 6 7

关于postMessage跨域(html5、h5转别人)

postMessage是html5新增的方法，主要用来解决跨域通信的问题，用法很简单，只需要在页面获得另一个页面的window( 如iframe引入的页面 )，就可以调用postMessage方法将数据传送过去，接收的页面只需要监听message事件，就可以获取到数据，从而进行操作。就是这样而已，下 面给出一个例子，看代码会更加清晰。

 page1.html 


<!DOCTYPE HTML>
<html >
<head>
   <meta charset="gb2312">
   <title></title>
</head>
<body>
   <iframe src="http://192.168.50.122/2013/page1.html" id="ifr"></iframe>
   <br />
   <input type="text" id="txt" />
   <input type="button" id="btn" value="向子页面发送内容" />
    
<script type="text/javascript">
var addEvent = function( ele, type, fnHandler ){
     return ele.addEventListener ? ele.addEventListener(type,fnHandler,false) : ele.attachEvent('on' + type,fnHandler);
},
receive = function( e ){
    var div = document.createElement( 'div' );
    div.innerHTML = e.data; //postMessage过来的数据都在e对象里，可以输出e查看相应属性
    document.body.appendChild( div );
}
    
//绑定message事件接收数据
addEvent( window, 'message', receive );
    
/* 上面的为接收子iframe发送过来的数据，下面的为向子iframe发送数据 */
    
var ifr = document.getElementById( 'ifr' ),
    txt = document.getElementById( 'txt' ),
    btn = document.getElementById( 'btn' );
    
btn.onclick = function(){
    var value = txt.value;
    
    ifr.contentWindow.postMessage( value, '*' );
    
    txt.value = '';
}
    
</script>
</body>
</html>
page2.html 

<!DOCTYPE HTML>
<html >
<head>
   <meta charset="gb2312">
   <title></title>
</head>
<body>
    <strong>这是子页面</strong>
   <input type="text" id="txt" />
   <input type="button" id="btn" value="向父页面发送内容" />
   <div id="content"></div>
    
<script type="text/javascript">
var addEvent = function( ele, type, fnHandler ){
     return ele.addEventListener ? ele.addEventListener(type,fnHandler,false) : ele.attachEvent('on' + type,fnHandler);
},
receive = function( e ){
    var div = document.createElement( 'div' );
    div.innerHTML = e.data; //postMessage过来的数据都在e对象里，可以输出e查看相应属性
    document.body.appendChild( div );
}
    
//绑定message事件接收数据
addEvent( window, 'message', receive );
    
/* 上面的为接收子iframe发送过来的数据，下面的为向子iframe发送数据 */
    
var ifr = document.getElementById( 'ifr' ),
   txt = document.getElementById( 'txt' ),
   btn = document.getElementById( 'btn' );
    
btn.onclick = function(){
   var value = txt.value;
    
   window.top.postMessage( value, '*' );
    
   txt.value = '';
}
</script>
</body>
</html>



其实只需要看一个页面的代码就能了解全部了，只是为了例子完整性将其全部展示出来了。

可以直接复制上面代码保存在两个页面里做测试，注意自己模拟跨域环境，如改hosts。


版权声明：本文为CSDN博主「weixin_34237596」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34237596/article/details/92059751

HTML5：使用postMessage实现Ajax跨域请求

javascript php
HTML5：使用postMessage实现Ajax跨域请求由于同源策略的限制，Javascript存在跨域通信的问题，典型的跨域问题有iframe与父级的通信等。常规的几种解决方法：(1)document.domain+iframe；(2)动态创建script；(3)ifram...

H5的postMessage解决跨域问题

HTML5
为了解决的问题：1、页面与其它窗口的数据传递2、页面与嵌套的iframe的数据传递3、跨域数据传递HTML5引入了message的API，使用postMessage()方法可以允许来自不同域的脚本异步方式通信，可以实现跨文本档、多窗口、....