Jon*_*son 6 html javascript node.js electron
我正在尝试使用 Electron 创建我自己的http://meetfranz.com/版本。
\n\n该应用程序应允许多个 URL（例如https://messenger.com/和https://gmail.com/）可见，并具有选项卡式界面。
\n\n我尝试过生成 Webview 和 BrowserWindow。
\n\n我之前也尝试过使用 iFrame，但这是行不通的。
\n\n关于实现允许 cookie/https 的选项卡式最小浏览器界面的最佳方法有什么想法吗？
\n\n索引.html
\n\n<html>\n<head>\n <style>\n webview {\n display: inline-flex; \n width: 800px; \n height: 600px;\n }\n </style>\n</head>\n<body>\n <form name="form">\n <input name="input" placeholder="https://messenger.com/" value="https://messenger.com">\n <button type="submit">submit</button>\n </form>\n <div class="tabs">\n </div>\n <div class="webviews">\n </div>\n <!--<webview src="https://messenger.com/" autosize="on" nodeintegration="on" disablewebsecurity="on" webpreferences="allowRunningInsecureContent"></webview>-->\n <script type="text/javascript">\n require(\'./app.js\')\n </script>\n</body>\n</html>\nmain.js
\n\nconst {app, BrowserWindow, BrowserView} = require(\'electron\')\n\napp.on(\'ready\', createWindow)\n\nfunction createWindow(){\n let win = new BrowserWindow({\n width: 1000, \n height: 600,\n height: 600, \n "node-integration": "iframe", // and this line\n "web-preferences": {\n "web-security": false,\n "nodeIntegration": false,\n }\n })\n\n win.on(\'closed\', () => {\n win = null\n })\n\n win.webContents.openDevTools()\n\n // Load a remote URL\n //win.loadURL(\'https://github.com\')\n\n // Or load a local HTML file\n win.loadURL(`file://${__dirname}/index.html`)\n\n /*win.webContents.session.webRequest.onHeadersReceived({}, (d, c) => {\n if(d.responseHeaders[\'x-frame-options\'] || d.responseHeaders[\'X-Frame-Options\']){\n delete d.responseHeaders[\'x-frame-options\']\n delete d.responseHeaders[\'X-Frame-Options\']\n }\n c({cancel: false, responseHeaders: d.responseHeaders})\n })*/\n\n}\n\n//app.commandLine.appendSwitch(\'disable-web-security\')\n应用程序.js
\n\nconst {app, BrowserWindow, BrowserView} = require(\'electron\').remote\n\nlet tabs = document.querySelector(".tabs")\nlet webviews = document.querySelector(".webviews")\n\ndocument.getElementsByTagName("form")[0].onsubmit = function(event){\n //createWebview(form.input.value)\n createBrowserWindow(form.input.value)\n return false;\n}\n\nfunction createWebview(url){\n\n let webview = new WebView()\n webview.setAttribute("autosize","on")\n webview.setAttribute("nodeintegration","on")\n webview.setAttribute("disablewebsecurity","on")\n webview.setAttribute("webpreferences","allowRunningInsecureContent")\n webview.src = url\n webviews.appendChild(webview)\n\n let tab = document.createElement("div")\n tab.textContent = url\n tab.target = webview\n\n tabs.appendChild(tab)\n\n}\n\nfunction createBrowserWindow(url){\n\n let win = new BrowserWindow({\n width: 800, \n height: 600,\n y: 100,\n x: 100,\n webPreferences: {\n webSecurity: false,\n nodeIntegration: false\n }\n })\n\n win.setMenu(null)\n\n win.on(\'closed\', () => {\n win = null\n })\n\n view = new BrowserView({\n webPreferences: {\n nodeIntegration: false\n }\n })\n\n win.webContents.openDevTools()\n\n // Load a remote URL\n win.loadURL(url)\n\n}\n小智 6
<webview>如果你想拥有一个单一的窗口，显然这是一种方法。它也比 更好<iframe>，因为它与您的应用程序安全隔离并在单独的进程中运行。
请参阅文档：https://electron.atom.io/docs/api/webview-tag/
如果messenger.com 无法正确加载，这应该是您应该解决的问题（例如检查控制台消息、网络日志）。跟随你的直觉，你的第一个选择是正确的，现在是让它发挥作用。
| 归档时间： |
|
| 查看次数： |
13456 次 |
| 最近记录： |