1. 基本嵌入方式
首先先使用一個div來存放我們的gateone，如下所示，
然後我們将gate one源碼中的gateone.js拷貝到我們web應用中，然後在我們的html中引入進來。或者直接使用使用gate one服務上的gateone.js，如下所示，
最後調用gateone.init()将我們gate one嵌入我們的web應用。
一個簡單的示例代碼和效果圖如下所示，
2. 進階嵌入方式
調用gateone.init()方法不隻可以傳遞gate one服務的url，我們可以傳遞其他的參數來自定義嵌入的gateone服務内容。例如，theme用于設定gate one的主題，style用于自定義gate one的樣式。我們在上面的基本應用代碼中修改gateone.init()方法的調用參數如下，
然後通路我們的應用得到如下效果，
我們看到嵌入的gate one背景色變成了綠色，說明我們傳遞的style樣式生效了。但是，等等。。。
我們發現一個很大的問題，嵌入的gate one沒有了之前打開terminal的按鈕，于是我們根本無法使用gate one的網頁terminal功能了。這個是embedded參數的作用！當将embedded參數設定成true，表示隻将gate one初始化到頁面中而不讓gate one做任何事情。于是，我們需要通過代碼顯示得讓gate one做事情，例如我們通過一個按鈕來讓gate one打開一個terminal，代碼如下所示，
此時我們便可以通過點選”add a terminal“按鈕來建立一個terminal，效果如下圖所示，
3 gateone.init()回調自動建立terminal
gateone.init()方法可以提供一個回調函數，該回調函數會在gate one初始化完成之後自動調用。于是，我們可以在該回調函數中自動建立一個terminal。其javascript代碼如下，
callbackinit.js
在建立新terminal的方法newterminal中使用到了gateone.base.supersandbox()。該方法用于包裝任何代碼，而該代碼會一直等待到其所有依賴被加載完畢才會執行。上面代碼建立新terminal的實際代碼會等待gateone.terminal和gateone.terminal.input加載完畢才會執行。
本文作者：佚名
來源：51cto