发布时间：2025-12-11 01:29:59 浏览次数：1
从https://github.com/liftoff/GateOne下载的GateOne源代码中,在gateone/tests/hello_embedded中有关于如何将GateOne嵌入我们应用的指导说明。
1.基本嵌入方式
首先先使用一个p来存放我们的Gateone,如下所示,
<pid="gateone_container"style="position:relative;width:60em;height:30em;"><pid="gateone"></p></p>
然后我们将GateOne源码中的gateone.js拷贝到我们web应用中,然后在我们的html中引入进来。或者直接使用使用GateOne服务上的gateone.js,如下所示,
<scriptsrc="https://127.0.0.1/static/gateone.js"></script>
***调用GateOne.init()将我们GateOne嵌入我们的Web应用。
一个简单的示例代码和效果图如下所示,
<!DOCTYPEhtml><htmllang="en"><head><metahttp-equiv="content-type"content="text/html;charset=UTF-8"/><title>BasicEmbeddingGateOne</title><scriptsrc="../static/gateone.js"></script><script>window.onload=function(){//InitializeGateOne:GateOne.init({url:'https://127.0.0.1'});}</script></head><body><p>Hellolienhua34</p><!--DecidewhereyouwanttoputGateOne--><pid="gateone_container"style="position:relative;width:60em;height:30em;"><pid="gateone"></p></p></body></html>2.进阶嵌入方式
调用GateOne.init()方法不只可以传递GateOne服务的URL,我们可以传递其他的参数来自定义嵌入的GateOne服务内容。例如,theme用于设置GateOne的主题,style用于自定义GateOne的样式。我们在上面的基本应用代码中修改GateOne.init()方法的调用参数如下,
GateOne.init({url:'https://127.0.0.1',embedded:true,//Let'sapplysomecustomstyleswhilewe'reatit...style:{'background-color':'yellowgreen','box-shadow':'0040pxblueViolet'}});然后访问我们的应用得到如下效果,
我们看到嵌入的GateOne背景色变成了绿色,说明我们传递的style样式生效了。但是,等等。。。
我们发现一个很大的问题,嵌入的GateOne没有了之前打开Terminal的按钮,于是我们根本无法使用GateOne的网页Terminal功能了。这个是embedded参数的作用!当将embedded参数设置成true,表示只将GateOne初始化到页面中而不让GateOne做任何事情。于是,我们需要通过代码显示得让GateOne做事情,例如我们通过一个按钮来让GateOne打开一个Terminal,代码如下所示,
<formid="add_terminal"><inputtype="submit"value="AddaTerminal"style="margin-left:.Sem;"></input></form><script>document.querySelector('#add_terminal').onsubmit=function(e){//Don'tactuallysubmittheforme.preventDefault();varexistingContainer=GateOne.Utils.getNode('#'+GateOne.prefs.prefix+'container');varcontainer=GateOne.Utils.createElement('p',{'id':'container','class':'terminal','style':{'height':'100%','width':'100%'}});vargateone=GateOne.Utils.getNode('#gateone');if(!existingContainer){gateone.appendChild(container);}else{container=existingContainer;}//CreatethenewterminaltermNum=GateOne.Terminal.newTerminal(null,null,container);}</script>此时我们便可以通过点击”Addaterminal“按钮来新建一个Terminal,效果如下图所示,
3GateOne.init()回调自动创建Terminal
GateOne.init()方法可以提供一个回调函数,该回调函数会在GateOne初始化完成之后自动调用。于是,我们可以在该回调函数中自动创建一个Terminal。其JavaScript代码如下,
callbackInit.js
在创建新Terminal的方法newTerminal中使用到了GateOne.Base.superSandbox()。该方法用于包装任何代码,而该代码会一直等待到其所有依赖被加载完毕才会执行。上面代码创建新Terminal的实际代码会等待GateOne.Terminal和GateOne.Terminal.Input加载完毕才会执行。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流