在電子應用中動態加載html文件

我是JS開發新手，基本上來自PHP背景。我想知道是否有像HTML代碼一樣包含html頁面的方法（加載視圖）。我試圖創建一個模板結構到我的電子應用程序的頁眉和頁腳文件加載在每個請求的HTML頁面上。在電子應用中動態加載html文件

我不能嘗試了jQuery load方法

$('#footer').load('header.html');

因爲我需要在每一個文件的HTML文件創建的頁腳加載jQuery的。我嘗試加載HTML文件

document.getElementById("head").innerHTML='<object type="text/html" data="header.html" ></object>';

JS的方式，但基本上創建一個對象，它是類似於一個IFRAME讓你的資源從來沒有被使用到您將加載使用link和script標籤的方式。

我已經從那裏主頁會被加載一個main.js文件：

function createWindow() { 
// Create the browser window. 
    mainWindow = new BrowserWindow({width: 1280, height: 742, resizable:false}) 

    // and load the index.html of the app. 
    mainWindow.loadURL(url.format({ 
    pathname: path.join(__dirname, 'app/views/index.html'), 
    protocol: 'file:', 
    slashes: true 
    })); 
}

我如何連接頭，並直接在這個方法頁腳？此外，如果有幫助，我使用快遞。

來源

2017-03-04 cyberrspiritt

您使用的是什麼模板引擎？你說你在使用Express。通常你使用模板引擎，除非你使用SPA（角度等）。 –

Angular會有我正在談論的模板方案嗎？ – cyberrspiritt

是的，您可以使用[ngInclude]（https://docs.angularjs.org/api/ng/directive/ngInclude）來引入頁眉和頁腳。我可以提供使用ejs和角度的例子，如果你想 –

請參閱此plunker對於角1.5示例，或檢查文檔。基本上你想要做這個角度設置<div ng-include="'yourtemplate.html'"></div>。

對於EJS模板，你會做這樣的事情<% include includes/header.ejs %>

我想包那些在引導navbar-header類和footer標籤最佳位置，或者您正在使用的任何自定義股利。

現在，在Electron中使用這些文件時，我會將這些文件合併到您的'main'browserWindow中，以便在應用程序運行時，您引用的index.html文件始終加載這些文件。

你可以做的另一件事是使用ng-if語句來改變基於某些參數的ng-includes。與EJS等任何服務器端模板一樣。

來源

2017-03-09 14:16:17

在電子應用中動態加載html文件

回答

相關問題