vue 打开一个iframe_vue嵌套iframe一系列问题

router.go()的使用

此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。

详细描述：当多次更改iframe->src属性后，调用router.go(-1)，不能实现路由后退上一级，而是将iframe当作一个窗口文档，调用了该窗口文档的window.history.go(-1)，并未更改父级项目的路由后退功能。

解决办法：

不通过改变iframe->src属性值去访问具体内容，采用window.location.replace(url)更改iframe将访问的内容，具体代码如下：

exportdefault{

name: 'ComponentsName',

data() {

return{

url: ''

}

},

watch: {

url(val) {

if(val) {

this.$refs.iframe.contentWindow.location.replace(val)

}

}

}

}

复制代码

通信(父页面和子页面相互通信)

两个项目之间相互通信，涉及到跨域问题，子页面不能直接调用父页面的方法，父页面同样不能调用子页面的方法。

错误详情：Error in created hook: "SecurityError: Blocked a frame with origin "http://*" from accessing a cross-origin frame."

解决办法： postMessage

window.postMessage() 方法可以安全地实现跨源通信。该方法被调用时，会在所有页面脚本执行完毕之后向目标窗口派发一个MessageEvent消息。代码如下：

Post Message

Frame Color