ELECTRON - 加载包含脚本标签的本地 HTML 文件

Posted 2023-03-07

【中文标题】ELECTRON - 加载包含脚本标签的本地 HTML 文件

【英文标题】：ELECTRON - Load local HTML file containing a script tag

【发布时间】：2019-07-17 15:39:12

【问题描述】：

我对 Node 和 Electron 还比较陌生，所以我可能会在这方面做得很差。

基本上我要做的是创建一个具有主导航的 SPA，用户可以单击链接，这些链接将加载包含脚本标记的本地 html 文件。目前我有一个主页，它使用 fs 来抓取 html 文件并将其成功加载到 div 中，但该检索到的文件中的 JS 都不起作用。我这样做是因为我需要与 UI 交互并添加动态元素

这是我的代码：

mainWindow.html

<script>
    document.addEventListener('DOMContentLoaded', () => 
        fs.readFile(path.join(__dirname, 'fragments/main/welcome.html'), 'utf8', (err, data) => 
            document.getElementById('content').innerHTML = data;
        );
    );
</script>

welcome.html

<section class="main-content-wide">
<h1>Welcome to my app</h1>
<p id="datetimeGreeting"></p>
<p id="funFact"></p>
<script>
    console.log('Hello world');
</script>

提前致谢。

编辑：如果有人有更好的方法或“最佳实践”方法，我很想听听。

【问题讨论】：

为什么不直接将 html 文件内容写入 div 并在单击按钮时切换其显示属性？

您无法通过编程方式加载 js 或任何其他文件我的主进程。

我在阅读您的 cmets 后更新了我的帖子 - 我需要脚本标签的原因是能够与 DOM 交互

是否反对将 iframe 用于您自己的本地内容或者如果它是远程内容 - 使用浏览器视图？

我一般尽量避免使用 iframe；如果我没记错的话，browserview 会打开一个新窗口——我希望它像“标签”一样打开。不过，我将回到绘图板上 - 我将保持这篇文章打开，直到我找到解决方案，一旦我找到 - 我会在这里发布它，以防其他人有同样的问题。

【参考方案1】：

这可能行得通，试一试并告诉我。

<script>
    document.addEventListener('DOMContentLoaded', () => 
        fs.readFile(path.join(__dirname, 'fragments/main/welcome.html'), 'utf8', (err, data) => 
            document.getElementById('content').innerHTML = data;
            var scripts = document.getElementById('content').getElementsByTagName("script");
            for (var i = 0; i < scripts.length; i++) 
              eval(scripts[i].innerText);
            
        );
    );
</script>

【讨论】：

只是提醒一下 - 它完全可以正常工作。对此，我真的非常感激。现在，如果以这种方式设置我的应用程序是一个好主意，是否是一个好主意 - 我将不得不做一些挖掘，但这会帮助我。谢谢！

不，这与更好的解决方案相去甚远。你应该找到其他选择。

看起来 - 我可以把我所有的前端逻辑放在一个渲染 JS 文件中