vue嵌套iframe⼀系列问题
vue嵌套iframe⼀系列问题
最近在项⽬中遇到⼀个需求需要在⼀个项⽬中直接引⽤另⼀个项⽬，尝试各种情况⽆果后选择了iframe。现将调⽤过程中遇到的问题做⼀个分享。
<()的使⽤
  此情况主要适⽤于更改iframe中src值以后导致的路由跳转混乱。
  详细描述：当多次更改iframe->src属性后，调⽤(-1)，不能实现路由后退上⼀级，⽽是将iframe当作⼀个窗⼝⽂档，调⽤了该窗⼝⽂档的(-1)，并未更改⽗级项⽬的路由后退功能。
  解决办法：
  不通过改变iframe->src属性值去访问具体内容，采⽤place(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: ''
}
},iframe嵌套页面加载慢
watch: {
url(val) {
if (val) {
this.$place(val)
}
}
}
}
</script>
复制代码
通信（⽗页⾯和⼦页⾯相互通信）
  两个项⽬之间相互通信，涉及到跨域问题，⼦页⾯不能直接调⽤⽗页⾯的⽅法，⽗页⾯同样不能调⽤⼦页⾯的⽅法。
  错误详情：Error in created hook: "SecurityError: Blocked a frame with origin "*" from accessing a cross-origin frame."
  解决办法： postMessage
  window.postMessage() ⽅法可以安全地实现跨源通信。该⽅法被调⽤时，会在所有页⾯脚本执⾏完毕之后向⽬标窗⼝派发⼀个MessageEvent消息。代码如下：
<title>Post Message</title>
</head>
<body>
<div>
<div id="color">Frame Color</div>
</div>
<div>
<iframe id="child" width="50%" src="172.16.110.188/test.html" height="50vw" scrolling="auto" frameborder="0"></iframe>  </div>
<script type="text/javascript">
}
window.addEventListener('message',function(e){
var color=e.data;
},false);
</script>
</body>
</html>
复制代码
<style type="text/css">
html,body{
height:100%;
margin:0px;
}
#container{
widht:100%;
height:100%;
background-color:rgb(204, 102, 0);
}
</style>
</head>
<body >
<div id="container" onclick="changeColor();">
click to change color
</div>
<script type="text/javascript">
var ElementById('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>
复制代码
  上⾯的例⼦实现了两个不同域的页⾯之间的通信。但由于我们此处⽤的是动态更改tWindow.location来访问的内容，如果此处⽗页⾯要向⼦页⾯发起通信需要在iframe中页⾯加载完毕以后，不然⼦页⾯⽆法获取到通信数据。
应⽤场景
  ⼦页⾯需要调⽤⽗页⾯的⽅法或则使⽤⽗页⾯的数据时候，我们可以在⼦页⾯向⽗页⾯发起通信，让⽗页⾯调⽤该⽅法，或让⽗页⾯将数据传输过来。
注意事项
  postMessage⽀持对象传递，但不是所有浏览器都⽀持对象传递，在使⽤中还是使⽤字符串传值更好。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。