iFrame = document.getElementById('myframe'); iFrame.onload = function(){ iFrame.contentWindow.postMessage("从主页面来的消息", "*") </script> </body>

消息发送到 iframePage.html ，我们来接收消息

<h3> 这是 iframe 页面</h3> <script> function receiveMessage(e){ console.log(e); window.addEventListener("message", receiveMessage); </script> </body>

再刷新浏览器，打开控制台，就可以看到"从主页面来的消息"在 e.data 上

window.postMessage() 方法可以安全地实现跨源通信，语法是

targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow 是目标窗口，在这里是 document.getElementById('myframe').contentWindow
 
再试试从子页面发送数据给父页面：
 
 
子页面 iframePage.html 只需要一行
 
    <h3> 这是 iframe 页面</h3>
    <script>
        parent.postMessage({msg: "从子页面来的消息"}, '*');
    </script>
</body>

父页面 index.html 则是写监听事件回调函数

<h1>这是主页面</h1> <iframe src="./iframePage.html" id="myframe"></iframe> <script> function receiveMessage(e){ console.log(e); window.addEventListener("message", receiveMessage); </script> </body>

刷新浏览器打印出来结果

postmessage 解析HTML5提供了新型机制 PostMessage 实现安全的跨源 通信 . 语法 otherWindow. postMessage (message, targetOrigin, [transfer]); otherWindow: 其他 窗口 的一个引用, 比如 IFRAME 的contentWindow属性, 执行,window.open返回的 窗口 对象. message: 将要发送到其他 窗口 的数据. targetOrigin:通过 窗口 的origin属性来指定哪些 窗口 能接收到消息 事件 , 是html5引入的API,它允许来自不同源的脚本采用异步方式进行有效的 通信 ,可以实现跨文本文档,多 窗口 , 跨域 消息传递.多用于 窗口 间数据 通信 ,这也使它成为 跨域 通信 的一种有效的 解决 方案. 通常情况下，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机时，这两个脚本才能相互 通信 。而在实际项目开发过程中，经常会利用 iframe 在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现 通信 ，而 使用 postMessage 方法就实现了父子页面之间的 跨域 信息传递。 otherWindow. postMessage (message, targetOrigin, [transfer]); otherWindow:其他页面的引用，例如， iframe 的c 这周碰到一个让人头疼的需求：要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用 iframe 了，但问题来了，我和第三方web项目是有交互的，这就违反同源策略了，处理 跨域 问题是最让人头疼的事之一。 需求是这样的，在我的页面点击一些按钮，要实时反馈到 iframe 子页面，子页面再进行响应。 当时脑子里第一时间想到的 解决 方案是：用NGINX把两个项目代理到同一域名下。但这样似乎有点小题大做了，有没有更方便快捷的方法呢？ 在window对象下有个 postMessage 方法，是专门用来 解决 跨域 通信 问题的。 关于 postMessage 的详细介绍请戳这里，不过MDN的文档太详细了，导致有些同学 由于 postMessage 只能传递字符串类型的数据，所以在发送消息之前，我们需要将需要传递的数据进行序列化，通常 使用 JSON.stringify()方法。四、 使用 Vue插件封装 postMessage 方法 为了简化在Vue中 使用 postMessage 的过程，并避免一些常见的错误，我们可以考虑封装一个Vue插件。五、 使用 Vue Router进行路由间 通信 如果我们需要在Vue的不同路由之间进行 通信 ，可以考虑 使用 Vue Router提供的传递参数的功能。因此，我们需要仔细检查目标 窗口 的origin是否正确设置。 window.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='xxx'){ //一些自己的业务逻辑 child.html window.parent.... 在进行tag标签的编辑时，需求单击tag表示选中，双击tag进入编辑模式，进行修改。这样如果不做处理，双击会同时触发单击 事件 ， 解决 思路：设置一个变量，在单击 事件 中进行延时设置，在双击 事件 中，直接将单击 事件 的延时取消，那么就不会触发单击 事件 。 详细实现思路： 1. 设置varclickTimeChange; 用于单击 事件 的延时变量。 2. 单击 事件 的代码如下： handleCheckChange = (tag, index) => { clearTimeo... 什么是 iframe ？ iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。什么是？方法可以安全地实现跨源 通信 。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数设置为相同值) 时，这两个脚本才能相互 通信 。方法提供了一种受控机制来规避此限制，只要正确的 使用 ，这种方法就很安全。 window.parent.get_fenxiao(data) // 此处是父层页面的方法。console.log('get_fenxiao=',data) // 打印数据。url: "post的url地址", iframe 基本内涵 通常我们 使用 iframe 直接直接在页面嵌套 iframe 标签指定src就可以了 < iframe src="demo_ iframe _sandbox.htm"></ iframe > iframe 常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在 使用 css设置。 3.width:框架作为一个普通元素的宽度，建议 使用 css设置。 4.name:框架的名称，window.frames[nam