Shulou(Shulou.com)06/01 Report--

What this article shares to you is about how to embed Gate One into our Web application. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

In the Gate One source code downloaded from https://github.com/liftoff/GateOne, there are instructions in gateone/tests/hello_embedded on how to embed Gate One into our application.

1. Basic embedding mode

First, use a div to store our Gateone, as shown below

Then we copy the gateone.js from the Gate One source code into our web application and introduce it into our html. Or you can use gateone.js on a Gate One service directly, as follows

* call GateOne.init () to embed our GateOne into our Web application.

A simple sample code and effect are shown below

Basic Embedding GateOne _ window.onload = function () {/ / Initialize GateOne: GateOne.init ({url: 'https://127.0.0.1'});} Hello lienhua34

two。 Advanced embedding mode

Calling the GateOne.init () method can not only pass the URL of the GateOne service, we can pass other parameters to customize the embedded GateOne service content. For example, theme is used to set the theme of Gate One, and style is used to customize the style of Gate One. In the basic application code above, we modify the call parameters of the GateOne.init () method as follows

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':' 00 40px blueViolet'}})

Then visit our application and get the following results

We see that the embedded Gate One background color turns green, indicating that the style style we passed works. But wait a minute.

We found a big problem with the embedded Gate One without the button to open Terminal, so we couldn't use the web Terminal function of Gate One at all. This is the function of the embedded parameter! When the embedded parameter is set to true, it means that only Gate One is initialized into the page and Gate One is not allowed to do anything. So, we need to get Gate One to do something through the code, for example, we use a button to get Gate One to open a Terminal, as follows

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);}

At this point, we can create a new Terminal by clicking the "Add a terminal" button, as shown in the following figure

3 GateOne.init () callback automatically creates Terminal

The GateOne.init () method can provide a callback function that is automatically called after GateOne initialization is complete. Therefore, we can automatically create a Terminal in the callback function. The JavaScript code is as follows

CallbackInit.js

GateOne.Base.superSandbox () is used in the method newTerminal that creates a new Terminal. This method is used to wrap any code that waits until all its dependencies have been loaded before it executes. The actual code for the above code to create a new Terminal will not be executed until the GateOne.Terminal and GateOne.Terminal.Input are loaded.

The above is how to embed Gate One into our Web application, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.