作者：爱上高清_925 | 来源：互联网 | 2023-09-17 13:18
iframe
electron的窗口控件&＃xff0c;实际上就是一个html解析工具&＃xff0c;也就是说&＃xff0c;通过electron可以用最短的代码&＃xff0c;写一个浏览器&＃xff0c;甚至可以查看浏览器中网页源代码&＃xff0c;如下图中点击View->Toggle Developer Tools
代码只需要一个main.js
const {app, BrowserWindow} &＃61; require(&＃39;electron&＃39;)function createWindow () {const mainWindow &＃61; new BrowserWindow({width: 800,height: 600,})mainWindow.loadURL(&＃39;https://tinycool.blog.csdn.net/&＃39;);mainWindow.show()
}app.whenReady().then(() &＃61;> {createWindow()app.on(&＃39;activate&＃39;, function () {if (BrowserWindow.getAllWindows().length &＃61;&＃61;&＃61; 0) createWindow()})
})
其中&＃xff0c;mainWindow.loadURL用于加载链接。
当然&＃xff0c;仅仅这样并不足以称为是一个浏览器&＃xff0c;因为浏览器最起码得自己输入链接。而在electron中&＃xff0c;提供了三种内嵌网页的方法&＃xff0c;刚刚用到的BrowserWindow只是第一种。
而官方推荐的方法是iframe&＃xff0c;这个也不出意外&＃xff0c;众所周知iframe是个html元素&＃xff0c;专门用于网页内嵌。故而修改index.html中的body&＃xff0c;将iframe嵌入其中。
<body><div id&＃61;"container" style&＃61;"width:100%"><input id&＃61;"input" style&＃61;"width:100%"><iframe id&＃61;"iframe" width&＃61;"100%"src&＃61;"https://tinycool.blog.csdn.net/"frameborder&＃61;"0"onload&＃61;"changeFrameHeight()">iframe>div>
body>
其中&＃xff0c;changeFrameHeight为其加载时的事件&＃xff0c;目的是让iframe的尺寸和整个页面相适配&＃xff0c;这个函数可定义在preload.js中
function changeFrameHeight(){var ifm&＃61; document.getElementById("iframe");ifm.height&＃61;document.documentElement.clientHeight-50;
}
又考虑到当窗口尺寸发生变化时&＃xff0c;也应该调用这个高度适配函数&＃xff0c;故添加一个监听器
window.addEventListener(&＃39;resize&＃39;, function(){changeFrameHeight();
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ll9beQSr-1651625379762)(js/electron_8.png)]
输入网址
这回上面有个输入框了&＃xff0c;可以输入网址&＃xff0c;接下来实现这样的功能&＃xff1a;输入网址后回车&＃xff0c;则iframe跳转到指定网址。这个功能十分简单&＃xff0c;只需在加载的时候&＃xff0c;为这个input绑定一个回车事件
window.addEventListener(&＃39;DOMContentLoaded&＃39;, () &＃61;> {const input &＃61; document.getElementById("input");const ifm &＃61; document.getElementById("iframe");input.addEventListener("keydown", function(evt){if(evt.key&＃61;&＃61;&＃61;"Enter"){ updateURL(ifm,input.value)}})
})function updateURL(ifm, url){if (url.slice(0, 8).toLowerCase() !&＃61; &＃39;https://&＃39; && url.slice(0, 7).toLowerCase() !&＃61; &＃39;http://&＃39;)url &＃61; &＃39;https://&＃39;&＃43; url;ifm.src &＃61; url
}
效果为
京公网安备 11010802041100号