javascript - 如何在 Electron 中将目标 URL 与我自己的资源 Hook ？

Question

我正在使用 Electron，并且想要执行以下操作:

• 使用BrowserWindow.loadURL()打开url_1
• 在 BrowserWindow 呈现的 url_1 的 UI 部分中，有一个指向另一个资源的链接，比如说 url_2.html<
• 当我点击此链接时，通常我的 BrowserWindow 会加载 url_2.html。但是，我希望我的 BrowserWindow 实际上不要从互联网加载 url_2.html，因为我实际上还有另一个文件，例如 url_3.html code> 在我的应用程序的资源中。我想要实现的是:当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文件是所谓的“定义文件”，可以将它们想象为 .h C/C++ 程序的(头)文件。因此，您看不到任何实现。

如果您有权访问url_1.html，您可以实现另一种方法。 ，就是给所有指向 url_2.html 的链接附加一个事件监听器并将链接目标更改为 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) 是 url_2.html 的准确 URL。需要插入，即与 a 中指定的完全相同元素，(2) 是您需要将完整 URL 插入到您的(本地)url_3.html 的位置。 .

另一方面，如果您无权访问url_1.html文件，可能是因为它在服务器上使用并且无法修改，因为它也通过需要加载的“普通”浏览器使用 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 的位置。 .