🖥️

AndroidのWebViewでHTMLに`#`が入ると途中からHTMLが読み込まれなくなる件

2023/07/31に公開

HTML形式のテキストをAndroidのWebViewで読み込ませると期待した表示にならない現象が発生しました。

読み込ませたデータ(例)

<p>
  <span style="font-family: 'Univers W01', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; font-size: 16px; letter-spacing: 0.84px;">
    リンクは
  </span>
  <a style="margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 16px; line-height: inherit; font-family: 'Univers W01', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; vertical-align: baseline; box-sizing: border-box; text-size-adjust: 100%; outline: none; cursor: pointer; color: #ffa200;" href="{URL}">
     コチラ
  </a>
  <span>
     続きの文章
  </span>
</p>

HTMLの文章を読み込ませる必要があり、純粋にHTMLを受け取って表示すると「続きの文章」が表示されずに途中で文章が切れてしまいます。つまりaタグの途中で前で表示が途切れる現象が起きました。

原因と解決方法

文字列なので"が問題で弾かれてるのかと思いきや違う、色々探っていくとcolor: #ffa200;で止まっていることに気がつく。 テキスト(String)のため、特殊記号が読めないっぽい?HTML特殊文字に置き換えてもダメっぽい。 #を消してもカラーコードの色がそのままつくため、#を空文字に置き換える処理を実装したら期待する画面が表示されました。#なくてもカラーコード適用されるんや・・・。

まとめ

案外AndroidのWebView周りでの情報が落ちておらず、ハマりましたがどこで読み込まれてないか探っていけば案外解決できるもんだなと・・・。やはりコード読むの大事ですね。WebとAndroidアプリ両方やっていたのがいきた出来事でした。

株式会社アクトビ

Discussion