网页间通信的方法

最新推荐文章于 2023-11-19 18:30:57 发布

奔跑吧、GZB

最新推荐文章于 2023-11-19 18:30:57 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_41635167/article/details/85043147

版权

1.iframe

iframe需要两个页面是同源的，否则会出现跨域问题。

parent.html：

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("parent.html");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

child.html：

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("child.html");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>

2.postMessage

页面条件：

当然所谓的页面间也是有条件限制的。以下两种情况可以利用的postMessage进行页面间通信，可以进行跨域通信。

1.页面和页面中嵌套的iframe中。

2.页面和由该页面打开的新页面。

postMessage用法：
window.postMessage（msg，targetOrigin）

的postMessage触发消息事件，由此达到页面间通信的目的。

参数味精为要发送的数据，格式支持字符串或对象注意：IE8中只支持字符串格式。

接收数据：

在接收的回调函数中，定义参数
event.event.origin为事件源的origin，即协议+域名+端口;
event.data为接收到数据;
event.source为触发该事件的页面的窗口对象;

示例（IFRAME）：

实现功能：父页面与iframe的页面间的通信。

父页面地址：HTTP：//本地主机：9020 /测试/ iframe中/ main.html中

iframe的页面地址：HTTP：//本地主机：9020 /测试/ iframe中/ sub.html

main.html：

<html>
<head>
  <title>postMessage Demo - iframe mainPage</title>
</head>
<body>
  main page
 <input type="button" value="send message" onclick="sendMessage()">
  <br>
  <iframe src="http://localhost:9020/test/iframe/sub.html" id="sub"></iframe>
</body>
</html>
<script>
  window.addEventListener('message',function(event){
    console.log('recieve data form subPage:');
    console.log(event.origin);
    console.log(event.data);
    console.log(event.source);
  },false);

  function sendMessage(){
    var subPage = document.getElementById('sub');
    var targetOrigin = 'http://localhost:9020/test/iframe/sub.html';
    subPage.contentWindow.postMessage('data from mainPage',targetOrigin);
  }
</script>

sub.html:

<html>
<head>
  <title>postMessage Demo - iframe subPage</title>
</head>
<body>
  sub page
  <input type="button" value="send message" onclick="sendMessage()">
</body>
</html>
<script>
  window.addEventListener('message',function(event){
    console.log('recieve data form mainPage:');
    console.log(event.origin);    // http://localhost:9020
    console.log(event.data);      // 接收到的数据
    console.log(event.source);    // 输出window对象
  },false);

  function sendMessage(){
    var mainPage = window.parent;
    var targetOrigin = 'http://localhost:9020/test/iframe/main.html';  
    mainPage.postMessage('data form subPage',targetOrigin);
  }
</script>

3.localstroge

1. 在页面A中写监听：

function onStorageChange(e) {
     console.log(e);    
}
window.addEventListener("storage",onStorageChange);

2. 页面B中进行任何数据操作都会触发所有同源页面的storage事件。（值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信。所有浏览器之中，只有IE浏览器除外，它会在所有页面触发storage事件。）