如何将Gate One嵌入我们的Web应用中

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

https://github.com/liftoff/GateOne下载的Gate One源代码中,在gateone/tests/hello_embedded中有关于如何将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)

时间: 2024-10-20 14:37:56

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

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

(此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI是微软的创新性(或者称之为敏捷型)BI产品,从发布之初就备受关注,因为它是一个只能以纯SaaS模式提供服务端的BI产品.目前Power BI其实是以两种方式提供服务端: Power BI Service.只能通过Office 365来购买订阅,一般作为一个独立的BI应用供企业内部使用. Power BI Em

无法从程序集“c:\Windows\Microsoft.NET\Framework\v4.0.30319\System.Web.dll”中嵌入互操作类型

错误 1 无法从程序集“c:\Windows\Microsoft.NET\Framework\v4.0.30319\System.Web.dll”中嵌入互操作类型,因为该程序集缺少“GuidAttribute”特性 c:\Windows\Microsoft.NET\Framework\v4.0.30319\System.Web.dll AutoInternetDownloadTool 打开引用->找到指定的XXX.dll->右击属性->嵌入互操作类型->false

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

H2作为一个嵌入型的数据库,它最大的好处就是可以嵌入到我们的Web应用中,和我们的Web应用绑定在一起,成为我们Web应用的一部分.下面来演示一下如何将H2数据库嵌入到我们的Web应用中. 一.搭建测试环境和项目 1.1.搭建JavaWeb测试项目 创建一个[H2DBTest]JavaWeb项目,找到H2数据库的jar文件,如下图所示: H2数据库就一个jar文件,这个Jar文件里面包含了使用JDBC方式连接H2数据库时使用的驱动类,将"h2-1.4.183.jar"加入到[H2DBT

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

在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中的JavaScript方法以及获取调用后的返回值. flex iframe下载地址:https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip bin有需要用到的flex库 swc flex代码: <?xml v

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

在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿去用吧! 体验的页面预览: 好了 废话不多说,接下来示范两种嵌入方式一种嵌入到网页的一种嵌入到c#的web程序中,可以直接下载为文件. 第一种,直接下载二维码图片,通过浏览器自带的下载器或者浏览器里面直接输入地址: 直接在下载栏或者地址栏里输入: http://www.zhaimaojun.top/

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

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

一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条理性,对于一个小型的网站这样的编写没有任何问题,但是一但我们需要编写大型的web工程的话,我们现有的编写模式会造成web应用的可扩展性较差,而且一但出现问题不能准确的定位出问题出在哪里. Java是一门应用设计模式比较广泛的语言.目前主流提出的23种设计模式均可在Java语言编写的程序中所应用.目前

.Net Web产品中增加自己的功能和代码?

背景: 最近有一个项目,一个朋友找了一个网上比较成熟的CMS系统(动易),让我给他增加一些功能,这个产品功能挺多,但是没有源代码.按照以前的做法,就是直接反编译他的dll,生成源代码,然后在源代码的基础上修改和完善自己的功能.但是研究了一下这个产品,bin下面的DLL非常多,有主要的,还有辅助的.如果每个dll都反编译,简直不现实. ? 用发编译工具?ILSpy打开里面几个主要的dll,发现还加壳混淆了,用De4Dot反混淆出来.里面的代码还是非常清晰,但是如果每个dll都这样搞,岂不累死. ?

web页面中可以包含多个对象

# encoding=utf-8 #python 2.7.10 #xiaodeng #web页面中可以包含多个对象 #HTTP权威指南 10页 #应用程序完成一项任务时通常会发布多个http事务.如:web浏览器会发布一系列http事务来获取一个包含了丰富的图片的web页面. #http事务怎么运作呢? 1.执行一个事务来获取描述页面布局的html框架 2.然后发布另外的http事务来获取嵌入的图片.图像.java小程序.这些资源可能在不同的服务器上. 因此: 一个web页面不是单个资源,通常是