UnityのWebViewで開いたページの要素を編集する

WebViewでページを表示した後、ページ内要素を編集する方法のメモ。

WebViewはこちらのプラグインを使わせていただいてます。すごい便利。

github.com

自分がやった時の手順でメモ書いていくので、もうここは分かってるよ！って方は先飛ばしてください。

Chrome上で確認

先にやりたい動きをChrome上で確認する。

ページ内で右クリックし、検証をクリック。

ページ内で右クリック

色々右に出てくるので、一番上の欄にあるConsoleをクリックして処理を書き込んでみる。

例えばヘッダーを非表示にするなら、タグ取得して'display: none'にするとか。

狙った動きの処理ができたら、csスクリプト側に書いてみる。

document.getElementsByTagName('header')[0].style = 'display: none'

試しに移行前のHPのヘッダーを消した

WebViewの処理に追加する

単体でEvaluateJs()しても、全然動かなかったのでものすごい悩まされたのだが、

ldに追加してあげればロードした後に動いてくれる。気づくまでが遅かった…

public void Initialize()
{
    this.m_WebView = (new GameObject("WebViewObject")).AddComponent<WebViewObject>();
    this.m_WebView.Init(ld: (msg) =>
        {
            Debug.Log("ld(msg) : " + msg);
#if !UNITY_ANDROID
            this.m_WebView.EvaluateJS(@"
              if (window && window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.unityControl) {
                  window.Unity = {
                      call: function(msg) {
                          window.webkit.messageHandlers.unityControl.postMessage(msg);
                      }
                  }
              } else {
                  window.Unity = {
                      call: function(msg) {
                          window.location = 'unity:' + msg;
                      }
                  }
              }
          ");
#endif
            // 自分はこんな感じに入れた
            if ( !string.IsNullOrEmpty( this.m_LoadedJs ) )
            {
                this.m_WebView.EvaluateJS( this.m_LoadedJs );
            }
        },
 enableWKWebView: true);
}

で、そのロードするって時にstringのjsも保持する。自分はこんなやり方してます。

public void LoadHtml( string _url, string _html, string _js = null )
{
    this.m_Url = _url;
    this.m_Html = _html;
    this.m_LoadedJs = _js;

    // ↓保持したURLとか使ってLoadHtmlとかする関数
    this.LoadPage();
}

そして、↑の関数を呼ぶ時はこんな感じ。

this.m_WebView.LoadHtml( path, "", @"document.getElementsByTagName('header')[0].style = 'display: none'" );

これで無事に読み込んだ後にページの要素が編集された。