欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

原因：

冒泡只能通過一個文檔樹進行。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);

})