web-dev-qa-db-ja.com

Electronの<webview>のDOMにアクセスするにはどうすればよいですか？

私はElectronを使い始めたばかりで、node-webkit（nw.js）の経験があります。

Nw.jsでは、iframeを作成してから、そのiframeのDOMにアクセスして、タイトル、ファビコンなどを取得することができました。数日前にElectronを入手してnw.jsアプリを移植したとき、iframeの代わりにWebビューを使用することをお勧めしました。さて、上記の機能はnw.jsで比較的簡単に実行できましたが、Electronで実行する方法がわかりません（例はほとんどありません）。誰か助けてもらえますか？

また、Webビュー用の戻る/進むボタンがあります（複数のボタンを使用する予定です）。ドキュメントで、Webビューで関数を呼び出すことができることを確認しましたが、試したものは何も機能しませんでした（また、実際に使用されている例は見つかりませんでした）。

javascriptjquerywebviewelectron
8
NetOperator Wibby

ゲストからホストへのIPC呼び出し NetOperatorWibby ）に加えて、ホストからゲストへの移動も非常に便利です。現時点でこれを行う唯一の方法は、- <webview> .executeJavaScript（code、userGesture） 。このAPIは少し粗雑ですが、機能します。

サードパーティのWebページを「拡張」するなど、リモートゲストで作業している場合は、webview preload 属性を利用して、ページで他のスクリプトを実行する前にカスタムスクリプトを実行することもできます。プリロードAPIは、セキュリティ上の理由から、カスタムスクリプトの終了時に、カスタムJSファイルのルート名前空間に作成された関数を削除しますが、この管理プロセスでは、ルートで宣言したオブジェクトは削除されないことに注意してください。したがって、カスタム関数を永続化する場合は、それらをシングルトンオブジェクトにバンドルすると、ページが完全に読み込まれた後もカスタムAPIが永続化されます。

[更新]これは私が書き終えたばかりの簡単な例です： Electron-Webview-Host-to-Guest-RPC-Sample

6
Timothy C. Quinn

誰が私の質問を閉じることに投票したかはわかりませんが、それが通過しなかったことを嬉しく思います。他の人々もこの質問をオンラインの他の場所で持っています。達成したいことも説明しましたが、w/e。

ipc-messageを使用することになりました。 documentation は素人のためにもっと多くの例/説明を使うことができます、しかしねえ、私はそれを理解しました。私のコードは ここ と ここ ですが、何らかの理由でコードが消えた場合は、以下に例を投稿します。

このコードは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もあります）。

10
NetOperator Wibby

これは以前の回答に関連しています（コメントは許可されていません）：Electron1.xのユーザー向けのipcモジュールに関する重要な情報：

Ipcモジュールは2つの別々のモジュールに分割されました：

  • メインプロセスの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モジュールの分割」のセクション

0
Sascha