如何使用上下文隔离 true 和节点集成 false，在前端而不使用路由而不是 Js 文件来加载上下文主体？

Question

我无法使用Electron Forge，所以为了避免在HTML文件中重复标头，我希望使用JS函数加载内容的基础，在页面内我也需要执行执行

页面中加载了 HTML 内容但未加载 JS 功能，为什么？

我有

main-window.js

作为：

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  contextIsolation: true,
  nodeIntegration: false,
  backgroundThrottling: false
}

在我的

renderer.js

：

function loadAndRenderPage(page) {
    fetch(`pages/content/${page}.html`)
        .then(response => response.text())
        .then(data => {
            document.getElementById('content').innerHTML = data;
            switch (page) {
                case 'home':
                    document.getElementById('org-name').innerText = resourcePath.ORG_NAME || 'Aiken';
                    // console.log(window.resourcePath.ORG_NAME);
                    break;
                case 'choice':
                    loadScript('choice');
                    break;
                case 'pin_entry':
                    // pinEntry();
                    break;
                default:
                    break;
            }
        });
}

function loadScript(page) {
   fetch(`js/${page}.js`)
         .then(response => response.text())
         .then(data => {
              const scriptElement = document.createElement('script');
              scriptElement.text = data;
              document.head.appendChild(scriptElement);
         });
}

在

index.html

文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <title>Title</title>
    <link rel="stylesheet" href="index.css">

    <!-- Bootstrap CSS -->
    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<header id="header"></header>
<main id="content"></main>
<footer id="footer"></footer>
<script src="renderer.js"></script>
</body>
</html>

在“网络”选项卡中我可以看到 JS 文件加载：

即使我在页面调用loadScript文件，js函数也没有执行？文件

choice.html

可以工作，但

choice.js

函数加载了一些 HTML 内容，但未执行。

Answer 1

如果您在单独的 js 文件中使用它来执行该函数，它将无法工作

document.addEventListener('DOMContentLoaded', () => {
    // your function 
});

由于您替换内容，您的文件不会重新加载，因此函数不会执行，并且也会在主脚本之后添加为另一个脚本可能会在以后的大型制作中引发几个问题。

尝试使用包装你的函数可执行函数

(function hello() {
})();

如何使用上下文隔离 true 和节点集成 false，在前端而不使用路由而不是 Js 文件来加载上下文主体？

问题描述投票：0回答：1

1个回答

最新问题

如何使用上下文隔离 true 和节点集成 false，在前端而不使用路由而不是 Js 文件来加载上下文主体？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1