1. 程式人生 > >native與html互動小記

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";

        //#webviewjavascript預設是關閉的,必須要宣告開啟

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>

<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 標籤以定義事件的行為。

相關推薦

nativehtml互動小記

背景     工作需要,花了2個小時 寫了段一個native與html互動的簡單程式。不瞭解html相關文件。果然就是浪費時間。找文件就要蠻久。費勁。。。寫個博文記錄一下。 Demo功能實現: 1. 實現一個activity載入幫助頁 2. 幫助頁有二級子頁面 3. 按b

NativeH5互動的那些事

前言 Hybrid開發模式目前幾乎每家公司都有涉及和使用,這種開發模式兼具良好的Native使用者互動體驗的優勢與WebApp跨平臺的優勢,而這種模式,在Android中必然需要WebView作為載體來展示H5內容和進行互動,而WebView的各種安全性、相容性的問題,我想大多數人與它友誼的小床

資料上報--應用程序通過CGIhtml互動

寫在最前面 華清遠見教育集團 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初步探索——mfchtml互動

首先新增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原始碼閱讀——QTHTML互動程式設計

QT中通過QWebKit元件處理HTML,其中最重要的就是QWebView了~~~ 通過例子formextractor我們可以窺之一二: /*******************************************************************

flexhtml互動和js呼叫

一、在JavaScript中呼叫Flex方法 在 Flex 應用中,需要在方法列表中新增指定的公用方法,這樣Flex中的方法才能被JS呼叫到。在Flex中需要通過呼叫addCallback()可以把一個方 法新增到此列表中。 addCallback將一個ActionScript的方法註冊為一個JavaS

WebViewHtml互動,獲取點選事件,並處理響應邏輯

先看下圖: 大家現在看到的是一個載入了html的WebView,我們現在的需求是,按下左上角的返回箭頭,退出APP; 這就需要java程式碼跟html互動了,那麼要怎麼實現呢? 剛開始我在網上看了不少的資料,但是在我這基本上都不奏效 最後還是想到了解決方法,是這樣的:

React Native原生互動之跳轉及傳參

React Native(簡稱RN)開發的app大部分都可以在JS端完成,但是也有一些複雜的功能是需要原生端來完成的,或者是在原生專案中整合RN,此時RN與原生端就不可避免的需要進行互動,比如頁面跳轉和資料傳遞。 關於RN與原生更深層次的呼叫原理,及如何自己封

Nativejs互動方式

最近需要做Native同js的互動,所以就特意去查找了寫資料學習了一下Native同js互動的相關知識。對幾種常用的方式做了如下的整理和分析: 一、 Native監聽js的alert、confirm、prompt方法 Android端、IOS端均在監聽回撥中

AndroidHTML+JS互動

原創文章 ,首發在 http://blog.csdn.net/leejizhou/article/details/50894531李濟洲的部落格 在Android開發中,越來越多的商業專案使用了android原生控制元件與WebView進行混合開發,當然不僅僅就是顯示一個WebView那

QT通過JSHTML互動

標頭檔案加入 QT += core gui webenginewidgets webchannel 通過QWebChannel與JS互動原理 QWebEnginePage *page = new QWebEnginePage(this); webView->setPage

React NativeAndroid的互動

在使用RN進行跨平臺開發的過程中,經常會設計到跨平臺呼叫相關的內容,而在於RN進行互動的時候,最核心的就是RN提供的Component和Module。 其中,Component是專門將Native的UI暴露出來供JS呼叫的,而Native Module則是將N

Swift.WKWebViewHtml檔案的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