如何在嵌套的 html 文件中执行脚本代码？答案

【问题标题】：How to execute script code in nested html files?如何在嵌套的 html 文件中执行脚本代码？
【发布时间】：2019-10-19 09:14:27
【问题描述】：

当我在电子应用程序中加载嵌套的 HTML 时，我的脚本代码没有被调用，我不知道为什么。

<div id="leftsidebar">

    </div>
    <div id="rightsidebar">

    </div>

    <div id="main" class="mainContent">
    </div>

    <script>

        const fs = require('fs');
        // Loads the html required for the side bar
        fs.readFile('leftSideBar.html', (err, data) => {
            document.getElementById('leftsidebar').innerHTML = data;
        });
        fs.readFile('rightSideBar.html', (err, data) => {
            document.getElementById('rightsidebar').innerHTML = data;
        });

        function loadMainWindowHTML(htmlString) {
            fs.readFile(htmlString, (err, data) => {
                document.getElementById('main').innerHTML = data;
            });
        }


    </script>

这是我主窗口中的主要 HTML 代码，当我单击左侧栏中的一个项目时，它应该使用我要打开的 HTML 文件执行 loadMainWindowHTML()。


    <div id="myleftSidebar" class="leftSideBar">

        <a href="#" onclick="loadMainWindowHTML('searchUser.html')">Search User</a>

    </div>

HTML 文件被这样调用并正确加载到 id 为 main 的 div 中，但是 searchUser.html 中的脚本永远不会执行。

<head>

    <title>Document</title>
    <script>

        console.log("do we reach?");

    </script>
</head>

日志永远不会出现在任何地方。对此有何解释或解决方法？

【问题讨论】：

浏览器会忽略通过.innerHTML 插入的内容中的<script> 元素。
那么为了执行js，我应该简单地在head标签中添加对java脚本文件的引用吗？
你可以这样做。 jQuery 所做的（在某些情况下像这样）是显式去除内联的 <script> 内容，然后通过 eval() 运行代码。这是一个不平凡的过程。就我个人而言，如果可能的话，我会以不同的方式组织 HTML，以便“主”页面已经拥有它需要的所有代码，或者一些不太笨拙的方式来找出它需要什么并单独加载它（我想这是你的建议）。

标签： javascript html css electron

【解决方案1】：

您可以在这里使用任何答案，您不能使用 innerHTML 将脚本放入其中。我的解决方案是将 html 和脚本放在单独的文件中，并将脚本放在新的脚本元素中。 Can scripts be inserted with innerHTML?

【讨论】：