当前位置：首页 > article >正文

Vue前端页面内嵌套本项目iframe窗口的通信传输方式

article 2025/3/1 7:20:54

一、目的

想要在iframe中使用本项目页面、并能够与其父页面组件实现实时通信。Vue前端页面内嵌套本项目iframe窗口的通信传输方式-星林社区
https://www.jl1mall.com/forum/PostDetail?postId=20241202172800023969

二、iframe通信方式

1.接收消息

页面需要监听 message 事件。在消息的接收方页面内添加window.addEventListener("message",receiveMessage,false);

receiveMessage是接收到消息后对消息的解析、存储、处理函数。我们可以按照实际需求自行定义函数名称以及其中的数据处理过程。

2.消息发送

父页面给iframe子页面发送消息

为iframe子页面定义name值，在发送消息函数中通过 window.frames[name];获取名为name的iframe窗口，向这个iframe窗口对象中采用postMessage的方法发送消息。注意：通过window.frames获取的每个子窗口都是一个 window 对象，而不是 iframe DOM 元素。

iframe子页面给父页面发送消息

通过window.parent获取父页面对象发送消息 window.parent.postMessage(msg, '*');

三、传输数据格式

当参数是复杂对象时，我们还需要对数据处理后再传输。因为在 Web Workers 的上下文中， postMessage 方法用于在主线程和工作线程之间传递数据。由于 Web Workers 运行在不同的全局上下文中，所以传递给 postMessage 的数据必须能够被结构化克隆算法处理。这通常意味着你只能发送基本的数据类型（如字符串、数字、布尔值、null、undefined、ArrayBuffer、Blob、ImageBitmap、ImageData、File 和 FileList 等）或者可以序列化为这些类型的对象。

常见的不能发送的对象包括函数、DOM 节点、XMLHttpRequest 对象或者其它具有复杂内部状态的对象。如果你尝试发送这样的对象，你就会遇到 “Uncaught DataCloneError: Failed to execute 'postMessage' on 'Window': [object Object] could not be cloned.” 的错误。

遇见这一报错时我们可以采用JSON.stringify(data)对data数据进行处理。

四、方法实践

1.父页面

在父页面中添加iframe窗口：

<iframe
    :src="url"
    width="100%"
    height="100%"
    scrolling="yes"
    frameborder="0"
    @load="loadFrame"
    id="frame_box"
    name="myiframe"
    >
</iframe>

消息发送与接收：

// 给iframe传递数据
function sendMessage(msg){
    let iframeWin = window.frames["myiframe"];
    //将iframe的window窗体存储至data对象中会出现跨域报错
    iframeWin.postMessage(msg,"*");
}
//监听iframe子页面消息
if (typeof window.addEventListener != "undefined") {
  // for ie9+、chrome
  window.addEventListener("message", dealMessage, false);
} else if (typeof window.attachEvent != "undefined") {
  // for ie8-
  window.attachEvent("onmessage", dealMessage);
}

// 监听消息的回调函数
function dealMessage(e) {
    console.log(e);
   let dataMessage = JSON.parse(e.data);
}

2.子页面

window.addEventListener("message",receiveMessage,false);
function receiveMessage(event){
    let data = event.data
    let dataConfig = JSON.parse(data)
    console.log('我是父页面传递过来的', dataConfig)
    if(data.type == 'theme'){
      themeStore.globalThemeClass=data.value
    }
}
//向父元素发送消息，messageSelect的格式是根据项目需求自定义的，可以是字符串，若是字符串，下方无需进行JSON处理
function isSelect(index){
    selectIndex.value = index
    const messageSelect = {
        type:'chartSelect',
        value:index
    }
    let msg = JSON.stringify(messageSelect)
    window.parent.postMessage(msg, '*');
}

五、iframe加载

onload 事件在frame或者iframe载入完成后被触发。我们可以通过onload事件进行初始数据的传输。

function loadFrame() {
    // 获取iframe节点
    iframeLoading.value = true
    const iframeBox = document.getElementById('frame_box')
    const currentDoc = iframeBox.contentDocument || iframeBox.contentWindow.document; // 非同源会在contentWindow.document报错
    // 获取iframe html文件
    const baseWidth = 1920;
    const baseFontsize = 10;
    const doc = iframeBox.contentWindow.document
    const screenWidth = doc.documentElement.clientWidth;
    const scale= screenWidth / baseWidth;
    const htmlElement = currentDoc.getElementsByTagName("html")[0];
    htmlElement.style.fontSize =`${baseFontsize* Math.min(scale,2)}px`;// 设置最大缩放比例为2倍，可根据需求调整
        let messageConfig = {
            type:'chart',
            value:chartConfigData.value
        }
        let msg = JSON.stringify(messageConfig)
        //将iframe的window窗体存储至data对象中会出现跨域报错
        //由于切换url postMessage传递数据需要时间
        setTimeout(()=>{
            let iframeWin = window.frames["myiframe"];
            iframeWin.postMessage(msg,"*");
            //定时器的值如何设置最优有待商榷
        },1600)
}

查看全文

http://www.kler.cn/a/421391.html