HTML中<Javascript>与activity之间的交互_html5 js activity-优快云博客

本文链接：https://blog.youkuaiyun.com/small_technical/article/details/49893681

本文介绍如何在Android应用中通过HTML布局实现动态页面加载，并通过JavaScript接口与自定义活动类进行交互，实现场景如播放音乐、启动HTTP网页等功能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在android中有时用到HTML所写的文件布局时，为了使其产生交互，因此在HTML中定义<script>使其达到交互的效果

首先利用web布局在xml中定义webview控件：

<span style="font-size:14px;"><WebView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/webview_one"/></span>

在activity中引入：

<span style="font-size:14px;"><span style="white-space:pre">		</span>mWebView = (WebView) findViewById(R.id.webview_one);
		//第一步，设置webview可操作
		WebSettings webSettings = mWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		//第三步，添加Javascript接口
		mWebView.addJavascriptInterface(new MyWebView(), "musicServiceInterfaceName");  //<span style="font-family: Arial, Helvetica, sans-serif;">musicServiceInterfaceName与<script>中window点后保持一致</span>

		 
		mWebView.loadUrl(url);    //String url = "http://192.168.1.132:8080/test/getmarry.html";  自定义HTML路径
	}
	
	/* 第二步
	 * 自定义一个activity与HTML交互类“musicServiceInterfaceName”和所使用方法
	 * */
	public class MyWebView{
		/*
		 * 界面交互，此方法与HTML中调用方法保持一致
		 * */
		public void playMusic(){
			Toast.makeText(MyWebViewActivity.this, "播放成功", Toast.LENGTH_SHORT).show();
		}
		
		/*
		 * 界面交互，此方法与HTML中调用方法保持一致
		 * */
		public void startGridViewHttp(){
			startActivity(new Intent(MyWebViewActivity.this, TestRelative.class));
		}
	}</span>

HTML中文件：下面在<head>标签下

<span style="font-size:14px;"><script>
		
		
		function myOnClick(){             //定义调用方法
			
			window.musicServiceInterfaceName.playMusic();      //<span style="font-family: Arial, Helvetica, sans-serif;">playMusic()为activity中调用方法（下面相同）</span>

		}
		function startGridView(){
			window.musicServiceInterfaceName.startGridViewHttp();
		}
		
		
		function nativeToJs(){
			var url = window.musicServiceInterfaceName.jsToNativeGetParameter(); //返回http://it.warmtel.com 
			window.location.href=url; //跳转到指定url
		}

		
		function toHttpWeb(){
			window.location.href="http://blog.warmtel.com";
		}
		
	</script></span>

在<body>标签中：

<span style="font-size:14px;"><div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;">

			<div class="topimg" >
				<img class="p2" src="./img/index_top_bg.png"/>
				<img class="p1" src="./img/index_microphone.png" οnclick="myOnClick()"/>     <span style="font-family: Arial, Helvetica, sans-serif;"><!-- 设置点击事件    当点击时调用activity中playMusic方法--></span>

			
				<h3 class="sp">
					<p id="sp11" class="sp1">xxx</p>
					<p class="sp2">
						还有<span class="sp3">35</span>天
					</p>
				</h3>
			</div>
		
			<div class="imgshow">
				<img src="./img/index_yaoqinghan.png" οnclick="startGridView()"/>   <!-- 设置点击事件 -->
			<img src="./img/index_zhufuqiang.png" /> 
			<img src="./img/index_yaoyiyao.png" /> 
			<img src="./img/index_hunsha.png" />

			</div>
			
			<p class="footer">
			<a href="###">xxx<img
				src="./img/redRightarrow.png" /></a>

			</p>
			
		</div></span>