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事件解决方法:
第一种方法:在需要监听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非正常方法测试:
-
- localStorage
-
- window.name