Question

我是使用Electron的新手，也是使用webview标签的新手，所以我为可能不知道非常明显的东西而道歉。

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

确实启动加载没有停止加载做精加工负荷页面标题，更新 DOM就绪我使用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());
}

Answer 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();

将多个事件动态添加到多个Web视图

1 个答案: