AndroidのWebViewでassetsに置いたhtml内のjavascriptが動かない

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

ポイント
"script"タグ内のJavaScriptが呼び出された時点で、"id"や"class"がすでに宣言されていることを確認する。
そのため"body"の終了タグの前に"script"を設置するのが確実

■動かない例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Local html with javascript test</title>
    <script>
        var elem = document.getElementById("test");
        elem.textContent = "Hello world.";
    </script>
</head>
<body>
<p id="test">dummy</p>
</body>
</html>

■動く例(scriptの位置に注意)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Local html with javascript test</title>
</head>
<body>
<p id="test">dummy</p>
<script>
        var elem = document.getElementById("test");
        elem.textContent = "Hello world!";
    </script>
</body>
</html>

■所感

Android StudioでWebViewを使ったシンプルなWebブラウザを持ったAndroidアプリを作ったのですが、アプリのローカル(assets)内に設置したhtmlファイルに記述したJavaScriptが動きませんでした。

上記htmlを見ればわかるように、単純に”p”タグに”id”をつけて、textContentで内容を書き換えているだけなのですが。

Android Studioには実行状況をモニターできるAndroid Monitarというのがあり、動きをトレースしていると下記エラーが。

I/chromium: [INFO:CONSOLE(8)] "Uncaught TypeError: Cannot set property 'textContent' of null", source: file:///android_asset/index.html (8)

これはドキュメント内のノードが読み込めない仕様、、、面倒だなぁと思いながら調べて続けてみると同じ現象で悩んでいる方が。単純にJavaScriptが実行された時点で該当・参照する”id”もしくは”class”が読み込まれていないので「”null”には”textContent”プロパティもないから書き込めないよ」ということでした。

参考URL: http://stackoverflow.com/questions/29843397/js-error-message-textcontent-set-as-null

jQueryもbodyタグ直前に設置するケースなども同じ理由か。

関連記事

確認させてからリンク先にジャンプさせる1行JavaScript... リンクをクリックする際に、確認メッセージ(ダイアログ)を表示させてからジャンプさせたい。 削除処理ページに遷移する前など、アンカー(リンクタグ)をクリックした際に、ジャンプしてよいか確認させてからページを移動させる、もっともシンプルなJavaScript。 下記のように、if文や三項...
同一サイトのリンクをハイライトさせる... 同一ドメインのリンクに色をつけるGreasemonkey 2016/11/29 追記:Greasemonkeyでなくブックマークレットを使いたい方はこちら See the bookmarklet that hightlight links with same domain of the pa...
CodePressで全角スペースに色を付ける CodePressで全角スペースが入力されたら知らせるようにする コードを書いていたり、ソースを読んでいる際に、全角スペースが入力されていた場合にわかりづらいことがある。さくらエディタなどのように、全角スペースに気付くように色を付けたい。 例)" "→"□" CodePressのlangu...
WILLCOMのWX320Tで「メールの読み込みに失敗しました」エラー... ウィルコムのPHS"WX320T"を使っているのですが、USBケーブルで充電中にメールが届いてバイブが鳴った瞬間に携帯を開くと、ハングすることがよくあります。 ハングと言っても、すごく動作が重くなっていて、何を押しても、1アクションに18秒とか時間がかかるので、かなりイラっとくるんです。 こ...

スポンサーリンク
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク
レクタングル(大)広告