WebView 與JS 互相調(diào)用

WebView加載本地html

loadUrl("file:///android_asset/html/index.html");

android調(diào)用js代碼

loadUrl("javascript:xxx()");

js調(diào)用android代碼

自定義對(duì)象交洗,實(shí)現(xiàn)調(diào)用方法(sdk>17需要添加注解)
webview.addJavascriptInterface(object,"xxx");
頁面可以通過別名使用(window.xxx.方法名)

例子

35758B91494043649FE977854B9380C2.jpg
<html>
<head>
    <title>JS交互</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
    function invokedByJava(param) {
        document.getElementById("content").innerHTML = "android--參數(shù):"+param;
    }
  </script>
</head>
<body>
<p id="content"></p>
<p>
    <input type="button" value="調(diào)用Java方法" onclick="window.jstojava.showToast('來至JS的參數(shù)');" />
    <input type="button" value="調(diào)用alert" onclick="alert('hello')" />
</p>
</body>
</html>

Activity

public class MyWebViewActivity extends BaseActivity{

    private WebView webview;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_PROGRESS);
        setContentView(R.layout.activity_mywebview);

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

       
        webview.loadUrl("file:///android_asset/test.html");
        //設(shè)置支持js
        webview.getSettings().setJavaScriptEnabled(true);
//


        findViewById(R.id.clickjs).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //調(diào)用JS方法绍赛,并傳遞參數(shù)
                webview.loadUrl("javascript:invokedByJava('hello world')");
            }
        });
        //js調(diào)用android代碼
        webview.addJavascriptInterface(new JsToJava(MyWebViewActivity.this),"jstojava");

        /*
                            當(dāng)WebView內(nèi)容影響UI時(shí)調(diào)用WebChromeClient的方法
         */
        webview.setWebChromeClient(new WebChromeClient() {
            /**
             * 處理JavaScript Alert事件
             */
            @Override
            public boolean onJsAlert(WebView view, String url,
                                     String message, final JsResult result) {
                //用Android組件替換
                new AlertDialog.Builder(MyWebViewActivity.this)
                        .setTitle("JS提示")
                        .setMessage(message)
                        .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                result.confirm();
                            }
                        })
                        .setCancelable(false)
                        .create().show();
                return true;
            }
        });
    }
}

自定義對(duì)象JsToJava

 
public class JsToJava {
    private Context mContext;

    /** Instantiate the interface and set the context */
    public JsToJava(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/clickjs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="android 調(diào)用 js方法"
        />
<WebView
    android:id="@+id/webeview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

最終效果

8FD9A9064C8447AD91508724E0984DA9.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末砚嘴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子呛凶,更是在濱河造成了極大的恐慌,老刑警劉巖捣染,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件继控,死亡現(xiàn)場離奇詭異,居然都是意外死亡嫉柴,警方通過查閱死者的電腦和手機(jī)厌杜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來计螺,“玉大人夯尽,你說我怎么就攤上這事〉锹” “怎么了匙握?”我有些...
    開封第一講書人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長陈轿。 經(jīng)常有香客問我圈纺,道長,這世上最難降的妖魔是什么麦射? 我笑而不...
    開封第一講書人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任蛾娶,我火速辦了婚禮,結(jié)果婚禮上潜秋,老公的妹妹穿的比我還像新娘蛔琅。我一直安慰自己,他們只是感情好峻呛,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開白布罗售。 她就那樣靜靜地躺著,像睡著了一般钩述。 火紅的嫁衣襯著肌膚如雪寨躁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評(píng)論 1 290
  • 那天牙勘,我揣著相機(jī)與錄音朽缎,去河邊找鬼。 笑死谜悟,一個(gè)胖子當(dāng)著我的面吹牛话肖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播葡幸,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼最筒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蔚叨?” 一聲冷哼從身側(cè)響起床蜘,我...
    開封第一講書人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤辙培,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后邢锯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扬蕊,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年丹擎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尾抑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蒂培,死狀恐怖再愈,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情护戳,我是刑警寧澤翎冲,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站媳荒,受9級(jí)特大地震影響抗悍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜钳枕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一檐春、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧么伯,春花似錦、人聲如沸卡儒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骨望。三九已至硬爆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間擎鸠,已是汗流浹背缀磕。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留劣光,地道東北人袜蚕。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像绢涡,于是被迫代替她去往敵國和親牲剃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容