如何將Gate One嵌入我們的Web應用中

2020-06-16 17:20:51

從這裡下載的Gate One原始碼中，在gateone/tests/hello_embedded中有關於如何將Gate One嵌入我們應用的指導說明。本篇隨筆就是根據該指導進行處理，然後寫的筆記。

如果還沒有安裝Gate One，可以先參考我之前的隨筆“LinuxMint系統下Gate One的安裝指南”進行安裝。

1. 基本嵌入方式

首先先使用一個div來存放我們的Gateone，如下所示，

<div id="gateone_container" style="position: relative; width: 60em; height: 30em;">
    <div id="gateone"></div>
</div>

然後我們將Gate One原始碼中的gateone.js拷貝到我們web應用中，然後在我們的html中引入進來。或者直接使用使用Gate One服務上的gateone.js，如下所示，

<script src="https://127.0.0.1/static/gateone.js"></script>

最後呼叫GateOne.init()將我們Gate One嵌入我們的Web應用。

一個簡單的範例程式碼和效果圖如下所示，

<!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>

2. 進階嵌入方式

呼叫GateOne.init()方法不只可以傳遞Gate One服務的URL，我們可以傳遞其他的引數來自定義嵌入的GateOne服務內容。例如，theme用於設定Gate One的主題，style用於自定義Gate One的樣式。我們在上面的基本應用程式碼中修改GateOne.init()方法的呼叫引數如下，

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

然後存取我們的應用得到如下效果，

我們看到嵌入的Gate One背景色變成了綠色，說明我們傳遞的style樣式生效了。但是，等等。。。

我們發現一個很大的問題，嵌入的Gate One沒有了之前開啟Terminal的按鈕，於是我們根本無法使用Gate One的網頁Terminal功能了。這個是embedded引數的作用！當將embedded引數設定成true，表示只將Gate One初始化到頁面中而不讓Gate One做任何事情。於是，我們需要通過程式碼顯示得讓Gate One做事情，例如我們通過一個按鈕來讓Gate One開啟一個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>

此時我們便可以通過點選”Add a terminal“按鈕來新建一個Terminal，效果如下圖所示，

3 GateOne.init()回撥自動建立Terminal

GateOne.init()方法可以提供一個回撥函數，該回撥函數會在Gate One初始化完成之後自動呼叫。於是，我們可以在該回撥函數中自動建立一個Terminal。其JavaScript程式碼如下，

var newTerminal = function() {
    // Introducing the superSandbox()!  Use it to wrap any code that you don't want to load until dependencies are met.
    // In this example we won't call newTerminal() until GateOne.Terminal and GateOne.Terminal.Input are loaded.
    GateOne.Base.superSandbox("NewExternalTerm", ["GateOne.Terminal", "GateOne.Terminal.Input"], function(window, undefined) {
        "use strict";
        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');
    // Don't actually submit the form
    if (!existingContainer) {
            gateone.appendChild(container);
    } else {
            container = existingContainer;
    }
    // Create the new terminal
    termNum = GateOne.Terminal.newTerminal(null, null, container); 
    });
};

// Uses newExternalTerminal as GateOne.init()'s callback.
// The callback will be called after Gate One is initialized.
window.onload = function() {
    // Initialize Gate One:
    GateOne.init({
        url: 'https://127.0.0.1',
        embedded: true,
    }, newTerminal);
};

在建立新Terminal的方法newTerminal中使用到了GateOne.Base.superSandbox()。該方法用於包裝任何程式碼，而該程式碼會一直等待到其所有依賴被載入完畢才會執行。上面程式碼建立新Terminal的實際程式碼會等待GateOne.Terminal和GateOne.Terminal.Input載入完畢才會執行。

(done)

本文永久更新連結地址：http://www.linuxidc.com/Linux/2017-02/141149.htm

如何將Gate One嵌入我們的Web應用中

2. 進階嵌入方式

3 GateOne.init()回撥自動建立Terminal

熱門文章