如何将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浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
随机推荐
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- 一个初学者对于MVC架构的理解
我很早之前就开始接触.NET开发,一直都在2.0的框架下,所以对于MVC这种架构,听说过,但没有具体使用过,近期和外部朋友接触时,有了解到他们公司在使用MVC这种架构,所以自己就找来相关资料了解一下M ...
- linux—【绝对路径与相对路径】与【【文件基本操作】】(4)
[绝对路径与相对路径] 绝对路径:我们在获得一个文件的时候,从根目录到二级到更多级目录都写全了, 终才找到这个文件,这种方式就是“绝对路径” 相对路径:目标文件与我本身文件的相对位置 当前目录:./ ...
- MySQL在创建相同表结构时as和like 使用的区别
1.MySQL的复制相同表结构方法: 1)create table table_name as select * from table1 where 1=2 (或者limit 0): 2) crea ...
- [嵌入式开发板]iTOP-4412开发板linux 系统存储空间的修改
平台:iTOP-4412开发板 这里我们以修改成 1G 存储空间为例来讲解修改方法, 如果需要改 成其他大小的存储空间,参照此方法修改即可. 首先连接好 iTOP-4412 开发板的调试串口到 pc ...
- Excel scientific notation issue
This is a known issue, you can find more in internet. Excel will treat text(can display with num ...
- sublime Text 2 安装Sublime Package Control
Sublime Text 2 安装 Sublime Package Control,通过 Sublime Package Control,安装.升级和卸载 Package. 安装 Package Co ...
- Junit使用GroboUtils进行多线程测试
写过Junit单元测试的同学应该会有感觉,Junit本身是不支持普通的多线程测试的,这是因为Junit的底层实现上,是用System.exit退出用例执行的.JVM都终止了,在测试线程启动的其他线程自 ...
- Properties集合的练习
1.更改文件中的数据,特定键的值: 需求:我有一个文本文件(user.txt),我知道数据是键值对形式的,但是不知道内容是什么. 请写一个程序判断是否有"lisi"这样的键存在,如 ...
- mysqli常用错误处理函数
mysqli扩展库包含三个类库,分别是mysqli连接库,mysqli_result处理结果集库和预处理库: 当使用select语句返回的结果集就是mysqli_result类库的对象,所以就可以用这 ...