webview注入js

js中与webview通信
function setStyle(){
  console.log('1111')
  return function () {
    console.log('2222')
    try{
      console.log('3333')
      //隐藏图片
      document.getElementsByClassName('img')[0].style.opacity=0;
      //模拟点击
      if(document.all) {//  兼容IE
        document.getElementsByClassName('img')[0].click();
      } else {//  兼容其它浏览器
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementsByClassName('img')[0].dispatchEvent(e);
      }
      var md = document.getElementsByTagName("video")[0];
      //监听视频开始播放
      md.addEventListener("play", function() {
        console.log("开始播放");
        //...要做的操作
      })
      //监听元素属性变化
      const observe = new MutationObserver((mutations) => {
        console.log('元素属性发生变化')
        //...要做的操作
      }).observe(document.querySelector('.tip'), {
          attributes: true
      })
      return '已删除'
    } catch(err) {
      return '执行失败:'+err
    }
  }
}
setStyle()()

//JS注册事件监听
function connectWebViewJavascriptBridge(callback) {
   if (window.WebViewJavascriptBridge) {
       callback(WebViewJavascriptBridge)
   } else {
       document.addEventListener(
           'WebViewJavascriptBridgeReady'
           ,  function () {
    if (window.onWebViewJavascriptBridgeReady)
      window.onWebViewJavascriptBridgeReady(
        (window.__bridge = WebViewJavascriptBridge)
      );
    callback(WebViewJavascriptBridge);
  },
           false
       );
   }
}
//初始化
connectWebViewJavascriptBridge(function(bridge) {
   bridge.init();
   //Android调用js方法去做一些操作
   bridge.registerHandler("ShowBtn", function(data, responseCallback) {
    let data1 = JSON.parse(data)
    if(data1.status){
      console.log("显示按钮")
      //... 要做的操作
    }else{
      console.log("隐藏按钮")
     //...要做的操作
    }
    var responseData = data1;
    responseCallback(responseData);
   });
})
//按钮状态切换时主动传递数据给webview
function btnStatus(bool) {
  window.WebViewJavascriptBridge.callHandler(
     'btnState', 
     {
      'isOpen':bool
     }, 
     function(responseData) {
      alert(responseData)
     }
 );
}
//按钮点击切换事件
var isClick=false
document.getElementsByClassName('btn')[0].onclick=function(){
 console.log('点击按钮')
  if(isClick){
    console.log('关闭')
    btnStatus(false)
    isClick=false
  }else{
    console.log('打开')
    btnStatus(true)
    isClick=true
  }
}

 

posted @ 2023-03-11 11:15  chicidol  阅读(514)  评论(0编辑  收藏  举报