iframe与vue

iframe与vue

在vue中使用

1. 创建一个vue页面
2. iframe的src属性绑定需要的页面
3. 放在template中
4. 在iframe种调用vue的方法

a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com

// vue中
     let self = this;    
     window["goBack"] = () => {      
     self.goBack();    }; 
// iframe中   
     if(document.radyState == 'complete')
        {window.parent['goBack']();}  

iframe跨域问题

同源策略

所谓的同源，指的是协议，域名，端口相同。

解决跨域

1. 设置domain

document.domain = 'demo.com'
// a页面设置windows下边的方法
  window.fn= () => {
  // do something
}
// b页面调用
window.parent.fn()

3. 使用中间页
   使用一个与a页面同域名但不同路由的c页面作为中间页面，b页面加载c页面，c页面调用a页面的方法，从而实现b页面调用a页面的方法
   c页面的url为a.demo.com/c。c页面只是一个简单的html页面，在window的onload事件上调用了a页面的方法。

   window.onload = function () {
   parent.parent.fn();
   
   
   

4. postmessage
   window.postMessage方法可以安全地实现跨源通信，
   需要写明 目标窗口的协议、主机地址或端口。

下面展示一些 内联代码片。

// b页面
parent.postMessage(
 value,
 "http://a.demo.com"
);

// a页面
window.addEventListener("message", function( event ) {
 if (event.origin !== 'http://b.demo.com') return;
 fn()
 });

缺点

• 会堵塞主页面的onload事件，搜索引擎的解锁程序无法解读这种页面，不利于seo。
• iframe和主页面共享连接池，而浏览器相对相同域的连接有限制，所以会影响页面的并行加载。

总结
如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性，这样可以绕开以上两个问题。