狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

原因：

冒泡只能通過一個文檔樹進行。iframe是一個獨立的文檔樹，因此在其樹中冒泡的事件終止于iframe文檔的根部，并且不會跨越邊界進入宿主文檔。

解決方法：

1.postMessage onmessage

·父頁面

父頁面接受iframe消息

window.addEventListener(

  "message",

  (event)=>{

  console.log(event.data)

  }

);

父頁面向iframe發(fā)送消息

window.postMessage

在postMessage(message, targetOrigin, transfer)函數(shù)中可以傳遞3個參數(shù)，分別是

1.message：需要發(fā)送的消息

2.targetOrigin：目標源，如：“http://127.0.0.1:5500/”，“*” 表示全部通配符

3.transfer：取消深拷貝的數(shù)據(jù)，通過message發(fā)送對象是深拷貝的數(shù)據(jù)，會在目標頁面和當前頁面產(chǎn)生兩個對象，如果直接發(fā)送消息會十分損耗性能，使用transfer可以達到保存數(shù)據(jù)的功能

<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子頁面向父界面發(fā)送消息

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

鼠標事件與iframe

iframe是一個獨立的文檔樹,是一個沙箱,鼠標事件終止于iframe文檔根部,無法冒泡到外層

【javascript】mouseup與iframe踩坑

iframe 上監(jiān)聽mouseup失敗

mousedown和mouseup解決方法:

第一種方法:在mousedown時創(chuàng)建一個遮蓋層，mouseup時移除。

第二種方法:設(shè)置iframe元素,style,pointer-events:none,但是設(shè)置這個iframe內(nèi)部事件無法響應(yīng)

當mousemove遇到iframe

mousemove事件解決方法:

第一種方法:在需要監(jiān)聽mousemove事件時,設(shè)置iframe元素,style,pointer-events:none的類名,不需要監(jiān)聽時移除類名

Receive mousemove events from iframe, too

第二種方法:

新建事件再分發(fā)到父頁面

1.子界面監(jiān)聽move事件，把type和x，y發(fā)送到父級（直接傳遞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.父界面接受并分發(fā)

window.addEventListener(

  // 為window添加一個message事件

  "message",

  // 當收到消息時，執(zhí)行回調(diào)函數(shù)

  (event)=>{

  // 判斷消息的類型是否為mousemove

  if(event.data.type === 'mousemove'){

    // 創(chuàng)建一個自定義事件

    var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

    // 設(shè)置自定義事件的x坐標

    evt.clientX = event.data.x ;

    // 設(shè)置自定義事件的y坐標

    evt.clientY= event.data.y;

    // 觸發(fā)自定義事件

    ifrmeElement.value.dispatchEvent(evt);

  }

  }

);

ifrmeElement.value.addEventListener('mousemove', (event) => {

        // 打印出鼠標的x和y坐標

        console.log(event.clientX, event.clientY);

})