整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          WebView與JavaScript的交互

          WebView與JavaScript的交互

          于現(xiàn)如今H5的熱門,做過不少與H5的交互工作了,現(xiàn)在總結(jié)一下。

          初始化WebView

          /**

          * 初始化WebView

          */

          private void initWebView() { // 設(shè)置setWebChromeClient對象

          mWb_main.setWebChromeClient(new WebChromeClient() { @Override

          public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); //設(shè)置本地的ToolBar標(biāo)題

          mTv_main.setText(title);

          }

          });

          . Qt使用類

          1. QWebChannel

          2. QWebEngineView


          二. Qt JS文件

          1. qwebchannel.js 一般在安裝目錄下 \webchannel\shared\qwebchannel.js


          三. Qt代碼

          1. 定義交互類

          #include <QWebEnginePage>

          class JsClass: public QObject

          {

          Q_OBJECT

          public:

          explicit JsClass(QObject *parent=nullptr);

          // qt 調(diào)用 js 函數(shù)

          void qt_exec_js(QWebEnginePage* page, const QString& param) {

          page->runJavaScript(QString("print_info(\"%1\")").arg(param)); //調(diào)用函數(shù)帶字符串類型參數(shù)一定需要加雙引號

          //page->runJavaScript(QString("print_info(%1)").arg(12)); //調(diào)用函數(shù)參數(shù)類型為數(shù)字類型

          //page->runJavaScript(QString("print_info()")); //調(diào)用函數(shù)無參

          }

          public slots:

          // js 調(diào)用 qt 函數(shù)

          void js_exec_qt(const QString& param) {

          qDebug() << param;

          }

          };


          2. 主函數(shù)代碼片段

          QString url="file:///E:/login.html";

          QWebEngineView webView

          webView.load(QUrl(url));

          webView.show();


          JsClass jsClass;

          QWebChannel webChannel;

          webChannel.registerObject("jsClass", &jsClass);

          webView.page()->setWebChannel(&webChannel);


          connect(&webView, &QWebEngineView::loadFinished, this, [](){ jsClass.qt_exec_js(webView.page(), "Hello word");});

          //重要, 必須要等到 QWebEngineView 類把html加載完畢才能執(zhí)行調(diào)用js的函數(shù), 不然會(huì)出現(xiàn)找不到j(luò)s函數(shù)的錯(cuò)誤


          四. HTML 和 JS 代碼

          <!DOCTYPE html>

          <html>

          <head>

          </head>

          <body>

          <div id="demo"></div>

          </body>

          </html>


          <script src="./qwebchannel.js"></script> //把Qt中提供的js加入進(jìn)來


          <script>

          var jsClassIns;

          // 獲取qt中 JsClass 類的實(shí)例

          function initObj(){

          if (typeof qt !='undefined'){

          new QWebChannel(qt.webChannelTransport, function(channel){

          jsClassIns=channel.objects.jsClass; //名字和 webChannel.registerObject("jsClass", &jsClass); 第一個(gè)參數(shù)保持一致

          });

          }

          }

          // 調(diào)用Qt函數(shù)

          function exec_qt(param){

          if(typeof jsClassIns !='undefined'){

          jsClassIns.js_exec_qt(param);

          }

          }

          //Qt 調(diào)用 js

          function print_info(param) {

          document.getElementById("demo").innerHTML=param;

          exec_qt("Hello China"); //當(dāng)Qt調(diào)用了 js, Js 也調(diào)用Qt函數(shù)

          }

          initObj();

          </script>

          著移動(dòng)端互聯(lián)網(wǎng)的發(fā)展,越來越的APP運(yùn)用到H5,可移動(dòng)端H5與原生JavaScript是如何交互的呢?

          JavaScript調(diào)用Native的方式,主要有兩種:注入API和攔截URL SCHEME。

          注入 API 方式

          其主要原理是,通過WebView提供的接口,向JavaScript的Context(window)中注入對象或者方法,讓JavaScript調(diào)用時(shí),直接執(zhí)行相應(yīng)的Native代碼邏輯,達(dá)到JavaScript調(diào)用Native的目的。

          針對Android和IOS有不同的處理方式:

          1、Android的處理方式

          Android中,就是新建一個(gè)類,里面寫提供給H5操作的方法,并規(guī)定別名。

          在安卓4.2以上可以直接使用@JavascriptInterface注解來聲明。

          定義完這個(gè)方法后再調(diào)用mWebView.addJavascriptInterface()方法。

          將方法注入在window中,H5調(diào)用時(shí),根據(jù)“window. 別名.方法”來調(diào)用。

          2、IOS的處理方式

          IOS是利用WKWebView的新特性MessageHandler來實(shí)現(xiàn)JS調(diào)用原生方法的。

          WKWebView初始化時(shí),創(chuàng)建WKWebViewConfiguration對象,配置各個(gè)接口對應(yīng)的MessageHandler,然后再接受js傳遞的參數(shù)調(diào)用接口。

          H5中調(diào)用時(shí),使用window.webkit.messageHandlers.接口名. postMessage(參數(shù))。

          攔截 URL SCHEME

          攔截URL SCHEME的主要流程是:Web端通過某種方式(例如iframe.src)發(fā)送URL Scheme 請求,之后Native攔截到請求并根據(jù)URL SCHEME(包括所帶的參數(shù))進(jìn)行相關(guān)操作。

          在這個(gè)過程中,這種方式有一定的缺陷:

          • 使用iframe.src發(fā)送URL SCHEME會(huì)有URL長度的隱患,而且特殊字符需要編碼解碼。
          • 創(chuàng)建請求,需要一定的耗時(shí),比注入API的方式調(diào)用同樣的功能,耗時(shí)會(huì)較長。

          主站蜘蛛池模板: 亚洲熟妇av一区二区三区漫画| 高清一区二区三区视频| 亚无码乱人伦一区二区| 国产精品视频免费一区二区| 国产综合精品一区二区| 国语对白一区二区三区| 一区视频在线播放| 少妇精品久久久一区二区三区| 国产精品高清一区二区三区不卡| 亚洲欧美国产国产综合一区| 色一乱一伦一区一直爽| 亚洲国产成人一区二区精品区| 亚洲狠狠狠一区二区三区| 国产成人精品一区二三区熟女| 一区二区三区视频免费观看| 文中字幕一区二区三区视频播放| 久久青青草原一区二区| 插我一区二区在线观看| 精品国产一区二区三区香蕉| 中文字幕一区二区人妻| 亚洲AV无码一区二区乱子仑| 精品日本一区二区三区在线观看| 日韩最新视频一区二区三| 国产大秀视频一区二区三区| 色一情一乱一伦一区二区三区日本| 国产成人无码一区二区三区| 性色av无码免费一区二区三区 | 精品国产一区二区三区免费看| 国产福利电影一区二区三区,日韩伦理电影在线福 | 亚洲日韩中文字幕无码一区| 一区二区三区在线| 中文字幕一区二区三区5566| 一区二区网站在线观看| 亚洲一区二区三区在线观看网站 | 久久免费区一区二区三波多野| 丰满爆乳无码一区二区三区| 无码人妻精品一区二区在线视频 | 一区高清大胆人体| 丰满少妇内射一区| 日本一区二区三区在线看| 亚洲日本va午夜中文字幕一区|