Electron'da Web Görünümü İçindekiler'i Programlı Olarak Değiştirme

Question

Bu yüzden elektron uygulamasında bir kenar çubuğu (bazı bağlantılar içeren) içeren bir ana sayfam ve daha sonra sayfanın çoğunu kapsayan bir web sayfası var. Programlı olarak web görünümüne yüklemek istediğim ayrı .html dosyalarında bazı sayfalar var. iFrame'lerde ile hem iframe ismi özelliğini ayarlayarak kadar kolay sonra gibi bir şey olarak benim bağlantılı olmakla ("content_frame" demek):

<a id="page1_link" href="pages/page1.html" target="content_frame">page 1</a> 

Ve bu benim webview geçerli:

<webview nodeintegration="on" src="pages/landing_page.html" name="content_frame" height="100%" width="100%"></webview> 

ilk sayfa (landing_page.html) iyi görünüyor, ancak bir web görüntülemeyi aynı şekilde kullanmaya çalışırsam ancak bu katıştırılmış web görünümünde değil, açılır pencerede sayfayı açar. Şimdiye kadar bunun için iframe kullanıyorum ama elektrondan düğümler kullanmam gerekiyor.

Answer 1

Bu, bağlantı etiketinin hedef özelliğini kullanarak bunu yapmak için temiz bir yol gibi görünmüyor. Bazı JavaScript'le çapanın tıklama etkinliğini yakalayabilir ve sayfayı değiştirmek için web görünümünde loadURL kullanabilirsiniz. Orada Bunu yapmanın kesinlikle daha şık yolu vardır, ancak bu çalışır: http://electron.atom.io/docs/v0.37.4/api/web-view-tag/#webviewloadurlurl-options:

Yükler url

var webview = document.getElementsByName('content_frame')[0]; 
var bound = false; 
webview.addEventListener("dom-ready", function() { 
    if (bound) return; 
    bound = true;    
    var anchors = document.getElementsByTagName("a"); 
    for (var a = 0; a < anchors.length; a++) { 
     var anchor = anchors[a]; 
     if (anchor.getAttribute('target') == 'content_frame') { 
      anchor.addEventListener('click', function (e) { 
       e.preventDefault(); 
       webview.loadURL(e.srcElement.href);     
      }); 
     } 
    }         
}); 

Ancak, burada belgelere göre protokol sağlamak zorunda olacak webview, URL protokol önekini içermelidir, örn. http: // veya dosya: //. cevap için