问题
有一个内嵌外部网页的需求,而页面内嵌进来出现跨域,从而进行一系列尝试
解决思路
由于是H5开发,当时内嵌用的是iframe,想起移动端有一个webview,webview的权限比iframe的高,就想着用webview尝试一下,但是发现最终浏览器把webview还是解析成为了iframe,于是自己写了一个demo,在原生环境下运行测试了一下webview,发现并未出现跨域问题,于是想着那我像app壳子那样用plus动态创建一个webview呢,应该不会被解析成iframe了把,测试过后,发现成功解决
解决代码逻辑
mounted() {
if (window.plus) { // 判断是否又plus
this.plusReady();
} else {
document.addEventListener('plusready', this.plusReady, false);
}
},
methods: {
plusReady() {
this.ws = plus.webview.currentWebview(); // 动态创建一个当前窗口
this.createWebview();
},
createWebview(){
// 创建webview this.src:地址 embed:id名称
let embed = plus.webview.create(this.src, 'embed', {
top: '58px',
bottom: '0px',
position: 'dock'
});
this.embed = embed;
// 添加到当前窗口
this.ws.append(embed);
}
},
// 组件销毁时清除,解决返回后,webview窗口未销毁返回导致遮挡原页面的问题
destroyed() {
// 从webview实例中移出
this.ws.remove(this.embed);
// 清除
this.embed.removeFromParent();
this.embed.close();
}