native與html互動小記
背景
工作需要,花了2個小時 寫了段一個native與html互動的簡單程式。不瞭解html相關文件。果然就是浪費時間。找文件就要蠻久。費勁。。。寫個博文記錄一下。
Demo功能實現:
1. 實現一個activity載入幫助頁
2. 幫助頁有二級子頁面
3. 按back鍵支援返回頁面返回退出
實現步驟:
一、載入幫助頁
Activity部分
public class Test2 extends Activity {
private boolean isRoot = true;
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_oshelp);
......
webview = (WebView) findViewById(R.id.web_view);
String fileUrl = "file:///android_asset/index.html";
//#webview的javascript預設是關閉的,必須要宣告開啟
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface
//#@JavascriptInterface必須要有
因為安全問題,在Android4.2中(如果應用的android:targetSdkVersion數值為17+)JS只能訪問帶有@JavascriptInterface註解的Java函式。
之前,任何Public的函式都可以在JS程式碼中訪問,而Java物件繼承關係會導致很多Public的函式都可以在JS中訪問,其中一個重要的函式就是 getClass()。然後JS可以通過反射來訪問其他一些內容。通過引入@JavascriptInterface註解,則在JS
如果您的應用android:targetSdkVersion數值為17或者大於17記得新增@JavascriptInterface
註解。
@JavascriptInterface
public void exitHelp(){
Toast.makeText(Test2.this, "exitHelp", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void attachRoot(){
isRoot = true;
}
@JavascriptInterface
public void unAttachRoot(){
isRoot = false;
}
}, "exitHelpAndroid");//#exitHelpAndroid定義了js呼叫的android的結構體,而這些註解過的函式就是具體方法
webview.loadUrl(fileUrl);
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
});
webview.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
String fileUrl = "file:///android_asset/os_help.html";
webview.loadUrl(fileUrl);
}
});
}
......
public void onBackPressed() {
if (webview.canGoBack() && !isRoot) {
webview.goBack();
} else {
super.onBackPressed();
}
}
}
Index.xml部分
<!DOCTYPE html>
<html lang="en">
......
<body>
......
<div class="container">
<ul>
<li>
<a href="javascript:exitHelp()">
<img src="images/icon_01.png" alt="">
<p>新手功能介紹</p>
</a>
</li>
<li>
<a href="use_treadmill.html">
<img src="images/icon_02.png" alt="">
<p>使用跑步機須知</p>
</a>//#這種東西有多個,就不多寫了
</li>
.......
</ul>
</div>
........
<script type="text/javascript">
function exitHelp(){
if(exitHelpAndroid){
exitHelpAndroid.exitHelp();
}
}
function attachRoot() {
if(exitHelpAndroid){
exitHelpAndroid.attachRoot();
}
}
window.onload=function () {
attachRoot();
}
function unAttachRoot() {
if(exitHelpAndroid){
exitHelpAndroid.unAttachRoot();
}
}
window.onunload =function () {
unAttachRoot();
}
</script>
</body>
</html>
附錄:
HTML 4.0 的新特性之一是能夠使HTML 事件觸發瀏覽器中的行為,比如當用戶點選某個HTML 元素時啟動一段JavaScript。下面是一個屬性列表,可將之插入HTML 標籤以定義事件的行為。
相關推薦
native與html互動小記
背景 工作需要,花了2個小時 寫了段一個native與html互動的簡單程式。不瞭解html相關文件。果然就是浪費時間。找文件就要蠻久。費勁。。。寫個博文記錄一下。 Demo功能實現: 1. 實現一個activity載入幫助頁 2. 幫助頁有二級子頁面 3. 按b
Native與H5互動的那些事
前言 Hybrid開發模式目前幾乎每家公司都有涉及和使用,這種開發模式兼具良好的Native使用者互動體驗的優勢與WebApp跨平臺的優勢,而這種模式,在Android中必然需要WebView作為載體來展示H5內容和進行互動,而WebView的各種安全性、相容性的問題,我想大多數人與它友誼的小床
資料上報--應用程序通過CGI與html互動
寫在最前面 華清遠見教育集團 15年專注高階IT培訓 做良心教育,做專業教育,做受人尊敬的職業教育 創客學院官網:http://www.makeru.com.cn/ 華清遠見創客學院嵌入式課程連結:http://www.makeru.com.cn/emb 華清遠見創客學院物聯網
react native 與伺服器互動坑
今天遇到兩個坑 一個是以表單formData封裝的JSON格式資料不是標準的json格式,導致伺服器解析資料是錯誤返回400 bad request。例如 let formData = new FormData(); formData.append("api_accou
React Native 與 原生互動
React Native 與原生互動一般有三種方式,分別是Callback,Promise,RCTDeviceEventEmitter import { AppRegistry, StyleSheet, Text, View, NativeModule
mfc初步探索——mfc與html互動
首先新增webpage的標頭檔案和原始檔; 將需要用到的html檔案放在工程目錄下 在MFC中新增ActiveX控制元件WebBrowser在窗體上,繫結變數m_Map 在OnInitDialog()裡面新增: //關聯地圖 m_Map.put_Silent(TR
winform 與 html 互動 簡單案例
本文主要簡單的記錄winform如何與html檔案中的資訊如何進行互動,即在winform中載入html介面,從而可以進行相互呼叫。 1.新建一個winform專案,若要在winform中載入html,需要一個webBrowser控制元件。 2.新建一個html頁面,這裡命
QT原始碼閱讀——QT與HTML互動程式設計
QT中通過QWebKit元件處理HTML,其中最重要的就是QWebView了~~~ 通過例子formextractor我們可以窺之一二: /*******************************************************************
flex與html互動和js呼叫
一、在JavaScript中呼叫Flex方法 在 Flex 應用中,需要在方法列表中新增指定的公用方法,這樣Flex中的方法才能被JS呼叫到。在Flex中需要通過呼叫addCallback()可以把一個方 法新增到此列表中。 addCallback將一個ActionScript的方法註冊為一個JavaS
WebView與Html互動,獲取點選事件,並處理響應邏輯
先看下圖: 大家現在看到的是一個載入了html的WebView,我們現在的需求是,按下左上角的返回箭頭,退出APP; 這就需要java程式碼跟html互動了,那麼要怎麼實現呢? 剛開始我在網上看了不少的資料,但是在我這基本上都不奏效 最後還是想到了解決方法,是這樣的:
React Native與原生互動之跳轉及傳參
React Native(簡稱RN)開發的app大部分都可以在JS端完成,但是也有一些複雜的功能是需要原生端來完成的,或者是在原生專案中整合RN,此時RN與原生端就不可避免的需要進行互動,比如頁面跳轉和資料傳遞。 關於RN與原生更深層次的呼叫原理,及如何自己封
Native與js互動方式
最近需要做Native同js的互動,所以就特意去查找了寫資料學習了一下Native同js互動的相關知識。對幾種常用的方式做了如下的整理和分析: 一、 Native監聽js的alert、confirm、prompt方法 Android端、IOS端均在監聽回撥中
Android與HTML+JS互動
原創文章 ,首發在 http://blog.csdn.net/leejizhou/article/details/50894531李濟洲的部落格 在Android開發中,越來越多的商業專案使用了android原生控制元件與WebView進行混合開發,當然不僅僅就是顯示一個WebView那
QT通過JS與HTML的互動
標頭檔案加入 QT += core gui webenginewidgets webchannel 通過QWebChannel與JS互動原理 QWebEnginePage *page = new QWebEnginePage(this); webView->setPage
React Native與Android的互動
在使用RN進行跨平臺開發的過程中,經常會設計到跨平臺呼叫相關的內容,而在於RN進行互動的時候,最核心的就是RN提供的Component和Module。 其中,Component是專門將Native的UI暴露出來供JS呼叫的,而Native Module則是將N
Swift.WKWebView與Html檔案的JS互動
實現效果: 以最簡單的形式與最簡單的demo來實現WKWebView與HTML檔案的JS互動方式. 包括Swift呼叫JS方法以及JS呼叫Swift原生方法.並傳遞各種型別引數 實現在控制檯列印JS中的Console.log內容. 1.新增WeakScrip
【HTML筆記五】與瀏覽者互動,表單標籤
一、使用表單標籤,與使用者互動 網站怎樣與使用者進行互動?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的資料。 語法:
html複習2-與瀏覽者互動,表單標籤及相關
1、使用表單標籤,與使用者互動 網站怎樣與使用者進行互動?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的資料。 語法: 講解: 1.<form> :<form&
HTML之與瀏覽器互動, 表單標籤
使用表單標籤,與使用者互動 網站怎樣與使用者進行互動? 答案是使用HTML表單(form)。表單是可以把瀏覽器輸入的資料傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的資料。 語法: <form method="傳送方式" action
HTML表單標籤,與瀏覽者互動
1.使用表單標籤,與使用者互動 網站怎樣與使用者進行互動?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的資料。 語法: <form method="傳送方式" actio