iframe标签及消息机制

    在项目中添加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);
}

 

全部评论