Android Webview: local html loads external css and.js files - Cannot Access Function In External.js

Question

我有一個 webview 加載位於我的資產文件夾（即 index.html）中的本地 html 文件。 我用這個調用加載它：

webview.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)

它的結構與任何帶有標題、頭部和正文標簽的普通 html 文件一樣。 頭標簽包含指向外部的腳本和鏈接標簽（不在本地 Android 構建中，但在外部服務器上）.js 和 css 文件。 我知道 css 和 .js 文件是有效的 URL，我可以在瀏覽器中訪問並查看代碼。 我也知道 dom 和 css 文件已加載，因為我在腳本標簽中添加了此 function ：

document.addEventListener('readystatechange', event => {
    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
       alert("hi 1");
     
    }
    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
      
          alert("hi 2");
      }
  });

現在，從我的 Android webview 代碼中，我調用 function 中的 ZDE9B9ED78D78D7E2E1DCEEFFEE71

view?.evaluateJavascript("javascript:setParameters('$mHost','$mToken');",
                        ValueCallback { jsCallback ->
                            Log.v(TAG, jsCallback)
                        })

我知道 setParameters() function 會執行，因為我有一個警報 function。 但是，當我嘗試在 external.js 文件中執行 function 時，我得到“TypeError：無法讀取未定義的屬性'myObject'”。 注意：我在 index.html 的腳本標簽內運行 function。 我知道我的 web 開發人員計數器部分在 external.js 文件中運行相同的 function 沒有問題。 為什么在 webview 中運行 external.js 會出現問題？

Answer 1

如果我是 javascript 而不是 Android 開發人員，我會更快地發現這一點。 我沒有收到一個答案，這是為 javascript 開發人員准備的。 我希望它可以為其他 Android 開發人員節省大量時間。

問題是需要在 DOM 元素准備好之后添加腳本文件，因為 if.js 代碼在沒有可用的 html 元素之前執行。

document.addEventListener('readystatechange', event => {
        // When HTML/DOM elements are ready:
        if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..?
         
          injectScripts()
        }
        //When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
        if (event.target.readyState === "complete") {
          alert("scripts ready");
        }
      });
    
    function injectScripts() {
    
        mArrayJs.forEach(element => {
          var s = document.createElement('script');
          s.setAttribute('src', element);
          s.async = false;
          addToBody(s)
        });
      }
    
    function addToBody(js) {
        document.body.appendChild(js);
      }