以編程方式替換整個文檔的“innerHTML”不會觸發加載 JS？

Question

我使用 JavaScript 通過單擊按鈕以編程方式替換我的整個頁面：

btn.addEventListener("click", evt => {
    fetch("hqsc").then(r => {
        const txt = r.text();
        txt.then(t => {
            document.querySelector('html').innerHTML = t;
            console.log(t);
        });
    }).catch(console.log);
});

打算加載的頁面如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"></meta>

    <style type="text/css">
        body {
            background-color: lightblue;
        }

        form#authenticate {
            width: 30vw;
            height: auto;
            margin: 20vh auto;
            border: 1px dashed black;
            border-radius: 5px;
            background-color: darkgray;
            padding: 15px 10px;
            display: grid;
            grid-template-columns: 120px 100px;
            grid-column-gap: 15px;
            grid-row-gap: 20px;
            grid-column-start: 1;
            grid-row-start: 1;
        }
    </style>
    **<script type="module" src="/static/auth.js"></script>**

</head>

<body>
    <form id="authenticate">
        <label for="username">User</label>
        <input id="username" type="text" name="username" />

        <label for="password">Pass</label>
        <input id="password" type="password" name="password" />

        <input type="submit" value="Enter" />
    </form>

</body>

</html>

我注意到新頁面上的/static/auth.js javascript 完全被忽略了。 為什么會被忽略？ 我該如何解決這個問題？

Answer 1

為什么會被忽略？

出於安全原因。 請參閱https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations的評論：

HTML5 指定使用innerHTML插入的<script>標記不應執行。

我該如何解決這個問題？

我首先建議您通過尋找一種替代方法來更新您的文檔來解決這個問題。 由於用戶操作而重置整個 HTML 文檔可能會導致許多問題； 我懷疑這個腳本問題將是您發現的最后一個意外副作用。

如果您絕對必須使用此方法，請參閱此問題以獲取有關如何使其工作的一些想法。

以編程方式替換整個文檔的“innerHTML”不會觸發加載 JS？

問題描述

1 個解決方案

解決方案1
3 已采納 2020-04-21 23:01:14

以編程方式替換整個文檔的“innerHTML”不會觸發加載 JS？

問題描述

1 個解決方案

解決方案1 3 已采納 2020-04-21 23:01:14

解決方案1
3 已采納 2020-04-21 23:01:14