Android WebView与javaScript之间的交互

最新推荐文章于 2024-05-17 00:35:04 发布
最新推荐文章于 2024-05-17 00:35:04 发布
阅读量2.5k 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010647991/article/details/51898026
版权

学习了下，webview js之间的交互，项目中马上用到。

JS调用java代码效果图

 

java代码调用javasrcipt代码效果图


index.html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" language="javascript">
        var share = JSON.stringify({"title": "sinodata",
                                           "desc": "ios",
                                           "shareUrl": "http://www.sinodata.com.cn"
                                           });

          function sendInfoToJava(){
          window.AndroidWebView.showInfoFromJs(share);
          }

           <!--在android代码中调用此方法-->
        function showInfoFromJava(msg){
         alert("showInfoFromJava："+msg);
        }
    </script>
</head>
<body la>
<div id='b'>
    <input οnclick="sendInfoToJava()" type="button" value="sendInfoToJava"/>
</div>
</body>
</html>
布局代码: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.chenjifang.webview.MainActivity">
    <Button
        android:id="@+id/test_btn"
        android:text="代码中调用web js代码传递参数"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/test_edt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

<WebView
    android:id="@+id/test_webview"
    android:layout_width="match_parent"
    android:layout_height="400dp"></WebView>
</LinearLayout>
java代码: 

public class MainActivity extends AppCompatActivity {
private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         mWebView = (WebView) findViewById(R.id.test_webview);
        //设置WebView支持JavaScript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
        //添加客户端支持
        mWebView.setWebChromeClient(new WebChromeClient());

        findViewById(R.id.test_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sendInfoToJs();
            }
        });

    }

    private class JsInterface {
        private Context mContext;

        public JsInterface(Context context) {
            this.mContext = context;
        }

        //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
        @JavascriptInterface
        public void showInfoFromJs(String share) {
            Toast.makeText(mContext, share, Toast.LENGTH_SHORT).show();
        }
    }

    //在java中调用js代码
    public void sendInfoToJs() {
        String msg = ((EditText)findViewById(R.id.test_edt)).getText().toString();
        //调用js中的函数：showInfoFromJava(msg)
        mWebView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
    }
总结下，java代码中要设置webview对javascript的支持， 
addJavascriptInterface(new JsInterface(this), "AndroidWebView");//这句代码中的第二个参数是在js访问方法的地址。
window.AndroidWebView.showInfoFromJs(share);

 


                

        

        

    




    

      

        

            

              
                
                  追风Coder
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Android webView JS 之间的交互

				
			

			

				

					qq_34651026的博客
				

				

					08-24
					
					635
					
				

			

		

		

			
				
Android WebView 与JS之间的交互 传值

			
		

	



                

              
                



	

		

			

				
					
Android的WebView中js与java代码相互调用

				
			

			

				

					njweiyukun的博客
				

				

					01-20
					
					1074
					
				

			

		

		

			
				
近期一直在做nwjs的东西，所以整理android的时间比较少；今天将webview相关的知识点整理上来。
现在越来越多的的项目中会采用webview的形式的展示自己的页面，通过这种形式的最大优点是展示的内容的可控性非常强，服务器可以通过更新服务端html文件来展示最新的内容。有些复杂html页面不单单是展示内容，可能还会有一些按钮，点击按钮后会跳转到android的本地页面，这个时候就需要通过

			
		

	



                


  
              

                


	

		

			

				
					
Android开发之路之 webview

				
			

			

				

					飞兔的博客
				

				

					01-13
					
					601
					
				

			

		

		

			
				
公众号：

欢迎关注我的个人公众号，来一起交流Android 开发知识




一、简介

   本来不想专门找一节来介绍webview技术的，因为现在对于混合开发有很多的框架比如RN和FLutter，但是这些框架对于一些webview页面比较少的项目来说显得重量级了一些。因此还是单独整理一篇出来，供以后项目的参考及学习。写这篇文章确实花了很长的时间，一方面觉得很混乱，api很多都想说一...

			
		

	





	

		

			

				
					
Android 与 js 相互调用

				
			

			

				

					晓果博客
				

				

					08-24
					
					571
					
				

			

		

		

			
				
本文章实现 Android webview加载 网页时 将数据传递给网页，同时，网页js 触发Android原生方法并且传递数据。

如有侵权，请联系作者删除。

 代码下载地址: https://github.com/app-demo/AndroidHtml.git

 

HTML代码如下：


&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&...

			
		

	



		

			
		



	

		

			

				
					
2024年最全android webview与js交互(动态添加js)，2024年最新Android程序员架构之路该如何继续学习

					
最新发布

				
			

			

				

					2401_84123357的博客
				

				

					05-17
					
					598
					
				

			

		

		

			
				
！最后放上一个大概的Android学习方向及思路（详细的内容太多了~），提供给大家：对于程序员来说，要学习的知识内容、技术有太多太多，这里就先放上一部分，其他的内容有机会在后面的文章向大家呈现出来，不过我自己所有的学习资料都整理成了一个文档，一直在不断学习，希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！Android架构师之路很漫长，一起共勉吧！

			
		

	





	

		

			

				
					
WebView中JavaScript交互【Android】

				
			

			

				

					书客创作
				

				

					06-23
					
					1944
					
				

			

		

		

			
				
WebView是移动端用来加载网页的控件，而应用要想直接与加载好的网页进行交互，可以通过js也就是JavaScript脚本来完成，所谓交互是指网页可以调用应用内方法（Java方法），应用也可以添加或调用网页相应内容。那么具体该如何实现呢？......

			
		

	





	

		

			

				
					
