native與html互動小記

阿新 • • 發佈：2019-01-20

背景

工作需要，花了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

(new Object(){//#這裡的Object可以隨意命名

//#@JavascriptInterface必須要有
因為安全問題，在Android4.2中(如果應用的android:targetSdkVersion數值為17+)JS只能訪問帶有@JavascriptInterface註解的Java函式。

之前，任何Public的函式都可以在JS程式碼中訪問，而Java物件繼承關係會導致很多Public的函式都可以在JS中訪問，其中一個重要的函式就是 getClass()。然後JS可以通過反射來訪問其他一些內容。通過引入@JavascriptInterface註解，則在JS

中只能訪問@JavascriptInterface註解的函式。這樣就可以增強安全性。

如果您的應用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>

......

<body>

......

<ul>

<li>

<p>新手功能介紹</p>

</a>

</li>

<li>

<p>使用跑步機須知</p>

</a>//#這種東西有多個，就不多寫了

</li>

.......

</ul>

</div>

........

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

native與html互動小記

背景

Demo功能實現：

實現步驟：

Index.xml部分

附錄：

相關推薦