因為最近很忙，本來打算不斷更新博客的。由于時間關(guān)系，因此更新較慢。

背景

因為最近有需求，想快速開發(fā)一個桌面端應用，最好是采用H5+JS+CSS3進行開發(fā)，這樣效率最高。但是要知道，H5來開發(fā)桌面端，由于瀏覽器安全策略問題，是不可能直接給你調(diào)用本地系統(tǒng)API的，因此也出現(xiàn)了很多打包框架，國外免費的有(Github團隊開發(fā)和維護)、NW.js(.js)及(不太推薦)。國內(nèi)有付費的打包軟件，有錢的大佬可以用，比較省心，底層原理還是封裝了。

這里我選用的是。雖然NW.js和都可以跨平臺打包，但是你會才到無數(shù)坑。各有優(yōu)缺點吧，我個人比較喜歡前者。

但是我相信大家在用前端技術(shù)做桌面開發(fā)的過程中，最大的痛苦就是瀏覽器的跨域問題、同源問題及其他安全性問題，還有對系統(tǒng)原生API支持力度不夠。這里我就遇到了這樣一個問題：

在頁面中的標簽里的href屬性，點擊以后還是在內(nèi)置的瀏覽器(Chrome V8引擎)中跳轉(zhuǎn)并打開多個頁面。而我想實現(xiàn)的是，點擊鏈接或者按鈕，會自動跳轉(zhuǎn)到系統(tǒng)默認瀏覽器中。

推薦方法

我在國內(nèi)網(wǎng)站上查閱了各種教程資料，只能感慨：1.治標不治本，思路不算好；2.很多方法已經(jīng)過時了。經(jīng)過我查閱了國外大量文獻和教程，最終找到一種合適的辦法。這里推薦第一種：

1.前提是你的鏈接需要添加target="_blank"屬性才行；

2.然后在main.js主程序中添加shell請求，如下：

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

3.其次在 ()函數(shù)中新增一個函數(shù)：

mainWindow.webContents.on('new-window', function(e, url) {
    e.preventDefault();
    require('electron').shell.openExternal(url);
  })

原來的文件長這樣：

const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1600,
    height: 1000,
    ...
    title: "xxx",
    webPreferences: {
      ...
      preload: path.join(__dirname, 'preload.js')
    }
  })
    ...
  // and load the index.html of the app.
  mainWindow.webContents.openDevTools();
  mainWindow.loadFile('index.html')

修改后的文件長這樣(注意觀察文件的不同)：

const { app, BrowserWindow, shell } = require('electron')
const path = require('path')
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1600,
    height: 1000,
    xxx
    title: "xxx",
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.webContents.on('new-window', function(e, url) {
    e.preventDefault();
    require('electron').shell.openExternal(url);
  })
    ...
  // and load the index.html of the app.
  mainWindow.webContents.openDevTools();
  mainWindow.loadFile('index.html')

然后你的鏈接就可以愉快的跳轉(zhuǎn)到電腦的默認瀏覽器啦~

其他方法

其他方法我就不多說了，簡單描述一下，不同需求可能用到的方法不一樣。

方法一

您可以簡單地使用：

//老外力薦的方法

require("shell").openExternal("http://www.google.com")

方法二

這個答案很老了，假設你有 jQuery。

const shell = require('electron').shell;
  
// assuming $ is jQuery
$(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    shell.openExternal(this.href);
});

方法三

代碼片段根據(jù) 版本 v12.0.0 中的折舊提供線索

const win = new BrowserWindow();
win.webContents.setWindowOpenHandler(({ url }) => {
    // config.fileProtocol is my custom file protocol
    if (url.startsWith(config.fileProtocol)) {
        return { action: 'allow' };
    }
    // open url in a browser and prevent default
    shell.openExternal(url);
    return { action: 'deny' };
});

方法四

要使所有 鏈接在默認 OS 瀏覽器中從外部打開，您必須向onclick它們添加一個屬性并更改該href屬性，以便它不會在 應用程序中加載任何內(nèi)容。

你可以使用這樣的方式：

aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
  aTags[i].href = "#";
}

但請確保在執(zhí)行此操作之前已加載整個文檔，否則它將無法正常工作。

更健壯的實現(xiàn)如下所示：

if (document.readyState != "complete") {
  document.addEventListener('DOMContentLoaded', function() {
    prepareTags()
  }, false);
} else {
  prepareTags();
}
function prepareTags(){
  aTags = document.getElementsByTagName("a");
  for (var i = 0; i < aTags.length; i++) {
    aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
    aTags[i].href = "#";
  }
  return false;
}

請記住，如果您加載外部文件，則必須在它們完全加載后也使它們經(jīng)歷此過程。

方法五

通過偵聽主體，以下解決方案將適用于 運行時可能尚不存在但僅在稍后出現(xiàn)在 DOM 中的標簽。

這個需要 jQuery：

$('body').on('click', 'a', (event) => {
  event.preventDefault();
  require("electron").shell.openExternal(event.target.href);
});

您可以將選擇器更改為僅針對某些鏈接，例如'#-view a'或'a.open-'。

這是一個沒有任何庫的替代方案：

document.body.addEventListener('click', event => {
  if (event.target.tagName.toLowerCase() === 'a') {
    event.preventDefault();
    require("electron").shell.openExternal(event.target.href);
  }
});

方法六

我將此方法與 v.13 一起使用。

我們攔截用戶的導航（window.）并在默認瀏覽器中打開 URL。

請參閱文檔：

const { shell } = require('electron');
window.webContents.on('will-navigate', function (e, url) {
    e.preventDefault();
    shell.openExternal(url);
});

方法七

關(guān)于tsx語法（）：

import { shell } from "electron";
shell.openExternal("http://www.google.com")

方法八

要在 的項目中打開外部鏈接，您需要模塊 Shell () 和方法。

但是，如果您正在尋找一種實現(xiàn)該邏輯的抽象方法，那就是為您的目標屬性創(chuàng)建一個自定義目標的處理程序。

const {shell} = require('electron');
if (document.readyState != "complete") {
    document.addEventListener('DOMContentLoaded', function() {
        init()
    }, false);
} else {
    init();
}
function init(){
    handleExternalLinks();
    //other inits
}
function handleExternalLinks(){
    let links = document.getElementsByTagName('a')
    let a,i = 0;
    while (links[i]){
        a = links[i]
        //If , so open using shell.
        if(a.getAttribute('target') == '_external'){
            a.addEventListener('click',(ev => {
                ev.preventDefault();
                let url = a.href;
                shell.openExternal(url);
                a.setAttribute('href', '#');
                return false;
            }))
        }
        console.log(a,a.getAttribute('external'))
        i++;
    }
}

aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
     aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
     aTags[i].href = "#";
}