在之前的文章我們介紹了一下Electron的右鍵選單的製作，接下來我們繼續說一下Electron如何通過連結開啟瀏覽器和嵌入網頁。
現在有這樣一個需求，我們要在我們的軟體中加一個連結，然後點選該連結開啟Chrome瀏覽器來開啟此連結，那我們該如何實現呢？
先來看一下上一章之後我們的目錄結構：
為了實現上面的需求，我們可以按照之前我們寫前端程式碼一樣寫一個 a 標籤來進行頁面的跳轉：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div> <a href="https://www.baidu.com" target="_self">點我跳轉</a> <a href="https://www.baidu.com" target="_blank">點我跳轉</a> </div> </body> </html>
我們在 index.html 中寫入上述程式碼，用來進行我們的網頁跳轉，結果如下：
第一個跳轉其實是在自己的視窗跳轉到了百度首頁，第二個跳轉是又單獨開了一個視窗跳轉到來百度首頁，都沒有實現我們想要的通過谷歌瀏覽器跳轉頁面。
在Electron中為我們提供了跳轉到第三方頁面的模組 shell，
官方shell模組地址：https://www.electronjs.org/docs/api/shell
我們將index.html改成如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hello world</title> 6 </head> 7 <body> 8 <div> 9 <a id="aLink" href="https://www.baidu.com">點我跳轉</a> 10 11 </div> 12 <script> 13 let {shell} = require('electron'); 14 let aLink = document.getElementById('aLink'); 15 16 aLink.onclick = function (e) { 17 // 阻止預設事件 18 e.preventDefault(); 19 let aHref = this.getAttribute('href'); 20 // 通過 shell 開啟連結 21 shell.openExternal(aHref) 22 } 23 </script> 24 </body> 25 </html>
在上面的程式碼中，我們通過引入shell模組，並根據 shell.openExternal() 方法就能在谷歌瀏覽器中開啟我們的第三方瀏覽器來，還是比較簡單的。
接下來我們再來看一下如何在我們的應用中嵌入第三方網頁。
嵌入第三方網頁我們可以使用iframe標籤來進行嵌入：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div> <iframe src="https://www.baidu.com" frameborder="0" width="500" height="400"></iframe> </div> </body> </html>
我們在index.html中通過iframe標籤引入了百度首頁，執行一下檢視：
從執行結果看還是符合我們的預期的。
在Electron中其實也為我們提供了一個類似與<iframe>的標籤 <webview>，
Electron關於 <webview> 官方文件 https://www.electronjs.org/docs/api/webview-tag
但是官方並不建議我們目前使用此標籤，具體如下：
Electron的
webview標籤基於 Chromium webview </0> ，後者正在經歷巨大的架構變化。 這將影響webview的穩定性，包括呈現、導航和事件路由。 我們目前建議不使用webview標籤，並考慮其他替代方案，如iframe、Electron的BrowserView或完全避免嵌入內容的體系結構。
我試了一下此標籤，程式碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hello world</title> 6 </head> 7 <body> 8 <div> 9 <webview src="https://www.baidu.com" style="display:inline-flex; width:640px; height:480px"></webview> 10 </div> 11 </body> 12 </html>
然而執行結果並沒有顯示出百度三方網站，也沒有報錯，看來如官方所說目前還不太穩定。於是嘗試了推薦的 BrowserView 的方法。
BrowserView 官方地址：https://www.electronjs.org/docs/api/browser-view
BrowserView 存在於主程式， 被用來讓 BrowserWindow 嵌入更多的 web 內容。 它就像一個子視窗，除了它的位置是相對於父視窗。 這意味著可以替代webview標籤.
由於 BrowserView 存在於主程式中，所以我們需要將其寫在index.js 中，如下：
1 const {app, BrowserView, BrowserWindow} = require('electron') 2 3 function createWindow() { 4 // 建立瀏覽器視窗 5 const win = new BrowserWindow({ 6 width: 800, 7 height: 600, 8 webPreferences: { 9 nodeIntegration: true 10 } 11 }) 12 13 //引入 menu.js 14 require('./menu'); 15 // 並且為你的應用載入index.html 16 win.loadFile('index.html'); 17 18 19 20 21 22 23 /** 24 * 通過 BrowserView 來巢狀三方網站 25 * @type {Electron.BrowserView} 26 */ 27 let view = new BrowserView(); 28 win.setBrowserView(view); 29 view.setBounds({ x: 0, y: 0, width: 300, height: 300 }); 30 view.webContents.loadURL('https://www.baidu.com'); 31 32 33 34 35 36 37 // 開啟開發者工具 38 win.webContents.openDevTools() 39 } 40 41 // Electron會在初始化完成並且準備好建立瀏覽器視窗時呼叫這個方法 42 // 部分 API 在 ready 事件觸發後才能使用。 43 app.whenReady().then(createWindow) 44 45 //當所有視窗都被關閉後退出 46 app.on('window-all-closed', () => { 47 // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出， 48 // 否則絕大部分應用及其選單欄會保持啟用。 49 if (process.platform !== 'darwin') { 50 app.quit() 51 } 52 }) 53 54 app.on('activate', () => { 55 // 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時， 56 // 通常在應用程式中重新建立一個視窗。 57 if (BrowserWindow.getAllWindows().length === 0) { 58 createWindow() 59 } 60 }) 61 62 // 您可以把應用程式其他的流程寫在在此檔案中 63 // 程式碼 也可以拆分成幾個檔案，然後用 require 匯入。
根據官方提供的方法，我們先 new 一個 BrowserView，win.setBrowserView() 方法植入 win 視窗當中，可以根據 view.setBounds() 來設定視窗引數，最後通過view.webContents.loadURL() 來載入要嵌入的三方網站的地址，至此，我們在啟動程式時就可以嵌入三方網站了，執行結果如下：
