如何將Gate One嵌入我們的Web應(yīng)用中
參考文檔http://liftoff.github.io/GateOne/Developer/embedding.html
從https://github.com/liftoff/GateOne下載的Gate One源代碼中，在gateone/tests/hello_embedded中有關(guān)于如何將Gate One嵌入我們應(yīng)用的指導(dǎo)說明。本篇隨筆就是根據(jù)該指導(dǎo)進(jìn)行處理，然后寫的筆記。
首先先使用一個(gè)div來存放我們的Gateone，如下所示，
<div id="gateone_container" style="position: relative; width: 60em; height: 30em;">
<div id="gateone"></div>
</div>
然后我們將Gate One源碼中的gateone.js拷貝到我們web應(yīng)用中，然后在我們的html中引入進(jìn)來?；蛘咧苯邮褂檬褂肎ate One服務(wù)上的gateone.js，如下所示，
<script src="https://127.0.0.1/static/gateone.js"></script>
***調(diào)用GateOne.init()將我們Gate One嵌入我們的Web應(yīng)用。
一個(gè)簡(jiǎn)單的示例代碼和效果圖如下所示，
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Basic Embedding Gate One</title>
<script src="../static/gateone.js"></script>
<script>
window.onload = function() {
// Initialize Gate One:
GateOne.init({url: 'https://127.0.0.1'});
}
</script>
</head>
<body>
<div>Hello lienhua34</div>
<!-- Decide where you want to put Gate One -->
<div id="gateone_container" style="position: relative; width: 60em; height: 30em;">
<div id="gateone"></div>
</div>
</body>
</html>
調(diào)用GateOne.init()方法不只可以傳遞Gate One服務(wù)的URL，我們可以傳遞其他的參數(shù)來自定義嵌入的GateOne服務(wù)內(nèi)容。例如，theme用于設(shè)置Gate One的主題，style用于自定義Gate One的樣式。我們?cè)谏厦娴幕緫?yīng)用代碼中修改GateOne.init()方法的調(diào)用參數(shù)如下，
GateOne.init({
url: 'https://127.0.0.1',
embedded: true,
// Let's apply some custom styles while we're at it ...
style: { 'background-color': 'yellowgreen', 'box-shadow': '0 0 40px blueViolet'}
});
然后訪問我們的應(yīng)用得到如下效果，
我們看到嵌入的Gate One背景色變成了綠色，說明我們傳遞的style樣式生效了。但是，等等。。。
我們發(fā)現(xiàn)一個(gè)很大的問題，嵌入的Gate One沒有了之前打開Terminal的按鈕，于是我們根本無法使用Gate One的網(wǎng)頁(yè)Terminal功能了。這個(gè)是embedded參數(shù)的作用！當(dāng)將embedded參數(shù)設(shè)置成true，表示只將Gate One初始化到頁(yè)面中而不讓Gate One做任何事情。于是，我們需要通過代碼顯示得讓Gate One做事情，例如我們通過一個(gè)按鈕來讓Gate One打開一個(gè)Terminal，代碼如下所示，
<form id="add_terminal">
<input type="submit" value="Add a Terminal" style="margin-left: .Sem;"></input>
</form>
<script>
document.querySelector('#add_terminal').onsubmit = function(e) {
// Don't actually submit the form
e.preventDefault();
var existingContainer = GateOne.Utils.getNode('#'+GateOne.prefs.prefix+'container');
var container = GateOne.Utils.createElement('div', {
'id': 'container', 'class': 'terminal', 'style': {'height': '100%', 'width': '100%'}
});
var gateone = GateOne.Utils.getNode('#gateone');
if (!existingContainer) {
gateone.appendChild(container);
} else {
container = existingContainer;
}
// Create the new terminal
termNum = GateOne.Terminal.newTerminal(null, null, container);
}
</script>
此時(shí)我們便可以通過點(diǎn)擊”Add a terminal“按鈕來新建一個(gè)Terminal，效果如下圖所示，
GateOne.init()方法可以提供一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)會(huì)在Gate One初始化完成之后自動(dòng)調(diào)用。于是，我們可以在該回調(diào)函數(shù)中自動(dòng)創(chuàng)建一個(gè)Terminal。其JavaScript代碼如下，
在創(chuàng)建新Terminal的方法newTerminal中使用到了GateOne.Base.superSandbox()。該方法用于包裝任何代碼，而該代碼會(huì)一直等待到其所有依賴被加載完畢才會(huì)執(zhí)行。上面代碼創(chuàng)建新Terminal的實(shí)際代碼會(huì)等待GateOne.Terminal和GateOne.Terminal.Input加載完畢才會(huì)執(zhí)行。
