如何将GateOne嵌入我们的Web应用中-成都快上网建站

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

本篇文章给大家分享的是有关如何将Gate One嵌入我们的Web应用中,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

站在用户的角度思考问题,与客户深入沟通,找到融水网站设计与融水网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站建设、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖融水地区。

从https://github.com/liftoff/GateOne下载的Gate One源代码中,在gateone/tests/hello_embedded中有关于如何将Gate One嵌入我们应用的指导说明。

 1. 基本嵌入方式

首先先使用一个div来存放我们的Gateone,如下所示,


    

然后我们将Gate One源码中的gateone.js拷贝到我们web应用中,然后在我们的html中引入进来。或者直接使用使用Gate One服务上的gateone.js,如下所示,

***调用GateOne.init()将我们Gate One嵌入我们的Web应用。

一个简单的示例代码和效果图如下所示,



  
    
    Basic Embedding Gate One
    
    
  
  
Hello lienhua34
             
    
  

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

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嵌入我们的Web应用中

我们看到嵌入的Gate One背景色变成了绿色,说明我们传递的style样式生效了。但是,等等。。。

我们发现一个很大的问题,嵌入的Gate One没有了之前打开Terminal的按钮,于是我们根本无法使用Gate One的网页Terminal功能了。这个是embedded参数的作用!当将embedded参数设置成true,表示只将Gate One初始化到页面中而不让Gate One做任何事情。于是,我们需要通过代码显示得让Gate One做事情,例如我们通过一个按钮来让Gate One打开一个Terminal,代码如下所示,


     

此时我们便可以通过点击”Add a terminal“按钮来新建一个Terminal,效果如下图所示,

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

3 GateOne.init()回调自动创建Terminal

GateOne.init()方法可以提供一个回调函数,该回调函数会在Gate One初始化完成之后自动调用。于是,我们可以在该回调函数中自动创建一个Terminal。其JavaScript代码如下,

callbackInit.js

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

以上就是如何将Gate One嵌入我们的Web应用中,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


网页标题:如何将GateOne嵌入我们的Web应用中
网页链接:http://kswjz.com/article/ggchhj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