• Android开发-WebView的使用
  • 李奇 发表于 2016/3/22 10:47:00 | 分类标签: Android开发 WebView的用法
  •  项目结构图:
    主要代码:
    • AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.linux.webviewtest">
    
        <uses-permission android:name="android.permission.INTERNET" />
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    </manifest>
    • AppUseJSInterface.java
    package com.example.linux.webviewtest;
    
    import android.content.Context;
    import android.webkit.JavascriptInterface;
    import android.widget.Toast;
    
    /**
     * Created by Linux on 2016/3/10.
     * 在js中调用的andriod代码
     */
    public class AppUseJSInterface {
        Context mContext;
    
        AppUseJSInterface(Context c) {
            mContext = c;
        }
    
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
        }
    }
    • MainActivity.java
    package com.example.linux.webviewtest;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.EditText;
    
    /**
     * writer: Linux
     */
    public class MainActivity extends AppCompatActivity {
        private WebView webView;
        private EditText editText;
        private String htmlUrl = "file:///android_asset/index.html";
    
        private void initComponent() {
            webView = (WebView) findViewById(R.id.webView);
            editText = (EditText) findViewById(R.id.editText);
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initComponent();
    
            webView.getSettings().setJavaScriptEnabled(true); // 支持javascript
            webView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url); // 根据传入的参数再去加载新的网页
                    return true; // 表示当前WebView可以处理打开新网页的请求,不用借助系统浏览器
                }
            });
        }
    
        // 请求html资源,在js中使用android
        public void searchHTML(View view) {
            // 给这个对象起的别名叫“huhxJS”
            webView.addJavascriptInterface(new AppUseJSInterface(this), "huhxJS");
            webView.loadUrl(htmlUrl);
        }
    
        // 请求url资源:
        public void searchURL(View view) {
            String urlStr = editText.getText().toString();
            webView.loadUrl(htmlUrl);
        }
    
        // 在android中调用js
        public void useJSInAndroid(View view) {
            String name = "I love you";
            webView.loadUrl("javascript:javascriptJS('"+name+"')");
        }
    }
    • activity_main.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.linux.webviewtest.MainActivity">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <EditText
                android:id="@+id/editText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="please input url"
                android:text="http://www.baidu.com" />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:onClick="searchURL"
                android:text="SearchUrl" />
        </RelativeLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingTop="16dp">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/searchHTML"
                android:onClick="useJSInAndroid"
                android:text="useJSInAndroid" />
            <Button
                android:id="@+id/searchHTML"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="50dp"
                android:onClick="searchHTML"
                android:text="SearchHtml" />
        </LinearLayout>
        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    • index.html
    <html>
        <head>
            <script type="text/javascript">
                function androidJS() {
                    var username = document.getElementById("username").value;
                    var password = document.getElementById("password").value;
                    huhxJS.showToast("username: " + username + ", password: " + password);
                }
                function javascriptJS(some) {
                    huhxJS.showToast(some);
                }
            </script>
        </head>
        <body>
            <form action="#" method="get">
                <font color="red">username:</font> <input type="text" id="username" name="username"><br>
                <font color="red">password:</font> <input type="password" id="password" name="password"><br>
                <input type="submit" value="submit">
            </form>
        <Button onclick="androidJS()">ClickOnMe</Button>
        </body>
    </html>
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:李奇
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