如何访问<webview>电子

How can I access the DOM of a <webview> in Electron?

本文关键字：lt gt 电子 webview 何访问 访问      更新时间：2023-09-26

我刚刚开始使用Electron，之前有node webkit（nw.js）的经验。

在nw.js中，我能够创建iframe，然后访问所述iframe的DOM，以便获取标题、favicon和&c.几天前，当我拿起Electron将我的nw.js应用程序移植到它时，我看到了使用webview而不是iframe的建议，因为它们更好。现在，我上面提到的功能在nw.js中相对容易实现，但我不知道如何在Electron中实现（示例很少）。有人能帮忙吗？

此外，我的网络视图有后退/前进按钮（我打算有不止一个）。我在文档中看到，我可以在网络视图中调用函数，但我尝试过的都不起作用（而且，我还没有找到它们在野外使用的例子）。

我不知道是谁投票结束了我的问题，但我很高兴它没有通过。其他人在网上也有这个问题。我还解释了我想要实现的目标，但没有。

我最终使用了ipc-message。文档可以为外行使用更多的例子/解释，但嘿，我想明白了。我的代码在这里，但如果我的代码因任何原因消失，我也会在下面发布示例。

此代码位于aries.js中，此文件包含在主呈现器页面中，即index.html。

var ipc = require("ipc");
var webview = document.getElementsByClassName("tabs-pane active")[0];
webview.addEventListener("ipc-message", function (e) {
  if (e.channel === "window-data") {
    // console.log(e.args[0]);
    $(".tab.active .tab-favicon").attr("src", e.args[0].favicon);
    $(".tab.active .tab-title").html(e.args[0].title);
    $("#url-bar").val(e.args[0].url);
    $("#aries-titlebar h1").html("Aries | " + e.args[0].title);
  }
  // TODO
  // Make this better...cancel out setTimeout?
  var timer;
  if (e.channel === "mouseover-href") {
    // console.log(e.args[0]);
    $(".linker").html(e.args[0]).stop().addClass("active");
    clearTimeout(timer);
    timer = setTimeout(function () {
      $(".linker").stop().removeClass("active");
    }, 1500);
  }
});

下一段代码在browser.js中，这个文件被注入到我的<webview>中。

var ipc = require("ipc");
document.addEventListener("mouseover", function (e) {
  var hoveredEl = e.target;
  if (hoveredEl.tagName !== "A") {
    return;
  }
  ipc.sendToHost("mouseover-href", hoveredEl.href);
});
document.addEventListener("DOMContentLoaded", function () {
  var data = {
    "title": document.title,
    "url": window.location.href,
    // need to make my own version, can't rely on Google forever
    // maybe have this URL fetcher hosted on hikar.io?
    "favicon": "https://www.google.com/s2/favicons?domain=" + window.location.href
  };
  ipc.sendToHost("window-data", data);
});

我还没有找到将jQuery注入<webview>s的可靠方法，我可能不应该这样做，因为我要注入的页面可能已经有了它（如果你想知道为什么我的主代码是jQuery，但也有常规JavaScript）。

除了像NetOperatorWibby那样的客户到主机IPC调用之外，从主机到客户也非常有用。目前唯一的方法是使用<webview>。executeJavaScript（代码，userGesture）。这个api有点粗糙，但它确实有效。

如果您使用的是远程访客，比如"扩展"第三方网页，您还可以使用webview预加载属性，该属性在页面上运行任何其他脚本之前执行您的自定义脚本。只需注意，出于安全原因，预加载api将在自定义脚本完成时对在自定义JS文件的根命名空间中创建的任何函数进行核处理，但此托管过程不会对您在根中声明的任何对象进行核处理。因此，如果您希望您的自定义函数持久化，请将它们捆绑到一个singleton对象中，您的自定义API将在页面完全加载后持久化。

[更新]这里有一个我刚刚写完的简单例子：Electron Webview Host to Guest RPC Sample

这与之前的答案有关（我不允许发表评论）：Electron 1.x用户关于ipc模块的重要信息：

ipc模块分为两个独立的模块：

  • ipcMain用于主进程
  • ipcRenderer用于渲染器进程

因此，上面的例子需要纠正，而不是

// Outdated - doesn't work in 1.x    
var ipc = require("ipc");

用途：

// In main process.
var ipcMain = require('electron').ipcMain

和：

// In renderer process.
var ipcRenderer = require('electron').ipcRenderer

请参阅：http://electron.atom.io/blog/2015/11/17/electron-api-changes关于"拆分ipc模块"的部分

相关文章：