将多个事件动态添加到多个 webview答案

【问题标题】：Dynamically adding multiple events to multiple webviews将多个事件动态添加到多个 webview
【发布时间】：2016-08-15 07:11:25
【问题描述】：

我是使用 Electron 的新手，对使用 webview 标签也有点陌生，所以我为可能不知道一些非常明显的事情预先道歉。

我正在尝试动态创建 Web 视图并向其中添加以下事件。

开始加载确实停止加载完成加载页面标题更新准备就绪我使用 Jquery 和纯 javascript 的混合来做到这一点，但目前我没有太多的运气。我在下面附上了我的代码，所以你可以尝试在那里找到任何明显的东西。我在调试菜单中没有收到任何 javascript 错误，但同时它似乎都没有工作。

function AddTab(URL){
tabcount++;
var NewTab = '<li href="#content-' + tabcount + '" id="tab' + tabcount + '" class="current"><img src="System_Assets/icons/Logo.png" /><span>Tab Home</span><a class="TabClose" href="#"></a></li>';
var NewContent = '<div id="content-' + tabcount + '" class="ContentHolder" style="display:block;"><webview id="webview-content-' + tabcount + '" src="http://www.ohhaibrowser.com"></webview></div>';
ChangeCurrent("");
//Hide current tabs
$(".ContentHolder").css("display", "none");
//Show new tab
$("#tabs-menu").append(NewTab);
$("#BrowserWin").append(NewContent);
$("#CurWebWin").val("webview-content-" + tabcount);
AddListeners("webview-content-" + tabcount,"tab" + tabcount);
UpdateTabCount();
}

function UpdateTabCount(){
$("#HideShow").text(tabcount);
}

function AddListeners(webview,tabid)
{
element = document.getElementById(webview);

element.addEventListener("did-start-loading", function() {
    loadstart(tabid);
});

element.addEventListener("did-stop-loading", function() {
    loadstop(tabid,webview);
});

element.addEventListener("did-finish-load", function() {
     loadstop(tabid,webview);
}); 

element.addEventListener("page-title-updated", function() {
     loadstop(tabid,webview);
});

element.addEventListener("dom-ready", function() {
     domloaded(tabid,webview);
});

}

function loadstart(tabid)
{
$("#" + tabid + " span").val('Loading...');
//$("#" + tabid + " img")
}

function loadstop(tabid, webview)
{
$("#" + tabid + " span").val('');
}

function domloaded(tabid, webview)
{
element = document.getElementById(webview);
$("#" + tabid + " span").val(element.getURL());
}

【问题讨论】：

标签： javascript jquery dynamic webview electron

【解决方案1】：

您必须设置 Preload 调用才能在 Webview 中进行更改

browser.html

 <script src="browser.js"></script>

<webview src="https://www.google.com/watch?v=1osdnKzj-1k" preload="./inject.js" style="width:640px; height:480px"></webview>

创建名为 inject.js

的示例 js 文件名

inject.js

__myInjection={
onloada : function() {
var script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-2.1.4.min.js";
$("#header").html('<h1>Sample work</h1>\
     <p>Hello, Google</p>\
     <a href="Anand">Click me</a>');

document.body.appendChild(script);

}

}

现在在 browser.js

onload = function() {
var webview = document.querySelector('webview');

webview.addEventListener("dom-ready", function(){
    webview.executeJavaScript('__myInjection.onloada ()')

    // webview.openDevTools();
});

doLayout();

【讨论】：