ホームページ > ウェブフロントエンド > htmlチュートリアル > WebView_html/css_WEB-ITnose についての深い理解

WebView_html/css_WEB-ITnose についての深い理解

WBOY
リリース: 2016-06-21 08:52:07
オリジナル
1122 人が閲覧しました

この記事の著者は、Hujiang Education の Android 開発エンジニアであり、開発フレームワーク「KJFrameForAndroid」の作者である kymjs Zhang Tao です。私は読書とコーディングが大好きで、コミュニケーションが得意で、喜んで共有します。

概要

Android 開発者であれば、携帯電話に高性能 Webkit カーネル ブラウザが組み込まれていることは誰もが知っており、これは WebView というコンポーネントとして SDK にカプセル化されています。 。今回はAndroidのWebViewの詳しい使い方についてお話します。

Android 開発者であれば、携帯電話に高性能 Webkit カーネル ブラウザが組み込まれていることは誰もが知っており、これは WebView というコンポーネントとして SDK にカプセル化されています。

開発プロセスでは、いくつかの点に注意する必要があります。

1. これは、ネットワーク権限にアクセスするために追加する必要がある最も基本的な AndroidManifest.xml です。 2. アクセスするページに Javascript が含まれている場合、WebView は Javascript をサポートするように設定する必要があります。

WebView.getSettings().setJavaScriptEnabled(true);
ログイン後にコピー

3. ページ内にリンクがある場合、新しく開いた Android システム ブラウザーでリンクに応答するのではなく、リンクをクリックして現在のブラウザーで応答し続ける場合は、 WebView の WebViewClient オブジェクトをオーバーライドする必要があります。

mWebView.setWebViewClient(new WebViewClient(){    public boolean shouldOverrideUrlLoading(WebView view, String url){         view.loadUrl(url);        return true;    }});
ログイン後にコピー

4. 何も処理を行わない場合は、Web ページを閲覧してシステムの「戻る」ボタンをクリックすると、ブラウザ全体がfinish() を呼び出して Web ページ自体を終了します。ブラウザを起動するのではなく戻るために閲覧している場合、Back イベントは現在のアクティビティで処理および消費される必要があります (コードは多少合理化されています)

public boolean onKeyDown(int keyCode, KeyEvent event) {    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) {         mWebView.goBack();        return true;    }    return super.onKeyDown(keyCode, event);}
ログイン後にコピー

js との相互変調

Webページを表示することもできるので、もちろんWebページをネイティブな方法で操作することも可能です。 (1行では書ききれなかったのでインデントを調整しました)

public class WebViewDemo extends Activity {     private WebView mWebView;    private Handler mHandler = new Handler();     public void onCreate(Bundle icicle) {     setContentView(R.layout.WebViewdemo);    mWebView = (WebView) findViewById(R.id.WebView);     WebSettings webSettings = mWebView.getSettings();     webSettings.setJavaScriptEnabled(true);     mWebView.addJavascriptInterface(new Object() {      public void clickOnAndroid() {          mHandler.post(new Runnable() {              public void run() {                   mWebView.loadUrl("javascript:wave()");              }          });      }    }, "demo");     mWebView.loadUrl("file:///android_asset/demo.html");     }}
ログイン後にコピー

java オブジェクトを javascript オブジェクトにバインドする addJavascriptInterface(Object obj, String InterfaceName) メソッドを見てみましょう。オブジェクト名はinterfaceName (demo)、スコープは Global です。WebView を初期化した後、WebView によって読み込まれたページ内の javascript:window.demo を介してバインドされた Java オブジェクトに直接アクセスできます。<🎜 という HTML でどのように動作するかを見てみましょう。 >

<html><script language="javascript"> function wave() { document.getElementById("droid").src="android_waving.png"; }</script><body>  <a onClick="window.demo.clickOnAndroid()">  <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br> Click me! </a></body></html>
ログイン後にコピー
このようにして、Java オブジェクトの clickOnAndroid() メソッドを JavaScript で呼び出すことができます。同様に、このオブジェクトで多くのメソッド (テキスト メッセージの送信、連絡先リストや他のモバイルへの呼び出しなど) を定義できます。

ここでの wave() メソッドは、Java で JavaScript を呼び出す例です。

1 点説明する必要があります。addJavascriptInterface メソッドでバインドされる Java オブジェクトとメソッドは別のスレッドで実行する必要があります。スレッドでは、これが Handler を使用する目的でもあります。

WebView を徹底的に使用します

js で Android コードを呼び出します

まず、 WebView、WebViewClient、および WebChromeClient の違いについて簡単に説明します。WebView の設計では、WebView が独自の解析およびレンダリング作業に集中できるように、一部の作業を WebView クラスで行う必要はありません。 WebView によるさまざまな通知、リクエスト イベントなどの処理を支援します。WebChromeClient は、WebView による Javascript の処理を​​支援するダイアログ ボックス、Web サイトのアイコン、Web サイトのタイトルです。

