admin管理员组

文章数量:1122850

文章目录

    • iframe
    • 输入网址

源码地址： electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习

iframe

electron的窗口控件，实际上就是一个html解析工具，也就是说，通过electron可以用最短的代码，写一个浏览器，甚至可以查看浏览器中网页源代码，如下图中点击View->Toggle Developer Tools

代码只需要一个main.js

const {app, BrowserWindow} = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,height: 600,
  })

  mainWindow.loadURL('https://tinycool.blog.csdn/');
  mainWindow.show()
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

其中，mainWindow.loadURL用于加载链接。

当然，仅仅这样并不足以称为是一个浏览器，因为浏览器最起码得自己输入链接。而在electron中，提供了三种内嵌网页的方法，刚刚用到的BrowserWindow只是第一种。

而官方推荐的方法是iframe，这个也不出意外，众所周知iframe是个html元素，专门用于网页内嵌。故而修改index.html中的body，将iframe嵌入其中。

<body>
  <div id="container" style="width:100%">
    <input id="input" style="width:100%">
    <iframe id="iframe" width="100%"
      src="https://tinycool.blog.csdn/"
      frameborder="0"
      onload="changeFrameHeight()">
    </iframe>
  </div>
</body>

其中，changeFrameHeight为其加载时的事件，目的是让iframe的尺寸和整个页面相适配，这个函数可定义在preload.js中

function changeFrameHeight(){
  var ifm= document.getElementById("iframe");
    ifm.height=document.documentElement.clientHeight-50;
}

又考虑到当窗口尺寸发生变化时，也应该调用这个高度适配函数，故添加一个监听器

window.addEventListener('resize', function(){
  changeFrameHeight();
})

输入网址

这回上面有个输入框了，可以输入网址，接下来实现这样的功能：输入网址后回车，则iframe跳转到指定网址。这个功能十分简单，只需在加载的时候，为这个input绑定一个回车事件

window.addEventListener('DOMContentLoaded', () => {
  const input = document.getElementById("input");
  const ifm = document.getElementById("iframe");
  input.addEventListener("keydown", function(evt){
    if(evt.key==="Enter"){    //当按下回车键时
      updateURL(ifm,input.value)
    }
  })
})

function updateURL(ifm, url){
  if (url.slice(0, 8).toLowerCase() != 'https://' 
    && url.slice(0, 7).toLowerCase() != 'http://')
    url = 'https://'+ url;
  ifm.src = url   //更新ifm的地址
}

效果为

本文标签： 做一个浏览器Electron

版权声明：本文标题：用electron做一个浏览器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1727323286a1236239.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。