个人中心
gpt4 book ai didi

javascript - 在选项卡式 View 下，electron/javascript : node. js调用无法通过HTML脚本运行

转载 作者：行者123 更新时间：2023-12-03 12:41:38 24 4
gpt4 key购买 nike

我正在尝试在页面加载时触发一个函数。但是，页面加载回调包含node.js调用，这似乎已损坏。
该应用程序使用electron-tab来实现选项卡式 View 。
代码
以下HTML是从选项卡加载的html页面:tab1.html。


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self' 'unsafe-inline';
        script-src 'self' 'unsafe-inline';
        connect-src *">
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Transport</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script type="text/javascript" src="myscript.js"></script>
</head>

<body onload="OnLoadTransport();">

</body>
</html>

JS 
const Path = require('path')
const fs = require('fs');
const glob = require('glob');


function OnLoadTransport() {
    alert('Here');
    var filePaths = ListDir(__dirname, ".json");
    alert(filePaths.length.toString());
    for(var f=0; f<filePaths.length; f++) {
        alert(filePaths[f]);
        LoadJSON(filePaths[f], function (response) {
            var jsonObj = JSON.parse(response);
            alert(response);
        });
    }
}

function ListDir(rootDir, ext) {
    if (!fs.existsSync(rootDir)) {
        alert("no dir: " + rootDir);
        return [];
    }
    var filePaths = fs.readdirSync(rootDir);
    filePaths = filePaths.filter(file => file.endsWith(ext));
    return filePaths;
};

function LoadJSON(path, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', path, true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);   
}

渲染器 

const { remote, ipcRenderer } = require('electron');
const TabGroup = require("electron-tabs");
const mainProc = remote.require('./main.js'); // plug in main process
const parser = new DOMParser();

let tabGroup = new TabGroup({
    newTab: {
        title: 'New Tab'
    }
});

tabGroup.addTab({
    title: 'Tab 1',
    src: './tab1.html',
    closable: false,
    active: true
});

tabGroup.addTab({
    title: "Tab 2",
    src: './tab2.html',
    closable: false,
    // visible: true,
    active: false  // tab button is foregrounded
});


main.js 
const {app, BrowserWindow} = require('electron');

let mainWindow = null;

app.on('ready', () => {
    console.log('Hello from Electron');
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            webviewTag: true
        }
    });

    // mainWindow.webContents.openDevTools()

    mainWindow.webContents.loadFile('./app/index.html');
    
    // mainWindow events, within app lifecycle
    mainWindow.webContents.on('did-fail-load', function() {
        console.log("Failed to load index.html");
    })
    
})

index.html 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self' 'unsafe-inline';
        script-src 'self' 'unsafe-inline';
        connect-src *">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>MAM Hub</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <!-- 2. Include the basic markup of the tabs view -->
    <div class="etabs-tabgroup">
        <div class="etabs-tabs"></div>
        <div class="etabs-buttons"></div>
    </div>
    <div class="etabs-views"></div>
    <!--
        3. Include initialization code, you can include another js file
        Or write directly the JS code here.
    -->
    <script>
        // You can also require other files to run in this process
        require('./renderer.js')
    </script>
</body>

</html>

期待
在页面加载时，我希望看到一系列警报:
  • Here
  • 找到的JSON文件
    • 的路径
  • JSON文件
    • 的内容

    观察
    使用此代码，我可以看到警报 Here。但仅此而已。如果在Electron renderer.js中运行相同的代码，也可以正常工作:我能够查看有关找到的JSON文件及其内容的警报。
    所以我的猜测是 fs调用不起作用。但是，Chromium控制台中没有错误。
    在这种情况下，应如何启用node.js支持？

    最佳答案 

    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })

    也许，我认为您在创建浏览器时忘记了启用 nodeIntegration。要在 renderer.js上使用Node api。
    在 nodeIntegration上创建新的 BrowserWindow时，应启用 main.js

    关于javascript - 在选项卡式 View 下，electron/javascript : node. js调用无法通过HTML脚本运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60201468/

    24 4 0
    文章推荐： javascript - 当我尝试将 js 文件(带有 Node 模块)导入到我的主 Electron js 文件时出现 "require is not defined"错误
    文章推荐： ColdFusion (Railo) QoQ - Nulls Last
    文章推荐： google-analytics - 同一页面上有多个 Google Adwords 转换标签
    文章推荐： javascript - 如何为 electron + react js + next 进行生产构建
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com