vue + element 使用 iframe
技术难点:
1、iframe重新设置src不会重新加载的问题!
2、iframe所在的页面中通知父页面关闭模态框以及其他操作的问题(父子通信)!
解决思路:
1、iframe重新设置src后不会重新加载的问题:
我试了很多种办法,也百度不少度!网上的那种什么reload的方法没什么用,最终我自己想到了下面这种方法!具体思路如下:
1、我先准备个div标签包住ifream!
2、每次处理加载新页面的时候使用新建立的iframe覆盖;此时就可以看似达到重新
加载的目的!
3、注意的时第一步的iframe不能删除,即使是每次第2步会创建一个新的iframe进
去,第一次打开时也是空白!我也想不明白
具体原因,可能时创建iframe没那么迅速把!
实现代码如下:
<!--任务办理 --><el-dialog id="completeDialog" title="办理任务" :visible.sync="dialogComplete" width="95%" top = "5px"> <divid="completeDiv" > <iframe:src="completeTask" height="500" width="100%"></iframe></div></el-dialog>
// 任务表单complete(index,row){this.currentTaskId = row.task.id;this.completeTask ="xxx";$("#completeDiv").html("<iframesrc='"+ this.completeTask +"' height='500' width='100%'></iframe>");this.dialogComplete = true;}
2、iframe所在的页面中通知父页面关闭模态框以及其他操作的问题(父子通信):
这个我开始的想法是看能不能再iframe所在的页面通过this来访问到父页面的方法,可后来发现这个办法可能是用于父子组建的,但我们这是相当于两个页面了!最后是使用的 postMessage;关于他的简洁解释如下:
window.postMessage 的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。
想了解更多请点击 → HTML5如何用window.postMessage在网页间传递数据
在了解了postMessage的使用之后我们就可以开始了!思路如下:
1、在父页面增加个 postMessage 来监听iframe的信息!
2、子页面想关闭时通知父页面!
实现代码如下:
父窗口所在的页面:
// 关闭弹框监听this.postMessageListener = e => {var data = e.data;if(data.close){this.dialogComplete = false;}if(data.removeData){for(var i = 0; i < this.tableData.length; i++){if(this.currentTaskId == this.tableData[i].task.id){this.tableData.splice(i,1);break;}}}if(data.message){this.prompt(data.message);}}// 增加一个postMessage来监听消息window.addEventListener('message', this.postMessageListener)
iframe所在的窗口的方法:
/** 关闭窗口*/close(removeTask, message){let params = { close: true, removeData: removeTask,message: message }parent.postMessage(, '*')}