您的位置：首页 > Web前端 > HTML5

Html5 跨域通信

2014-09-14 23:55 190 查看
H5 跨域通信：

在主页面中通过iframe嵌入外部页面，通过iframe的window对象postMessage方法向iframe页面传递消息。

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="UTF-8">
5         <title>跨域通信示例</title>
6         <script type="text/javascript">
7             function hello(){
8                 var iframe = document.getElementById("iframe").contentWindow;
9                 iframe.postMessage("hello, 这是主页面传过来的数据", "http://localhost/html5/b.html");
10             }
11         </script>
12     </head>
13     <body>
14         <h1>跨域通信示例</h1>
15         <iframe width="400" src="http://localhost/html5/b.html" onload="hello()" id="iframe">
16         </iframe>
17     </body>
18 </html>


iframe页面中通过对窗口对象的message事件进行监听，以获取消息。

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="UTF-8">
5         <script type="text/javascript">
6             window.addEventListener("message", getEvent, false);
7             function getEvent(event){
8                 alert("从" + event.origin + "那里传递过来的信息是:\n" + event.data);
9             }
10         </script>
11     </head>
12     <body>
13         iframe 页面
14     </body>
15 </html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航