WebView 安卓调用JS || JS调用安卓

举报
第三女神程忆难 发表于 2021/05/26 16:25:28 2021/05/26
6.6k+ 0 0
【摘要】 WebView扯一扯 显示网页的视图。这个控件是你可以在你的活动中滚动你自己的网络浏览器或者简单地显示一些在线内容的基础。它使用WebKit渲染引擎来显示网页,并包括通过历史向前和向后导航、放大和缩小、执行文本搜索等的方法。 WebView使用 首先加入布局文件,布局文件中写入WebView控件 <?xml version="1.0" encoding="ut...

WebView扯一扯

显示网页的视图。这个控件是你可以在你的活动中滚动你自己的网络浏览器或者简单地显示一些在线内容的基础。它使用WebKit渲染引擎来显示网页,并包括通过历史向前和向后导航、放大和缩小、执行文本搜索等的方法。


WebView使用

首先加入布局文件,布局文件中写入WebView控件


      <?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=".MainActivity">
      <Button
      android:id="@+id/tojs"
      android:text="调用JavaScript"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
      <WebView
      android:id="@+id/webview"
      android:layout_width="match_parent"
      android:layout_height="match_parent"></WebView>
      </LinearLayout>
  
 

他可以调用方法webview.loadUrl("");来进行加载,网页,但是是默认打开手机默认浏览器来访问的,来看一下详细的吧!

我用的是ButterKnife实例化控件,跟普通实例化稍微不一样,通过注解的方式实例化控件,具体使用可以参照我的博客文章,以下是对webview做出的详细解释和注释,另附上html代码

代码中都有注释,不多做解释


      public class MainActivity extends AppCompatActivity {
      //ButterKnife实例化控件
      @BindView(R.id.webview)
       WebView webview;
      @BindView(R.id.tojs)
       Button tojs;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
      //ButterKnife绑定,是实例化控件的
       ButterKnife.bind(this);
      //设置webview的类
       WebSettings webSettings = webview.getSettings();
      //设置模式,有缓存则加载缓存,无缓存则网络加载
       webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
      //允许支持JS(JavaScript)
       webSettings.setJavaScriptEnabled(true);
       webview.setWebViewClient(new WebViewClient() {
      //这样就不会打开手机自带浏览器,而是在webview控件中显示
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
      return true;
       }
      //这是网页开始加载时会调用的方法,可以用在加载前的一个动画
      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
      super.onPageStarted(view, url, favicon);
       Toast.makeText(MainActivity.this, "开始加载", Toast.LENGTH_SHORT).show();
       }
      //这是网页加载结束后调用的一个方法,可以用来结束动画
      @Override
      public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
       Toast.makeText(MainActivity.this, "加载完成", Toast.LENGTH_SHORT).show();
       }
       });
       webview.setWebChromeClient(new WebChromeClient());
       webview.loadUrl("网页地址");
       }
      //ButterKnife设置按钮监听事件
      @OnClick(R.id.tojs)
      public void onViewClicked() {
      //这是调用网页中js(javascript)的一个函数方法,调用:gotos()
       webview.post(
      new Runnable() {
      @Override
      public void run() {
      //调用js中方法
       webview.loadUrl("javascript:gotos()");
       }
       }
       );
       }
      }
  
 

html:


      <!DOCTYPE html>
      <html lang="en">
      <head>
     	<meta charset="UTF-8">
     	<title>我的页面</title>
      </head>
      <body>
      	床前明月光
     	<button type="button" onclick="gotos()">123</button>
     	<script type="text/javascript">
     		function gotos(){
      			alert("我是弹窗")
      		}
     	</script>
      </body>
      </html>
  
 


接下来写js调用安卓中的方法

webview提供了一个方法addJavascriptInterface,参数为Object,String

首先,先写js要调用的java类----myObj类继承自Object,我加了一句吐司,吐司的内容就是js传过来的内容

方法要用@JavascriptInterface进行注解


      public class myObj extends Object{
      @JavascriptInterface
      public void show(String str){
       Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
       }
       }
  
 

先来看html端


      <!DOCTYPE html>
      <html lang="en">
      <head>
     	<meta charset="UTF-8">
     	<title>Document</title>
      </head>
      <body>
      	床前明月光<br>
     	<button type="button" onclick="JsToAndroid()">点击js调用安吐司</button><br><br><br>
     	<script type="text/javascript">
     		function JsToAndroid(){
      			jsto.show("js调用安卓");
      		}
     	</script>
      </body>
      </html>
  
 

js调用安卓,这句话就是传到java里的参数

当点击按钮后,调用JsToAndroid这个函数,之后通过addJavascriptInterface,调用java的类

看下addJavascriptInterface怎么写:第二个参数必须与js函数的jsto那个位置保持一致

webview.addJavascriptInterface(new myObj(),"jsto");
 
 

文章来源: myhub.blog.csdn.net,作者:第三女神程忆难,版权归原作者所有,如需转载,请联系作者。

原文链接:myhub.blog.csdn.net/article/details/82755369

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。