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

Posted

技术标签:

【中文标题】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 文件中

以上是关于ELECTRON - 加载包含脚本标签的本地 HTML 文件的主要内容,如果未能解决你的问题,请参考以下文章

在Electron的预装脚本中使用typescript

Electron 加载本地图片的方法

Electron:无法加载预加载脚本:Resources/app.asar/src/preload.js

使用 electron-builder 构建 React-Electron 应用程序,index.js 加载到 pre 标签中

在Electron中最快速预加载脚本

Electron Builder:不允许加载本地资源:app.asar/build/index.html