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

你可能感兴趣的:(element-ui,element)