関数の実装:

WebView を使用します。 Android では、HTML Web ページをロードし、HTML Web ページにボタンを定義します。ボタンをクリックしてトーストをポップアップします。

最初にインターフェイス クラスを定義し、渡します。コンテキスト オブジェクトを指定し、js で実装するメソッドをインターフェイス クラスに定義します。次に、assets リソース パッケージの下に html ファイルを定義し、そのファイル内にボタンのクリック イベントを js 関数として定義します。次に、XML で WebView コンポーネントを定義し、アクティビティ クラスで WebView を取得します。 WebView パラメータを設定します。ここでは、WebView が js をサポートするように設定し、定義された js インターフェイス クラスを WebView に追加するように注意してください。

WebView を使用してローカル HTML ファイルをロードする最後の方法は次のとおりです。

myWebView.getSettings().setJavaScriptEnabled(true);myWebView.addJavascriptInterface(new JavaScriptinterface(this),”android”);
ログイン後にコピー
ここでの htmltext は文字列の形式でアセットを読み取り、HTML 内のコンテンツをレポートします。

4. 前のページに戻るためのリターン キーの使用を実装します:
myWebView.loadData(htmlText,"text/html", "utf-8");
ログイン後にコピー

WebView のキー監視を設定し、期限切れのリターン キーを監視して Web ページに戻ることができるかどうかを判断し、goBack を使用します。 WebView の () をクリックすると、前のページに戻ります。

WebView Cache

プロジェクトで WebView コントロールが使用されている場合、HTML ページが読み込まれると、データベースとキャッシュの 2 つのフォルダーが作成されます。 /data/data/ パッケージ名ディレクトリに生成されます (電話機がルート化されていない場合、スクリーンショットは取得されません)。要求された URL レコードは WebViewCache.db に保存され、URL のコンテンツは WebViewCache フォルダーに保存されます。自分で試して、HTML ファイルを定義し、そのファイルに画像を表示し、WebView でロードして、再試行できます。この画像をキャッシュから読み取って表示します。

WebView キャッシュの削除

実際、キャッシュの保存場所はすでにわかっているため、削除は非常に簡単です。このキャッシュを削除して削除してください。

//携帯電話に保存されているキャッシュを削除します

private int clearCacheFolder(File dir,long numDays) {

int selectedFiles = 0;

if (dir!= null && dir.isDirectory()){

try {

for (File child:dir.listFiles()){

if (child.isDirectory()) {

deletedFiles += clearCacheFolder(child, numDays);

}

if (child.lastModified() < numDays) {

if (child.delete( )) {

deletedFiles++;

}

}

}

} catch(Exception e) {

e.printStackTrace();

}

}

return selectedFiles;

}

キャッシュ機能が有効かどうかは、

// キャッシュの使用を優先します:

WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);キャッシュを使用します:

WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

アプリケーションの終了時に次のコードを追加してキャッシュを完全にクリアします

File file = CacheManager.getCacheFileBaseDir();

if (file != null && file.exists() && file.isDirectory()) {

for (File item : file . listFiles()) {

item.delete();

}

file.delete();

}

context .deleteDatabase("WebView.db");

context.deleteDatabase("WebViewCache.db");

WebView は 404 エラーを処理します

Web ページを表示すると、問題は、Web ページが見つからない可能性があることですが、WebView は確実にそれを処理できます (すべてのコードを投稿するのは多すぎるので、ここでは重要な部分のみを投稿します)

public class WebView_404 extends Activity {

private Handler handler = new Handler() {

public void handleMessage(Message msg) {

if(msg.what ==404) {/ /ホームページが存在しません

//エラー ページ 404.html をローカル アセット フォルダーにロードします

web.loadUrl(“file:///android_asset/404 .html”);

}else{

web.loadUrl(HOMEPAGE);

}

}

};

@Override

protected void onCreate(Bundle SavedInstanceState) {

web.setWebViewClient(new WebViewClient() {

public boolean shouldOverrideUrl(WebView view,String url) {

if(url.startsWith(“http://”) && getRespStatus(url)==404) {

view.stopLoading();

//ローカルのエラー ページ 404.html をアセット フォルダーにロードします

view.loadUrl("file:///android_asset/404.html");

}else{

view.loadUrl(url);

}

return true;

}

});

new Thread( new Runnable () {

public void run() {

Message msg = new Message();

//ここでは、ホームページが存在するかどうかを判断します。は、loadUrl 、

を通じてロードされます//この時点では、ページが存在するかどうかを判断するために shouldOverrideUrlLoading は実行されません//ホームページに入った後、ホームページ内のリンクをクリックして他のページにリンクすると、

shouldOverrideUrlLoading メソッドが実行されます

if(getRespStatus(HOMEPAGE)==404) {

msg.what = 404;

}

handler.sendMessage(msg);

}).start();

}

}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート