Tutorial: Embedded Internet Browser management

Embedded Internet Browser management

Web browser consists of two special windows:

  • Web Face to build browser UI and control Wild Web window
  • Wild Web to load and render web content itself

Create Web Face window with browser UI implementation:

var webFaceId = stbWindowMgr.openWebFace(url1);

Correct its attributes if necessary:

stbWindowMgr.setWebFaceInitAttr(JSON.stringify({
    url: url2,
    x: 20,
    y: 20,
    width: 640,
    height: 480,
    visible: true,
    backgroundColor: '#000'
}));

Create Wild Web window and load given URL:

// created window will be invisible by default
// and its content is inaccessible outside this window
var wildWebId = stbWindowMgr.initWebWindow('http://google.com/');

Now it's possible to load any local or remote web page:

// without address `file:///home/pages/blank/index.html` is loaded
stbWindowMgr.LoadUrl(uri);

Resize Wild Web window using given coordinates:

// x, y, width and height of new window
stbWindowMgr.resizeWebWindow(20, 20, 500, 300);

Make Wild Web window active (move it above the Web Face):

stbWindowMgr.raiseWebWindow();

Make Web Face window active (move it above the Wild Web):

stbWindowMgr.raiseWebFaceWindow();

Control mouse cursor with keyboard or remote control navigation keys:

// turn virtual mouse on
stbWindowMgr.setVirtualMouseMode(true);

// turn virtual mouse off
stbWindowMgr.setVirtualMouseMode(false);

It's possible to reload current page or stop its loading:

stbWebWindow.ReloadDocument();
stbWebWindow.StopLoading();

Navigate through the browsing history:

// step back
stbWebWindow.NavigateBack();

// step forward
stbWebWindow.NavigateForward();

Set zoom ratio for embedded web browser:

// in percent
stbWebWindow.SetZoomFactor(50);

Control full screen mode:

// maximized mode
stbWebWindow.SetFullScreenMode(true);

// normal mode
stbWebWindow.SetFullScreenMode(false);

Get info of currently loaded web page:

stbWindowMgr.getCurrWebUrl();
stbWindowMgr.getCurrentTitle();

Check if Wild Web window exists:

if ( stbWindowMgr.IsWebWindowExist() ) {
    console.log('Wild Web window exists.');
}

Track page loading progress:

stbEvent.onWebBrowserProgress = function ( progress, status ) {
    console.log('onWebBrowserProgress progress:', progress);
    console.log('onWebBrowserProgress status:', status);

    if ( progress === 100 ) {
        console.log('Loading is completed.');
    }
};

Track clicking on a media link:

stbEvent.onMediaAvailable = function ( mimeType, uri ) {
    console.log('MIME type of media file: ' + mimeType);
    console.log('URI of media file: ' + uri);
};

Track a moment when Wild Web window is activated:

stbEvent.onWindowActivated = function () {
    console.log('Wild Web window is activated.');
};

Close browser windows:

stbWindowMgr.closeWindow(wildWebId);
stbWindowMgr.closeWindow(webFaceId);

Alternatively Web Face window can close itself:

stbWebWindow.close();