如何将Gate One嵌入我们的Web应用中
参考文档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应用中的更多相关文章
- 如何把Power BI嵌入到Web应用中
(此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI ...
- 如何把Qlik Sense嵌入到Web应用中
(此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这是一个给初学者(尤其对VS不熟悉的BI工程师)的入门操作向导. Qlik Sense是 ...
- [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法
在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...
- Java嵌入式数据库H2学习总结(三)——在Web应用中嵌入H2数据库
H2作为一个嵌入型的数据库,它最大的好处就是可以嵌入到我们的Web应用中,和我们的Web应用绑定在一起,成为我们Web应用的一部分.下面来演示一下如何将H2数据库嵌入到我们的Web应用中. 一.搭建测 ...
- VLC在web系统中应用（x-vlc-plugin 即如何把VLC嵌入HTML中）第一篇
VLC毫无疑问是优秀的一款播放软件,子B/S机构的web项目中,如果能把它嵌入页面,做页面预览或者其他,是非常棒的. 第一步:下载VLC安装程序:(推荐1.0.3或者是1.0.5版本,比较稳定) ht ...
- 免费生成二维码接口，可直接嵌入到web项目中，附带嵌入方法，任意颜色二维码，任意大小二维码！
在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...
- Java Web开发中MVC设计模式简介
一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条 ...
- 【转载】App.config/Web.config 中特殊字符的处理
写一个网站,遇到一个问题,发布以后,提示错误,但是即使打开错误提示(在web.config中打开),还是只提示错误,没提示什么地方错误,这让我知道了:是webconfig本身的错误,经过排除,是链接字 ...
- 第十一章：WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
随机推荐
- cxf 消息寻址
一.消息寻址 WS-Addressing是将消息路由数据包含在SOAP头中的一种标准方法.利用WS-Addressing的消息可以在标准化的SOAP头中包含自己的包含发送元数据,而不是依赖于网络层传输 ...
- 关于mac环境下删除cocos2d－x环境变量配置的方法
yangchaodeMacBook-Air:downloads yangchao$ vim ~/.bash_profile
- [部署]CentOS安装apache
环境 虚拟机:VMWare10.0.1 build-1379776 操作系统:CentOS7 64位 步骤 1.使用yum安装 yum install httpd httpd-devel 2.启动 a ...
- lvs realserver 配置VIP
# $# 表示提供到shell脚本或者函数的参数总数: # 1表示只有一个参数. #/bin/bash #file: tun_RS.sh if [ $# -ne 1 ]; then echo “usa ...
- oracle 高水位线详解
一.什么是水线(High Water Mark)? 所有的oracle段(segments,在此,为了理解方便,建议把segment作为表的一个同义词) 都有一个在段内容纳数据的上限,我们把这个上限称 ...
- 深入JVM系列（三）之类加载、类加载器、双亲委派机制与常见问题
一．概述 定义:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型.类加载和连接的过程都是在运行期间完成的. 二. 类的 ...
- 渐进记号 Asymptotic Notations-------geeksforgeeks 翻译
我们已经简单的讨论了下渐进分析以及最坏,平均和最佳情况的分析.渐进分析的主要思想是分析算法的效率,不用依靠计算机的具体快慢,不需要实现这个算法,也不需要真正去计算时间.渐进记号是一种数学的工具来表示渐 ...
- 边工作边刷题：70天一遍leetcode: day 75
Group Shifted Strings 要点:开始就想到了string之间前后字符diff要相同. 思维混乱的地方:和某个string的diff之间是没有关系的.所以和单个string是否在那个点 ...
- UESTC 880 生日礼物 --单调队列优化DP
定义dp[i][j]表示第i天手中有j股股票时,获得的最多钱数. 转移方程有: 1.当天不买也不卖: dp[i][j]=dp[i-1][j]; 2.当天买了j-k股: dp[i][j]=max(dp[ ...
- Java虚拟机详解05----垃圾收集器及GC参数
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...