How to load a script tag with esmdefine in head using another javascript function

Question

我有一個 java 腳本 function test1.js。 function按需加載外部腳本，注入head。 作為供應商文檔的一部分，我們需要在 html 頭部加載一些腳本，其中一個外部腳本加載如下

<script>esmDefine(["https://website1.com/web1-component.js"]);</script>

我想在 java 腳本中做同樣的事情，並在 html 標簽中插入上面的行。

我嘗試了以下

let scriptElement = document.createElement('script') scriptElement.textContent = 'esmDefine(["https://website1.com/web1-component.js"])' document.getElementsByTagName('head')[0].appendChild(scriptElement);

嘗試了 scriptElement.innerText、scriptElement.innerHtml 等，但沒有按預期工作。

預期結果將是

<html>
<head>
<script>
      esmDefine([
         "https://website1.com/web1-component.js",
      ]);
    </script>
...
</head>

在這方面的任何想法表示贊賞

Answer 1

我猜你正面臨這個問題，因為你正在嘗試 append 一個腳本標簽在你的 head 標簽中，其中有一個 function 調用，所以一旦你的腳本標簽被注入到你的頁面的頭部，頁面就會嘗試執行esmDefine function。但是必須有一些其他的外部腳本文件定義了它，因為你說你沒有自己在任何地方定義它。然后為了執行這個 function，這個的基本聲明需要在那里呈現，我的意思是頁面的 JavaScript 渲染器應該知道如何執行這個 function 並且具有這個函數定義的文件是你鏈接到的外部腳本文件您的頁面，但 JavaScript 渲染的工作原理是，它首先解析頁面（HTML、CSS、JavaScript（頁面上的所有內容）），您已將其作為內聯添加到頁面，而不是外部文件。然后當一切都完成加載然后它繼續獲取外部引用並稍后將它們添加到 CSS Object Model 和 JavaScript Object Model。但是因為你立即將這個 88638908 調用為你的頁面執行它會失敗，因為尚未加載此 function（外部腳本文件）的定義。 您可以嘗試將此腳本標記（使用您的 esmDefine）附加到窗口加載事件偵聽器內的頁面頭部。 僅當頁面上的所有內容（包括依賴的外部資源）加載到頁面上時才會觸發此事件。 這樣你就不會遇到這個未定義的 ReferenceError。

我希望這會幫助你前進。

Answer 2

如果你想在腳本標簽中導入一個 js 腳本，我認為你可以導入它或使用 src="" 如果你不需要與腳本交互並知道它的行為方式。

也許嘗試這樣的事情：

<html>
<head>
    <script> 
        import esmDefine from 'https://website1.com/web1-component.js'
        // esmDefine() ?
    </script>
...

或者：

<html>
<head>
    <script> 
        import { esmDefine } from 'https://website1.com/web1-component.js'
        // esmDefine() ?
    </script>
...

或者：

<html>
<head>
    <script src='https://website1.com/web1-component.js'/> 
...

How to load a script tag with esmdefine in head using another javascript function

問題描述

2 個解決方案

解決方案1
0 2022-06-10 08:13:23

解決方案2
0 2022-06-16 12:31:18

How to load a script tag with esmdefine in head using another javascript function

問題描述

2 個解決方案

解決方案1 0 2022-06-10 08:13:23

解決方案2 0 2022-06-16 12:31:18

解決方案1
0 2022-06-10 08:13:23

解決方案2
0 2022-06-16 12:31:18