Dynamically adding multiple events to multiple webviews


#1

Hi Everyone,

Im new to using Electron and also kinda new to using the webview tag, so I pre-apologize for maybe not knowing something really obvious.

Im trying to dynamiclly create web views and add the following events to them.

  • did-start-loading
  • did-stop-loading
  • did-finish-load
  • page-title-updated
  • dom-ready

Im using a mix of Jquery and pure javascript to do this but currently im not having much luck. I have attached my code below so you can try find anything obvious there. Im not getting any javascript errors in the debug menu but at the same time none of it seems to be working.

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