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"  ><div  id="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("<iframe  src='"+ 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(, '*')
}