如何在电子产品中访问<webview>的DOM？

Question

我刚刚开始接触电子，有过使用node-webkit (nw.js)的经验。

在nw.js中，我可以创建iframe，然后访问said iframe的DOM，以便抓取标题、favicon等内容。几天前，当我选择Electron将我的nw.js应用移植到它时，我看到了使用webviews而不是iframe的建议，原因很简单，因为它们更好。现在，我上面提到的功能在nw.js中相对容易实现，但我不知道如何在Electron中实现它(示例很少，几乎没有)。有人能帮上忙吗？

此外，我的网页视图有后退/前进按钮(我打算有不止一个)。我在文档中看到，我可以在webview上调用函数来实现这一点，但我也没有尝试过这样做(而且，我还没有找到在野外使用它们的例子)。

Answer 1

除了作为NetOperatorWibby的来宾主机到主机IPC调用之外，从主机转到来宾也是非常有用的。目前做到这一点的唯一方法是使用.executeJavaScript(code, userGesture)。这个api有点粗糙，但它是有效的。

如果您正在使用远程来宾，如“扩展”第三方网页，您还可以利用webview preload 属性，该属性在页面上运行任何其他脚本之前执行您的自定义脚本。只需注意，出于安全原因，预加载api将在自定义脚本完成时阻止在自定义JS文件的根名称空间中创建的任何函数，但是此托管进程不会删除您在根目录中声明的任何对象。因此，如果您希望您的自定义函数持久化，请将它们捆绑到一个单独的对象中，并且在页面完全加载后，您的自定义API将持久化。

这里更新的是一个我刚刚写完的简单示例：Electron-Webview-Host-to-Guest-RPC-Sample

Answer 2

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

我最终使用了ipc-message。对于外行来说，documentation可以使用更多的例子/解释，但是，嘿，我已经弄明白了。我的代码是here和here，但如果我的代码由于某种原因消失了，我也会在下面发布示例。

此代码位于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>中，我可能也不应该这样做，因为我将要注入的页面可能已经有了它(如果您想知道为什么我的主代码是jQuery，但也有常规的JavaScript)。

Answer 3

这与之前的回答有关(我不允许发表评论)：对于Electron1.x的用户，关于ipc模块的重要信息：

ipc模块被分成两个独立的模块：

渲染器进程的主process

• ipcRenderer的
• ipcMain

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

// 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

请参阅“拆分ipc模块”的http://electron.atom.io/blog/2015/11/17/electron-api-changes部分。