vue 打开一个iframe_vue嵌套iframe一系列问题
router.go()的使用此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该窗口文档的window.history.go(-1),并未更改父级项目的路由后退功能。解决办法:不通过改变iframe->src属性值去访问具体
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 MessageFrame Color
更多推荐
所有评论(0)