Create a browser instance within your app

This lesson will focus on creating a browser instance within your LiveCode app. A browser instance can be useful if you want to display web based content within your app (e.g. web pages). This is a desktop only lesson. If you are interested in creating a mobile browser please see the following lesson-

Create a new stack

Create a new stack

We start by creating a new stack. On this new stack we will have a graphic object called "browserPlaceholder" and a button called "create" The graphic will be used to easily define the location of our browser instance and the button will be used to create the browser

Add script to button

We now want to add script to the button which will create the browser along with setting its URL.

Edit the script of the button and add the following-


on mouseUp
   put revBrowserOpenCef(the windowId of this stack, "") into tBrowserID
   revBrowserSet tBrowserID, "rect", the rect of graphic "browserPlaceholder"
end mouseUp

The above script is creating a CEF browser instance. The windowId of the stack is  used to tell LiveCode/your app which window to place the browser object into. As the browser is created at a 0,0,0,0 rect, we set this to the rect of the graphic "browserPlaceholder" as this will show the instance within the area of this graphic.

Please note that:

- The CEF browser is available in versions 6.7+ of LiveCode

- On Mac, the CEF browser is not available on versions 8.0+ of LiveCode. You can use the browser widget instead, which is cross-platform.

Press "create" button

Press "create" button

When the create button is pressed, you should notice a browser instance create within your stack.

You will then be able to use the various revBrowser command & functions to manipulate this browser



Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.