Android webview和js交互 之踩坑

				
			

			

				

					qq_35372662的博客
				

				

					04-20
					
					2029
					
				

			

		

		

			
				
1.前言：Android 通过webview和网页东西进行交互 由于网页无法调用原生的一些方法：比如调用相册或者照片之类的无法调用，则需要原生和js进行交互。
  本项目使用的是七牛的三方工具进行的交互 内置 &lt;input&gt; &lt;file&gt;标签 需要重写WebChromClient 根据版本调用openFile或者showFile方法，但适配出现了严重的问题，相当一部分机型不...

			
		

	





	

		

			

				
					
安卓WebView与JavaScript交互

				
			

			

				

					huangwenkui1990的专栏
				

				

					07-21
					
					583
					
				

			

		

		

			
				
一、JS调用Android并传参
Android代码
public class MainActivity extends Activity {
    private WebView webView;

     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(s

			
		

	





	

		

			

				
					
android中Webview与javascript的交互（互相调用）

				
			

			

				

					08-28
				

			

		

		

			
				
总结来说，Android中的WebView与JavaScript交互是通过多种方式实现的，包括JavaScript调用Android接口、Android执行JavaScript代码以及通过WebViewClient和WebChromeClient监听和响应网页事件。这种交互方式为...

			
		

	





	

		

			

				
					
Android WebView与JavaScript交互实现Web App

				
			

			

				

					08-12
				

			

		

		

			
				
在这个主题中，我们将深入探讨如何在Android中加载assets目录下的HTML文件，并通过WebView实现与JavaScript的交互。  首先，我们要了解`WebView`的基本用法。在Android布局文件中，我们添加一个WebView组件：  ```...

			
		

	





	

		

			

				
					
android中WebView和javascript实现数据交互实例

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了android中WebView和javascript实现数据交互实例,需要的朋友可以参考下

			
		

	





	

		

			

				
					
Android总结之WebView与Javascript交互（互相调用）

				
			

			

				

					01-04
				

			

		

		

			
				
前言：

最近公司的App为了加快开发效率选择了一部分功能采用H5开发，从目前市面的大部分App来讲，大致分成Native App、Web App、Hybrid App三种方式，个人觉得目前以Hybrid App居多，单纯的数据展示我们直接采用WebView来渲染就可以了，但是有时候可能会用到两者之间传递参数的情况，今天就来总结一下两者之间如何互相调用。本篇主要介绍WebView与Javascript交互数据，关于如何将H5网页呈现在WebView上可以参考这篇博客文章：Android总结之WebView使用总结。
WebView与Javascript交互：

 WebView与Javascr

			
		

	





	

		

			

				
					
Android WebView与JavaScript交互

				
			

			

				

					07-28
				

			

		

		

			
				
接下来，我们关注重点——JavaScript交互。Android提供了一种名为`WebViewClient`的类，它可以监听页面加载事件，并在特定时刻与JavaScript进行交互。通过重写`WebViewClient`的`shouldOverrideUrlLoading()`方法，...

			
		

	





	

		

			

				
					
Android：WebView与Javascript交互（相互调用参数、传值）

				
			

			

				

					guolong1983811的专栏
				

				

					10-12
					
					913
					
				

			

		

		

			
				
https://blog.csdn.net/books1958/article/details/44747045

Android中可以使用WebView加载网页，同时Android端的java代码可以与网页上的javascript代码之间相互调用。

效果图：

（一）Android部分：

布局代码：

&lt;LinearLayout xmlns:android="http://schema...

			
		

	





	

		

			

				
					
webview中js调用java方法

				
			

			

				

					caohuicong的博客
				

				

					04-06
					
					1312
					
				

			

		

		

			
				
前几天接到这样一个需求，在android webview中显示网页的内容，但是网页中有一按钮，点击后需要我们app中去处理。开始我想着是监听网页中的点击事件，但最后还是选择了 当点击了网页中的按钮后，让js(网页)调用我们的java方法。下面附上webview中的使用代码/*在js注册点击监听回调
*/
webview.addJavascriptInterface(MainActivity.this

			
		

	





	

		

			

				
					
Android WebView与js交互通信

				
			

			

				

					JackChan
				

				

					08-20
					
					3378
					
				

			

		

		

			
				
事出有因，那天我看到手厅的客户端里，在网页webview中点击网络设置后，跳转到了手机的网络设置界面，然后就搜了一下，原来是html中js与androidApp之间的交互。这么说的太费劲了，还是上截图吧，如下：




手机没网的时候，会弹出上面这个网页，然后我们通过快捷按钮“网络设置”后，界面跳转到如下




这个是通过js和webview共同完成的一个交互效果。

首

			
		

	





	

		

			

				
					
Vue JS 与Android webview的交互

				
			

			

				

					neabea2016的博客
				

				

					10-11
					
					5698
					
				

			

		

		

			
				
转发：
https://blog.csdn.net/solocoder/article/details/81948286
这篇文章讲的比较全，但是太复杂了，我总结了下。
我的项目使用Vue框架写的web端，大部分逻辑都在iframe里外加一个底部导航bar，没有用Vue-cli，使用多页面跳转。Android studio 使用webView访问。
一，Vue调用Android的方法
1.Andr...

			
		

	





	

		

			

				
					
android webview与js 交互

				
			

			

				

					05-15
				

			

		

		

			
				
Android WebView 是一个能够在 Android 应用程序中嵌入网页的组件，它可以开发出能够与 Web 页面进行交互的应用。其中与 Web 页面进行交互的一种方法是与 JavaScript 进行交互。下面简要解释一下 Android WebView 与...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值