在vue中使用ifream需要注意的地方

在前端中，ifream我们这边其实用得比较少，因为不像原生那样，修改之后就需要重新下载，H5的话只需要发布到服务器上，下次打开会更新页面，所以一直没注意过用h5来包外部页面的需求。

近期，公司一个原生应用要做H5版本的，因为涉及到很多webview页面，这些webview页面包括：H5的协议页面、第三方保险的授权页面、其他授权页面。这些授权都是第三方公司给的页面，授权成功有后端来异步爬取第三方公司的授权结果。

经过调研发现，现阶段用H5来包外部页面的方式大概有两种：

1、用ajax get获取到页面内容，填充到页面里面，但这种有个弊端，就是必须纯静态的页面，也就是不能包含外部的JS,CSS，这种的话会引起跨域问题，其实如果做的话也可以，做代理，然后获取到了，替换之前的IP或域名，因为比较麻烦，这种方式就被我PASS掉了。

2、用ifream，这种方式是我第一反应考虑到的方式，因为不会有跨域问题，所以我就采用了这种方式

下面，说一说我用的ifream的好处和坏处：

好处：没有跨域问题，可以直接用，src路径直接引入就行了.并且ifream可以直接通过this.parent来调用父页面的方法，DOM元素可控，没用的元素可以直接删除

坏处：必须用ifream.contentWindow下的方法来获取数据，并且ifream.contentWindow执行方法时还是会有跨域问题，但这个跨域问题，只需要配置外层页面的代理就可以了，DOM元素不可控

最终用了ifream，我来说一下里面需要注意的几个点:

1、用onload来判断ifream是否加载完，为什么要判断？因为是嵌入一个页面，如果没有加载完的话你需要给用户提示加载中的等待动画。

2、父页面调用子组件的方法：必须同源，否则会提示你同源策略不允许跨域

document.getElementById('id').fream.contentWindow.方法名

用try catch判断是否同源；

try {
  let param = {
    orderId:'1234576543'
  }
  document.getElementById('id').fream.contentWindow.方法名();
}catch(err) {
  console.log(err)
}

3、ifream调用父页面的方法：

父页面必须定义全局的方法：

window.方法名=function(){}

ifream调用时直接window.parent.方法名()

4、因为vue中定义的全局方法都是异步的，所以需要在入口重定义this：

let self = this;
window.H5HiddenHud = function () {// 
  self.$vux.loading.hide()
};

总结：在页面嵌套页面实际上我感觉不是什么优雅的做法，这种情况下，最好能让提供接口，自己写页面，实在不得以再用这种方法。