iframe通信,mousemove,mousedown,mouseup,iframe

1.postMessage onmessage

父页面

• 父页面接受iframe消息

window.addEventListener(
  "message",
  (event)=>{
  console.log(event.data)
  }
);

• 父页面向iframe发送消息
  window.postMessage

在postMessage(message, targetOrigin, transfer)函数中可以传递3个参数，分别是

1.message：需要发送的消息
2.targetOrigin：目标源，如：“http://127.0.0.1:5500/”，“*” 表示全部通配符
3.transfer：取消深拷贝的数据，通过message发送对象是深拷贝的数据，会在目标页面和当前页面产生两个对象，如果直接发送消息会十分损耗性能，使用transfer可以达到保存数据的功能

<script setup lang="ts">
import { ref } from 'vue';
const ifrmeElement = ref(null)

const postMessage = (data) => {
ifrmeElement.value.contentWindow.postMessage(data, '*')
}
</script>

<template>
    <div id="map">
        <iframe ref="ifrmeElement" 
        </iframe>
    </div>
</template>

嵌入的iframe子页面

• iframe子页面接收父界面消息

   window.addEventListener("message", (e) => {
        console.log("子页面收到信息", e.data);
    });

• iframe子页面向父界面发送消息

     window.parent.postMessage(e.data, "*");

Worker通信

worker是js中的多线程，其通信方式与iframe类似，通过使用worker实例化对象进行传递消息，但是需要注意的是，iframe可以通过parent访问父页面，worker只能通过self对象将消息传递给父页面中的实例worker，因此功能实现需要对其做兼容。下面是一段使用worker的代码

// 父页面
const worker = new Worker("./worker.js", { type: "module" });
worker.onmessage = (e) => {
  console.log("parent收到了消息：", e.data);
};
worker.postMessage({ type: "msg", msg: "你也好" });

// 子页面
self.onmessage = (e) => {
  console.log("worker收到了消息：", e.data);
};
self.postMessage({ type: "msg", msg: "你好" });

鼠标事件与iframe

iframe是一个独立的文档树,是一个沙箱,鼠标事件终止于iframe文档根部,无法冒泡到外层

【javascript】mouseup与iframe踩坑
iframe 上监听mouseup失败

• mousedown和mouseup解决方法:

第一种方法:在mousedown时创建一个遮盖层，mouseup时移除。

第二种方法:设置iframe元素,style,pointer-events:none,但是设置这个iframe内部事件无法响应

当mousemove遇到iframe

• mousemove事件解决方法:

第一种方法:在需要监听mousemove事件时,设置iframe元素,style,pointer-events:none的类名,不需要监听时移除类名

Receive mousemove events from iframe, too

第二种方法:

新建事件再分发到父页面
下面是查到的方法，但是我监听不到事件

var bubbleIframeMouseMove = function( iframe ){

    iframe.contentWindow.addEventListener('mousemove', function( event ) {
        var boundingClientRect = iframe.getBoundingClientRect();

        var evt = new CustomEvent( 'mousemove', {bubbles: true, cancelable: false})
        evt.clientX = event.clientX + boundingClientRect.left;
        evt.clientY = event.clientY + boundingClientRect.top;

        iframe.dispatchEvent( evt );

    });

};