参考文档http://liftoff.github.io/GateOne/Developer/embedding.html

从https://github.com/liftoff/GateOne下载的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);

};

callbackInit.js

在创建新Terminal的方法newTerminal中使用到了GateOne.Base.superSandbox()。该方法用于包装任何代码，而该代码会一直等待到其所有依赖被加载完毕才会执行。上面代码创建新Terminal的实际代码会等待GateOne.Terminal和GateOne.Terminal.Input加载完毕才会执行。

(done)

如何将Gate One嵌入我们的Web应用中的更多相关文章

  1. 如何把Power BI嵌入到Web应用中

    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI ...

  2. 如何把Qlik Sense嵌入到Web应用中

    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这是一个给初学者(尤其对VS不熟悉的BI工程师)的入门操作向导. Qlik Sense是 ...

  3. [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法

    在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...

  4. Java嵌入式数据库H2学习总结(三)——在Web应用中嵌入H2数据库

    H2作为一个嵌入型的数据库,它最大的好处就是可以嵌入到我们的Web应用中,和我们的Web应用绑定在一起,成为我们Web应用的一部分.下面来演示一下如何将H2数据库嵌入到我们的Web应用中. 一.搭建测 ...

  5. VLC在web系统中应用（x-vlc-plugin 即如何把VLC嵌入HTML中）第一篇

    VLC毫无疑问是优秀的一款播放软件,子B/S机构的web项目中,如果能把它嵌入页面,做页面预览或者其他,是非常棒的. 第一步:下载VLC安装程序:(推荐1.0.3或者是1.0.5版本,比较稳定) ht ...

  6. 免费生成二维码接口，可直接嵌入到web项目中，附带嵌入方法，任意颜色二维码，任意大小二维码！

    在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...

  7. Java Web开发中MVC设计模式简介

    一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条 ...

  8. 【转载】App.config/Web.config 中特殊字符的处理

    写一个网站,遇到一个问题,发布以后,提示错误,但是即使打开错误提示(在web.config中打开),还是只提示错误,没提示什么地方错误,这让我知道了:是webconfig本身的错误,经过排除,是链接字 ...

  9. 第十一章：WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

随机推荐

  1. html的<head><title><meta>

    head <head>用来标记HTML的头部,里面通常需要包括标题,基础信息,源信息等,定义在HTML头部的内容往往不会在网页上直接显示 title <title>的内容设置在 ...

  2. 05_最长公共子序列问题(LCS)

    问题来源:刘汝佳<算法竞赛入门经典--训练指南> P60 问题7: 问题描述:给两个子序列A和B,求长度最大的公共子序列.比如1,5,2,6,8,和2,3,5,6,9,8,4的最长公共子序 ...

  3. mysql主从同步问题解决汇总

    出现问题原因:出现这个问题的原因是之前曾做过主从复制!问题:ERROR 1201 (HY000): Could not initialize master info structure; more e ...

  4. sql server 之函数小技巧 && 整数类型为空是用空字符串替代实现

    1.判空函数 说明:使用指定的替换值替换 NULL. 语法:ISNULL ( check_expression , replacement_value ) 参数: check_expression:将 ...

  5. PHP通过串口发短信

    随技术进步,短信收发领域按时间先后产生了三种模式:BLOCK MODE,基于AT指令的TEXT MODE,基于AT指令的PDU MODE.其中,TEXT MODE比较简单,多款诺基亚手机均支持此款模式 ...

  6. Oracle常用plsql

    String aggr http://www.oracle-base.com/articles/misc/string-aggregation-techniques.php     SELECT 'S ...

  7. SSH 无密码访问其它机器 和 Windows 上 putty 无密码访问 Linux 机器

    1. 从一台 Linux 机器(ubuntu1)上无密码访问其它机器(ubuntu2) (1)登录 ubuntu1 并切换到用户比如 s1 (2)运行 ssh-keygen -t rsa (3)运行c ...

  8. runv kill 流程分析

    1.runv/kill.go Action: func(context *cli.Context) 该函数做的工作很简单,就是通过grpc客户端,发送一个grpc请求而已,如下: c.Signal(n ...

  9. 【MVC 4】1.第一个 MVC 应用程序

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> ASP.NET MVC 是微软的一个 Web开发框架,它整合了“模型—视图—控制器(MVC)”架构 ...

  10. Centos7开启防火墙并且使MYSQL外网访问开放3306端口

    http://www.cnblogs.com/kreo/p/4368811.html CentOS7默认防火墙是firewalle,不是iptables #先检查是否安装了iptables servi ...