最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

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

XAMPP下载 admin 1521浏览 0评论
 在前端中,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()
};
总结:在页面嵌套页面实际上我感觉不是什么优雅的做法,这种情况下,最好能让提供接口,自己写页面,实在不得以再用这种方法。

转载请注明:XAMPP中文组官网 » 在vue中使用ifream需要注意的地方

您必须 登录 才能发表评论!