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, "*");

鼠标事件与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

第二种方法:

新建事件再分发到父页面
1.子界面监听move事件，把type和x，y发送到父级（直接传递e报错：Failed to execute ‘postMessage’ on ‘Window’: MouseEvent object could not be cloned）

  document.addEventListener('mousemove',(e)=>{
    window.parent.postMessage({
      type: 'mousemove',
      x: e.clientX,
      y: e.clientY
    }, "*");
  })

2.父界面接受并分发

window.addEventListener(
  // 为window添加一个message事件
  "message",
  // 当收到消息时，执行回调函数
  (event)=>{
  // 判断消息的类型是否为mousemove
  if(event.data.type === 'mousemove'){
    // 创建一个自定义事件
    var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});
    // 设置自定义事件的x坐标
    evt.clientX = event.data.x ;
    // 设置自定义事件的y坐标
    evt.clientY= event.data.y;
    // 触发自定义事件
    ifrmeElement.value.dispatchEvent(evt);
  }
  }
);


ifrmeElement.value.addEventListener('mousemove', (event) => {
        // 打印出鼠标的x和y坐标
        console.log(event.clientX, event.clientY);
})

iframe非正常方法测试：

• 1. localStorage
• 2. window.name