AndroidのWebViewでassetsに置いたhtml内のjavascriptが動かない
この記事は次のブログに引っ越しました。
ポイント "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タグ直前に設置するケースなども同じ理由か。
