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タグ直前に設置するケースなども同じ理由か。

関連記事

PHPでComet:フォーカスの当たっていないウィンドウが更新されない... PHPとprototype.jsを使ってAjaxでCometなチャットを作ろうとした。 FireFoxで動作検証していたのだが、ブラウザの複数ウィンドウを立ち上げ、別マシンでもウィンドウを立ち上げて検証していたところ、フォーカスの当たっていない(アクティブでない)ウィンドウでは、TextAre...
同一サイトのリンクをハイライトさせる... 同一ドメインのリンクに色をつけるGreasemonkey 2016/11/29 追記:Greasemonkeyでなくブックマークレットを使いたい方はこちら See the bookmarklet that hightlight links with same domain of the pa...
ラーメンタイマー:ブックマークレット:1行JavaScript... ラーメン・タイマー用ブックマークレット javascript:var%20remain%20=%2060%20*%203;%20setInterval(function()%20{%20document.body.innerHTML%20=%20'%E3%83%A9%E3%83%BC%...
WILLCOMのWX320Tで「メールの読み込みに失敗しました」エラー... ウィルコムのPHS"WX320T"を使っているのですが、USBケーブルで充電中にメールが届いてバイブが鳴った瞬間に携帯を開くと、ハングすることがよくあります。 ハングと言っても、すごく動作が重くなっていて、何を押しても、1アクションに18秒とか時間がかかるので、かなりイラっとくるんです。 こ...

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

シェアする

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