iframe标签及消息机制
2026-09-08 17:13
在项目中添加iframe标签,并添加消息机制以便于父页面与iframe页面通信。
添加iframe标签
在项目页面中添加ifram标签并添加样式。
<iframe id="sview_iframe" style="width:100%;height:100%" src="./sview/sview3d.html">
添加消息机制
在js文件中添加iframe消息接收方法以及往iframe中发送消息的方法:
window.addEventListener('message', function(event) {
//接收到iframe的消息
console.log('Received message from iframe:', event.data);
}, false);
//往iframe中发送消息,需注意发送消息需要在iframe加载完毕后再发送,否则会导致iframe接收不到消息的问题
document.getElementById("sview_iframe").contentWindow.postMessage("Hello from parent!","*");
添加消息处理逻辑,接收父页面发送的消息,确定打开模型的路径,以下代码仅为示例代码,具体方案可根据具体情况修改js/main.js和js/main_local.js文件。
window.onload = function () {
var path;
window.addEventListener('message', function(event) {
//可以接收模型路径消息,将path设置为接收到的路径,再进行打开模型
console.log('Received message from parent:', event.data);
path = event.data.path;
var type = event.data.type;
var name = event.data.name;
let fileObjs = parseFileInfo([[path,name,type]]);
if (!fileObjs || fileObjs.length === 0) {
return; // 没有文件信息
}
// 原生H5渲染
initOnline(basePath,fileObjs);
}, false);
}

全部评论