加载本地html文件时可以执行脚本吗？

Question

我正在点击一个链接并加载一个包含以下内容的 html 文件：

<div id="galleryPage">
    <p>Hello2</p>
</div>

<script type="text/javascript">
    console.log("hellosdsd");
</script>

然后我将它添加到我页面上的 div 中，它看起来像：

脚本永远不会执行...

我错过了什么？

像这样加载html：

document.querySelectorAll(".link").forEach((item) => {
    item.addEventListener("click", (event) => {
        event.preventDefault();
        const url = event.target.dataset["url"];

        get_html_file(`./Pages/${url}/`, (data) => {
            document.getElementById("container").innerHTML = data;
        });

        return false;
    });
});

function get_html_file(path, success, errorCallback) {
    fetch(path)
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.text();
        })
        .then((data) => {
            if (success) success(data);
            // document.getElementById("container").innerHTML = data;
        })
        .catch((error) => {
            if (errorCallback) errorCallback(error);
            console.error(
                "There has been a problem with your fetch operation:",
                error
            );
        });
}

Answer 1

是的，修改 innerHTML 不会评估它插入的脚本标签。

你可能想做类似的事情

[...document.querySelectorAll("#container script")].forEach(script => {
  if(script.dataset.evaluated) return;  // If already evaluated, skip
  eval(script.innerText);
  script.dataset.evaluated = 1;  // Mark as evaluated
});

在您加载新的 HTML 之后。

你也可以做例如script.parentNode.removeChild(script) 而不是数据集技巧，但这对于调试更有用。