文章/答案/技术大牛

发布

社区首页 >问答首页 >电子标签意外地将所有选项卡源加载到同一个选项卡中。

问电子标签意外地将所有选项卡源加载到同一个选项卡中。
EN

Stack Overflow用户

提问于 2020-01-22 04:31:20

回答 1查看 846关注 0票数 1

我正在使用电子标签构建一个选项卡式视图。

期望值

我希望为每个选项卡分别显示一个html。

观察

但是，运行包附带的经过修改的演示程序，与我的预期相反，我发现一个选项卡实际上显示了所有选项卡的内容。

代码

这是我的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");
    })

})

The renderer.js

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: 'Google',
    src: './tab1.html',
    closable: false
});

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

下面是主页HTML：index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' 'unsafe-inline';
        connect-src *">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TabbedWindow</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>

下面是标签HTML：tab1.html和tab2.html

<!DOCTYPE html>
<html>

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

<!-- <body>
    <h1>Hello from Electron</h1>
</body>
<p>
    <button class="alert">Current Directory</button>
</p> -->
<h1>Bookmarker</h1>
<div class="error-message"></div>
<section class="add-new-link">
    <form class="new-link-form">
        <input type="url" class="new-link-url" placeholder="URL" size="100" required>
        <input type="submit" class="new-link-submit" value="Submit">
    </form>
</section>
<section class="links"></section>
<section class="controls">
    <button class="clear-storage">Clear Storage</button>
</section>

</html>

<!DOCTYPE html>
<html>

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

<h1>Cmdlet</h1>
<div class="error-message"></div>
<section class="input-new-cmd">
    <form class="new-cmd-form">
        <input type="text" class="new-external-cmd" placeholder="whatever" size="100" required>
        <input type="submit" class="new-cmd-run" value="Run">
    </form>
</section>
<section class="results"></section>
<section class="controls">
    <button class="clear-results">Clear</button>
</section>

</html>

以下是加载的选项卡的外观：

我希望看到的只有tab2.html，标题为"Cmdlet"，在电子标签，但tab1.html，名为“书签”，最终也出现了，这是错误的。

注意到最初的演示有完全相同的问题.

更新

我有消除错误的安全设置。在修复我的安全后

    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self' 'unsafe-inline';
        script-src 'self' 'unsafe-inline';
        connect-src *">

我已经删除了选项卡中的额外内容，但是加载的页面似乎会阻塞选项卡按钮。

javascript

html

css

tabs

electron

回答 1

Stack Overflow用户

发布于 2020-01-22 10:28:35

我自己想出来的。

道德教训:当有疑问时，打开Chrome DevTool。

这是一个两部分的解决方案。

第1部分

最初的问题是由我的HTML头上的安全冲突造成的。令人眼花缭乱的视觉观察是由于渲染器无法完成整个窗口的绘制和悬挂在边缘的结果。这种安全需求似乎来自于electron-tabs。

修复

在所有HTML中添加“不安全-内联”，如下所示

<meta http-equiv="Content-Security-Policy" content="
        default-src 'self' 'unsafe-inline';
        script-src 'self' 'unsafe-inline';
        connect-src *">

在那之后，包中出现了一个真正的bug。

第2部分

在修复了安全性之后，我们得到了这样的视图

这是由于呈现的webview模糊了整个选项卡视图，这是当前electron-tab (即0.11.0 )中的一个bug。

修复

修复是由本期由@ChandlerCPrice给出的。它基本上修复了内联样式表中的webview绝对位置。

替换index.js of electron-tabs中的原始样式注入代码

// Inject styles
(function () {
    const styles = `
        webview {
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute;
            visibility: hidden;
        }
        webview.visible {
            visibility: visible;
        }
    `;
    let styleTag = document.createElement("style");
    styleTag.innerHTML = styles;
    document.getElementsByTagName("head")[0].appendChild(styleTag);
})();

使用

// Inject styles
(function () {
    const styles = `
        webview {
            position: absolute;
            visibility: hidden;
        }
        webview.visible {
            width: 100%;
            height: 100%;
            visibility: visible;
        }
    `;
    let styleTag = document.createElement("style");
    styleTag.innerHTML = styles;
    document.getElementsByTagName("head")[0].appendChild(styleTag);
})();

应用修复后的选项卡式视图。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59852638

复制

相似问题

问电子标签意外地将所有选项卡源加载到同一个选项卡中。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问电子标签意外地将所有选项卡源加载到同一个选项卡中。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问电子标签意外地将所有选项卡源加载到同一个选项卡中。
EN