最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目，尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。
router.go()的使用
此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。
详细描述：当多次更改iframe->src属性后，调用router.go(-1)，不能实现路由后退上一级，而是将iframe当作一个窗口文档，调用了该窗口文档的window.history.go(-1)，并未更改父级项目的路由后退功能。
解决办法：
不通过改变iframe->src属性值去访问具体内容，采用window.location.replace(url)更改iframe将访问的内容，具体代码如下：
-
<!-- A.html -->
-
<template>
-
<iframe ref="iframe" scrolling="auto" width="100%" height="100%" frameborder="0" ></iframe>
-
</template>
-
<script>
-
export default {
-
name: 'ComponentsName',
-
data() {
-
return {
-
url: ''
-
}
-
},
-
watch: {
-
url(val) {
-
if (val) {
-
this.$refs.iframe.contentWindow.location.replace(val)
-
}
-
}
-
}
-
}
-
</script>
-
复制代码
通信（父页面和子页面相互通信）
两个项目之间相互通信，涉及到跨域问题，子页面不能直接调用父页面的方法，父页面同样不能调用子页面的方法。
错误详情：Error in created hook: "SecurityError: Blocked a frame with origin "http://*" from accessing a cross-origin frame."
解决办法： postMessage
window.postMessage() 方法可以安全地实现跨源通信。该方法被调用时，会在所有页面脚本执行完毕之后向目标窗口派发一个MessageEvent消息。代码如下：
-
<!-- index.html -->
-
-
<html>
-
<head>
-
<title>Post Message</title>
-
</head>
-
<body>
-
<div>
-
<div id="color">Frame Color</div>
-
</div>
-
<div>
-
<iframe id="child" width="50%" src="http://172.16.110.188/test.html" height="50vw" scrolling="auto" frameborder="0"></iframe>
-
</div>
-
<script type="text/javascript">
-
window.οnlοad=function(){
-
document.getElementById('child').contentWindow.postMessage('getcolor','http://172.16.110.188');
-
}
-
window.addEventListener('message',function(e){
-
var color=e.data;
-
document.getElementById('color').style.backgroundColor=color;
-
}, false);
-
</script>
-
</body>
-
</html>
-
复制代码
-
<!-- test.html -->
-
-
<html>
-
<head>
-
<style type="text/css">
-
html,body{
-
height:100%;
-
margin:0px;
-
}
-
#container{
-
widht:100%;
-
height:100%;
-
background-color:rgb(204, 102, 0);
-
}
-
</style>
-
</head>
-
<body style="height:100%;">
-
<div id="container" onclick="changeColor();">
-
click to change color
-
</div>
-
<script type="text/javascript">
-
var container=document.getElementById('container');
-
window.addEventListener('message',function(e){
-
if(e.source!=window.parent) return;
-
var color=container.style.backgroundColor;
-
window.parent.postMessage(color,'*');
-
}, false);
-
function changeColor () {
-
var color=container.style.backgroundColor;
-
if(color=='rgb(204, 102, 0)'){
-
color= 'rgb(204, 204, 0)';
-
} else{
-
color= 'rgb(204,102,0)';
-
}
-
container.style.backgroundColor=color;
-
window.parent.postMessage(color,'*');
-
}
-
</script>
-
</body>
-
</html>
-
复制代码
上面的例子实现了两个不同域的页面之间的通信。但由于我们此处用的是动态更改iframe.contentWindow.location来访问的内容，如果此处父页面要向子页面发起通信需要在iframe中页面加载完毕以后，不然子页面无法获取到通信数据。
应用场景
子页面需要调用父页面的方法或则使用父页面的数据时候，我们可以在子页面向父页面发起通信，让父页面调用该方法，或让父页面将数据传输过来。
注意事项
postMessage支持对象传递，但不是所有浏览器都支持对象传递，在使用中还是使用字符串传值更好。
转载于:https://juejin.im/post/5cdac2bbf265da03925804c7
https://blog.csdn.net/weixin_34033624/article/details/91446152