android WebView與JS交互

目錄:

image

Android通過WebView調用 JS代碼

通過WebView的loadUrl()

點擊Android按鈕彤侍,即調用WebView JS(文本名為javascript)中callJS()

步驟1:將需要調用的JS代碼以.html格式放到src/main/assets文件夾里

需要加載JS代碼:xxxx.html

'<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Carson_Ho</title>

    // JS代碼
    <script>
// Android需要調用的方法
   function callJS(){
      alert("Android調用了JS的callJS方法");
   }
</script>

</head>

</html>'

步驟2:在Android里通過WebView設置調用JS代碼
Android代碼:MainActivity.java

public class MainActivity extends AppCompatActivity {

    WebView mWebView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView =(WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 設置與Js交互的權限
        webSettings.setJavaScriptEnabled(true);
        // 設置允許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先載入JS代碼
        // 格式規(guī)定為:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/xxxx.html");

        button = (Button) findViewById(R.id.button);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
       
                         // 注意調用的JS方法名要對應上
                        // 調用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    
                });
    
}

JS通過WebView調用 Android 代碼

以.html格式放到src/main/assets文件夾里

步驟1:在JS約定所需要的Url協議

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>

     <script>
         function callAndroid(){
            /*約定的url協議為:js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }
      </script>
</head>

<!-- 點擊按鈕則調用callAndroid()方法  -->
   <body>
     <button type="button" id="button1" onclick="callAndroid()">點擊調用Android代碼</button>
   </body>
</html>

步驟2:在Android通過WebViewClient復寫shouldOverrideUrlLoading ()

public class MainActivity extends AppCompatActivity {

    WebView mWebView;
//    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 設置與Js交互的權限
        webSettings.setJavaScriptEnabled(true);
        // 設置允許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 步驟1:加載JS代碼
        // 格式規(guī)定為:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


// 復寫WebViewClient類的shouldOverrideUrlLoading方法
mWebView.setWebViewClient(new WebViewClient() {
                                      @Override
                                      public boolean shouldOverrideUrlLoading(WebView view, String url) {

                                          // 步驟2:根據協議的參數,判斷是否是所需要的url
                                          // 一般根據scheme(協議格式) & authority(協議名)判斷(前兩個參數)
                                          //假定傳入進來的 url = "js://webview?arg1=111&arg2=222"(同時也是約定好的需要攔截的)

                                          Uri uri = Uri.parse(url);                                 
                                          // 如果url的協議 = 預先約定的 js 協議
                                          // 就解析往下解析參數
                                          if ( uri.getScheme().equals("js")) {

                                              // 如果 authority  = 預先約定協議里的 webview度陆,即代表都符合約定的協議
                                              // 所以攔截url,下面JS開始調用Android需要的方法
                                              if (uri.getAuthority().equals("webview")) {

                                                 //  步驟3:
                                                  // 執(zhí)行JS所需要調用的邏輯
                                                 Toast.makeText(MainActivity.this, "js調用了Android的方法", Toast.LENGTH_SHORT).show();

                                                  // 可以在協議上帶有參數并傳遞到Android上
                                                  HashMap<String, String> params = new HashMap<>();
                                                  Set<String> collection = uri.getQueryParameterNames();

                                              }

                                              return true;
                                          }
                                          return super.shouldOverrideUrlLoading(view, url);
                                      }
                                  }
        );
   }
        }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末蔽介,一起剝皮案震驚了整個濱河市摘投,隨后出現的幾起案子煮寡,更是在濱河造成了極大的恐慌,老刑警劉巖犀呼,帶你破解...
    沈念sama閱讀 221,406評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幸撕,死亡現場離奇詭異,居然都是意外死亡外臂,警方通過查閱死者的電腦和手機坐儿,發(fā)現死者居然都...
    沈念sama閱讀 94,395評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宋光,“玉大人貌矿,你說我怎么就攤上這事∽锛眩” “怎么了逛漫?”我有些...
    開封第一講書人閱讀 167,815評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長赘艳。 經常有香客問我酌毡,道長,這世上最難降的妖魔是什么蕾管? 我笑而不...
    開封第一講書人閱讀 59,537評論 1 296
  • 正文 為了忘掉前任枷踏,我火速辦了婚禮,結果婚禮上娇掏,老公的妹妹穿的比我還像新娘呕寝。我一直安慰自己,他們只是感情好婴梧,可當我...
    茶點故事閱讀 68,536評論 6 397
  • 文/花漫 我一把揭開白布下梢。 她就那樣靜靜地躺著,像睡著了一般塞蹭。 火紅的嫁衣襯著肌膚如雪孽江。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,184評論 1 308
  • 那天番电,我揣著相機與錄音岗屏,去河邊找鬼。 笑死漱办,一個胖子當著我的面吹牛这刷,可吹牛的內容都是我干的。 我是一名探鬼主播娩井,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼暇屋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了洞辣?” 一聲冷哼從身側響起咐刨,我...
    開封第一講書人閱讀 39,668評論 0 276
  • 序言:老撾萬榮一對情侶失蹤昙衅,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后定鸟,有當地人在樹林里發(fā)現了一具尸體而涉,經...
    沈念sama閱讀 46,212評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,299評論 3 340
  • 正文 我和宋清朗相戀三年联予,在試婚紗的時候發(fā)現自己被綠了啼县。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,438評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡躯泰,死狀恐怖谭羔,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情麦向,我是刑警寧澤,帶...
    沈念sama閱讀 36,128評論 5 349
  • 正文 年R本政府宣布客叉,位于F島的核電站诵竭,受9級特大地震影響,放射性物質發(fā)生泄漏兼搏。R本人自食惡果不足惜卵慰,卻給世界環(huán)境...
    茶點故事閱讀 41,807評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望佛呻。 院中可真熱鬧裳朋,春花似錦、人聲如沸吓著。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绑莺。三九已至暖眼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間纺裁,已是汗流浹背诫肠。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留欺缘,地道東北人栋豫。 一個月前我還...
    沈念sama閱讀 48,827評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像谚殊,于是被迫代替她去往敵國和親丧鸯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,446評論 2 359

推薦閱讀更多精彩內容