如何将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浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
随机推荐
- Myeclipse6.0 在线安装svn插件
一.官网地址 1.SVN 官方网站:http://subversion.apache.org/ 二.安装步骤 1. 打开Myeclipse,在菜单栏中选择Help→Software Updates→F ...
- 前端mock数据之mockjax和mockjson
用处 在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中 ...
- 初识zookeeper（一）之zookeeper的安装及配置
1.简要介绍 zookeeper是一个分布式的应用程序协调服务,是Hadoop和Hbase的重要组件,是一个树型的目录服务,支持变更推送.除此还可以用作dubbo服务的注册中心. 2.安装 2.1 下 ...
- UVA 11355 Cool Points(几何)
Cool Points We have a circle of radius R and several line segments situated within the circumference ...
- [转]Ionic最佳实践-使用模态窗口modal
本文转自:http://m.blog.csdn.net/blog/betreex/45649689 原文地址:Ionic最佳实践-使用模态窗口modal 模态窗口的结构 在Ionic中,模态窗口通过$ ...
- Visualize real-time data streams with Gnuplot
源文地址 (September 2008) For the last couple of years, I've been working on European Space Agency (ESA) ...
- Uva10082 WERTYU -S.B.S.
A common typing error is to place the hands on the keyboard one row to the right of the correct posi ...
- 对于大学4年的反思(续)，记我的ThoughtWorks面试
之前我写了一篇对于大学四年的反思,时隔一个月,为什么我这么快就要来写这篇续章呢?主要有两个原因,第一是感谢静子姐姐,记得知乎上有个回答里面说过人生需要有贵人的帮助,遇到贵人是一件很幸运的事情.我想,静 ...
- Dev C++支持c++11标准的编译方法
一开始学C++的时候老师推荐的就是Dev C++这个IDE,用起来感觉还不错,使用起来比较简单,而且属于比较轻量级的,不怎么占用内存:缺点可能就是调试功能没有项VS那种大型IDE齐全和好用,不过对于一 ...
- 怎样获取优酷站内视频的MP4格式地址，嵌入到手机页面播放
最近的有关项目需要使用video标签播放视频,并且视频的路径src是优酷里面的视频,所以需要得到优酷里面的mp4路径才能播放. 但是在网上查了下资料,看到优酷的播放格式是一个m3u8文件,如图所示: ...