vue + element 使用 iframe

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("");
  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(, '*')
}