原因：

冒泡只能通过一个文档树进行。iframe是一个独立的文档树，因此在其树中冒泡的事件终止于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>

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);

})