如何用我自己的电子资源挂钩目标URL？

Question

我正在玩 Electron，想做以下事情：

使用BrowserWindow.loadURL()打开url_1
在 BrowserWindow 呈现的 url_1 的 UI 部分，有一个 link 指向另一个资源，比方说 url_2.html
当我单击此 link 时，通常我的 BrowserWindow 会加载 url_2.html。但是，我不希望我的 BrowserWindow 实际上去从互联网加载 url_2.html，因为我实际上在我的应用程序资源中有另一个文件，比如 url_3.html。我想实现的是这样的：当BrowserWindow检测到url_2.html要加载时，会自动加载url_3.html.

我试图在 Electron 的源代码中进入 "loadURL"，但在 node_modules/electron/electron.d.ts 中只得到以下内容。没有更多的 JavaScript 实现。

/**
 * Same as webContents.loadURL(url[, options]). The url can be a remote address
 * (e.g. http://) or a path to a local HTML file using the file:// protocol. To
 * ensure that file URLs are properly formatted, it is recommended to use Node's
 * url.format method: You can load a URL using a POST request with URL-encoded data
 * by doing the following:
 */
loadURL(url: string, options?: LoadURLOptions): Promise<void>;

如何使用 Electron 实现我的需求？

Answer 1

那些 .d.ts 文件是所谓的 "definition files"，可以将它们想象成 C/C++ 程序的 .h（头）文件。因此，您看不到任何实现。

如果您有权访问 url_1.html，您可以实施的另一种方法是将事件侦听器附加到所有指向 url_2.html 的 link 并更改 link 定位到 url_3.html，像这样：

window.addEventListener ("load", () => {
    nodes = document.querySelectorAll ('a[href="url_2.html"]'); // (1)
    for (int i = 0; i < nodes.length; i++) {
        nodes[i].addEventListener ("click", (e) => {
            e.preventDefault ();
            window.location.href = "url_3.html";                // (2)
    }
});

这里有两点需要调整：(1) 是 exact URL of url_2.html 需要插入的地方，即与原样完全一样在 a 元素中指定，(2) 是您需要将完整的 URL 插入到您的（本地）url_3.html.

的位置

另一方面，如果您无权访问 url_1.html 文件，可能是因为它在服务器上使用并且无法修改，因为它也通过 "normal" 浏览器使用需要加载 url_2.html，你可以从 Electron 主线程操作导航过程，像这样：

webcontents = win.webContents;
webcontents.on ("will-navigate", (e, url) => {
    if (url === "url_2.html") {              // (1)
        e.preventDefault ();
        webcontents.loadURL ("url_3.html");  // (2)
    }
});

以上假定您的 BrowserWindow 对象被命名为 win。此外，您还需要在此处修改两件事：(1) 是您需要将完整、准确的 URL 放入 url_2.html 的位置，即 Chromium 将如何加载它，以及 (2)是你需要把完整的 URL 到 url_3.html.

的地方

如何用我自己的电子资源挂钩目标URL？

How to hook a target URL with my own resources in electron?

javascript

chromium

electron