插入innerHTML后努力执行javascript

编程问答 2022-06-03

问题描述

我正在学习电子，并试图使用innerHTML将文件中的html插入div。插入的html使用自己的CSS样式表，但我无法在其<script>标记中添加javascript文件来执行。现在，我已经看到一些人遇到类似的问题，并且我决定尝试使用eval()函数，因为我的应用程序不需要任何高级功能，因此我选择将其尽可能保持“原始”状态。但是我似乎无法使eval()真正发挥作用。

看我的文件结构：

MyProject
+-- src
|   +-- assets
|        +-- css
|        +-- js
|             +-- navigation.js
|             +-- tasks.js
|   +-- views
|        +-- tasks.html
|   +-- index.html
+-- index.js

index.html是主要视图。借助于tasks.html文件中的某些功能，我正在将navigation.js加载到其div之一中。 index.js只是创建所有窗口的基本电子javascript文件。

这是我最后尝试的方法（对我来说，似乎eval()函数的正确使用：

//Put view into content div
async function loadView(viewName) {
    var viewPath = 'views/' + viewName + '.html'
    const contentDiv = document.getElementById('content');
    contentDiv.innerHTML = await fetchHtmlAsText(viewPath);

    //execute any added scripts in the loaded html
    var scripts = contentDiv.getElementsByTagName("script");
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
}

这段代码的第一部分是我用来加载不同的html文件的依据，该文件基于在<a>中单击了哪个index.html元素。如注释所示，第二部分是我如何尝试执行tasks.html中使用的脚本。作为参考，以下是2个html文件的内容：

index.html 

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <title>My project</title>
        <link rel="stylesheet" href="assets/css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </head>

    <body>
        <div class="wrapper">
            <div class="sidebar">
                <div class="imgdiv">
                    <img src="assets/icons/1x/logo_orange.png">
                </div>
                <div class="nav">
                    <ul>
                        <li><a id="dashboard" class="a active" href="#">Dashboard</a></li>
                        <li><a id="tasks" class="a" href="#">Tasks</a></li>
                    </ul>
                </div>
            </div>
            <div id="content"></div>
        </div>

        <script src="../renderer.js"></script>
        <script src="assets/js/navigation.js"></script>
    </body>
</html>

tasks.html 

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <title>My project - Tasks</title>
        <link rel="stylesheet" href="assets/css/tasks.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </head>
    <body>
        <h1>TASKS</h1>
        <div id="tasks"></div>

        <script src="assets/js/tasks.js"></script>
    </body>
</html>

目前，tasks.js文件仅包含一个简单的console.log('executing tasks.js');，仅用于检查脚本是否正在执行。但是当我查看devtools控制台时，什么都没有记录。

有人知道我在这里遇到什么问题吗？

非常感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）