webview 打开远程页面并修改DOM

1.准备,使用uniapp或者是H5

文档:https://www.html5plus.org/doc/zh_cn/webview.html

1.大致:创建一个webview ,加载本地js,打开一个网络页面
创建webview

onReady: function() {
      wv = plus.webview.create("https://******", "custom-webview", {//1 创建一个webview
                hardwareAccelerated: true,
                scrollIndicator: "none",
                scalable: true
            });
    wv.appendJsFile("/hybrid/html/js/util.js");// 2.加载本地js
    var currentWebview = this.$scope.$getAppWebview();     
    currentWebview.append(wv); // 如果不想把远程页面显示在主窗口可以不这么做
}

uitl.js

一定要在这个事件里面做你想做的事情(例如下面,让div不显示,其实就是隐藏一个页面的广告)
 document.addEventListener("plusready", function() {
    var commonrightd = document.getElementsByClassName("common-right-d");
    if (commonrightd != null && commonrightd != null && commonrightd[0] != null && commonrightd != undefined) {
        commonrightd.display = "none";
    }
});

非常注意事项:

1.加载本地js要注意,uniapp需要把js放在hybrid目录下,和pages同级,(mui等是不需要的)
2.utiljs 中需要执行的动作必须在plusready事件中,注意注意,这个和document.ready差不多,当dom已经加载完毕才会执行,甚至可能还晚,所以如果是页面一显示就要动作,用户是能够感知到的,比如一个English 改成了中文。
怎么让用户感觉不到dom被修改: webview其实理解为是浏览器一个标签页那么只要在打开页面前缩小标签页,当然可能要显示一个加载中的动画,然后操作dom,然后标签页还原,这样,用户是感觉不出,网页内容有大修改

你可能感兴趣的:(webview 打开远程页面并修改DOM)