如何用我自己的电子资源来链接目标URL? [英] How to hook a target URL with my own resources in electron?

问题描述

我正在和Electron玩耍，想做以下事情:

I'm playing around with Electron and want to do the following:

• 使用 BrowserWindow.loadURL()打开 url_1
• 在 BrowserWindow 呈现的 url_1 的UI部分中，有一个链接指向另一个资源，例如 url_2.html
• 当我单击此链接时，通常我的 BrowserWindow 会加载 url_2.html .但是，我希望我的 BrowserWindow 实际不从互联网上加载 url_2.html ，因为我实际上还有另一个文件，例如 url_3.html 在我的应用程序资源中.我要实现的是:当 BrowserWindow 检测到要加载 url_2.html 时，它将自动加载 url_3.html .

• Use BrowserWindow.loadURL() to open url_1
• In the UI part of url_1 that BrowserWindow renders, there's a link which points to another resource, let's say url_2.html
• When I click this link, normally my BrowserWindow would load url_2.html. However, I want my BrowserWindow not to actually go to load url_2.html from the internet, since I actually have another file, say, url_3.html in my app's resources. What I want to achieve is this: When BrowserWindow detects that url_2.html is going to be loaded, it will automatically load url_3.html.

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

I tried to step into "loadURL" in source code of Electron, but only got the following in node_modules/electron/electron.d.ts. There's no more JavaScript implementation.

/**
 * 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满足我的要求?

How can I implement my requirements using Electron?

推荐答案

那些 .d.ts 文件就是所谓的定义文件"，就像 .h一样.C/C ++程序的code>(头)文件.因此，您看不到任何实现.

Those .d.ts files are so-called "definition files", think of them like .h (header) files for C/C++ programs. Thus, you don't see any implementation.

在有权访问 url_1.html 的情况下，您可以实施的另一种方法是将事件侦听器附加到指向 url_2.html 的所有链接，并更改将目标链接到 url_3.html ，如下所示:

Another approach which you could implement, given you have access to url_1.html, is to attach an event listener to all links pointing to url_2.html and change the link target to url_3.html, like so:

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 的 exact URL的地方，即与 a 元素，而(2)是您需要在(本地) url_3.html 中插入完整URL的地方.

Two things need adjustment here: (1) is where the exact URL of url_2.html needs to be inserted, namely exactly as it has been specified in the a elements, and (2) is where you need to insert the full URL to your (local) url_3.html.

另一方面，如果您无权访问 url_1.html 文件，可能是因为该文件在服务器上使用，而无法修改，因为它也通过正常"使用需要加载 url_2.html 的浏览器，您可以从Electron主线程操纵导航过程，如下所示:

On the other hand, if you don't have access to the url_1.html file, possibly because it is used on a server and cannot be modified because it is also used through "normal" browsers which need to load url_2.html, you can manipulate the navigation process from the Electron main thread, like so:

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 .

The above assumes that your BrowserWindow object is named win. Also, you need to modify two things here also: (1) is where you will need to put the full, exact URL to your url_2.html, namely exactly how Chromium would load it, and (2) is where you need to put your full URL to url_3.html.

这篇关于如何用我自己的电子资源来链接目标URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！