Electron开启Context Isolation后动态加载JS函数不执行的问题求助

无法使用Electron Forge，为避免HTML文件重复编写头部内容，通过JS函数加载页面核心内容，但加载的JS文件（如choice.js）虽在Network面板显示已加载，内部逻辑却不生效。

Electron窗口配置（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>

1. 脚本执行时机错位：loadScript是异步操作，choice.js的逻辑可能在choice.html插入DOM并渲染完成前就运行，导致找不到目标元素。
2. 上下文隔离的间接影响：开启contextIsolation: true后，插入的脚本运行在主世界，但如果脚本逻辑依赖的DOM元素未就绪，就会执行失败。
3. 脚本加载方式的局限性：通过scriptElement.text注入代码，部分浏览器环境下可能存在执行时序或上下文的隐性限制。

方法一：确保脚本在DOM就绪后执行 #

方案1：调整renderer.js的时序 #

利用setTimeout微任务等待DOM渲染完成后再加载脚本：

function loadAndRenderPage(page) {
    fetch(`pages/content/${page}.html`)
        .then(response => response.text())
        .then(data => {
            document.getElementById('content').innerHTML = data;
            // 等待DOM渲染完成
            setTimeout(() => {
                switch (page) {
                    case 'home':
                        document.getElementById('org-name').innerText = resourcePath.ORG_NAME || 'Aiken';
                        break;
                    case 'choice':
                        loadScript('choice');
                        break;
                    case 'pin_entry':
                        // pinEntry();
                        break;
                    default:
                        break;
                }
            }, 0);
        });
}

方案2：修改choice.js内部逻辑 #

让脚本自身监听DOM就绪事件：

// choice.js
document.addEventListener('DOMContentLoaded', function() {
    // 原有的业务逻辑，比如操作content内的元素
    // 示例：document.getElementById('target-element').textContent = 'Loaded successfully';
});

方法二：在HTML中直接嵌入脚本引用 #

在choice.html末尾添加脚本引用，让浏览器自动加载执行：

<!-- choice.html -->
<div class="choice-container">
    <!-- 页面内容 -->
</div>
<script src="../js/choice.js"></script>

这种方式无需手动调用loadScript，HTML插入后浏览器会自动处理脚本加载与执行。

方法三：优化动态脚本加载逻辑 #

改用src属性加载脚本，并通过onload事件确保执行时机：

function loadScript(page, callback) {
    const scriptElement = document.createElement('script');
    scriptElement.src = `js/${page}.js`;
    scriptElement.onload = function() {
        callback && callback();
    };
    document.head.appendChild(scriptElement);
}

// 调用时
loadScript('choice', function() {
    // 脚本加载完成后，执行初始化逻辑
    // 比如调用choice.js中的init函数：initChoice();
});

内容的提问来源于stack exchange，提问作者Sasanka Weerakoon