WebView
Overview
The WebView allows HTML content to be embedded in an application as a normal control. It uses WebKit on OSX and the latest version of IE installed when on Windows (forcing IE9 or above).
Constructors
Description
Creates a new webview control.
Definition
new WebView()Example
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
Members
Description
Gets or sets whether the page is loading. If set to true (when false) it reloads the current page, when set to false (when true) it stops loading the current page.
Definition
boolean webview.loadingDescription
Gets or sets the URL location of the HTML document rendered in the WebView.
Definition
string webview.locationExample
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
Description
Gets the progress of loading all resources (if the page is currently loading). Note this will return -1 when the progress is indeterminate (e.g., the page is not loading or the progress could not be determined). The number returned is between 0 and 1, e.g., 0.5 represents 50% loaded.
Definition
number webview.progressExample
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
setInterval(function() { console.log(webView.progress); }, 10);Description
Gets the title of the HTML document loaded in the webview. If nothing is loaded or is in the process of loading this will throw an error. LIsten to the 'title' event to know when the title of the HTML docuemnt is available.
Definition
string webview.titleExample
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
setTimeout(function() { console.log(webView.title); }, 4000);Description
Gets or sets the user agent string used.
Definition
string webview.useragentExample
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
setTimeout(function() { console.log(webView.useragent); }, 2000);Methods
Description
Moves to the previously rendered page. If no previously rendered page is available this takes no action.
Definition
webview.back()Description
This will execute the passed in javascript in the window context of the top frame of the currently loaded page. The result is passed back when the callback is ran.
Definition
webview.execute(javascript, callback)Parameters
| Name | Type | Description |
|---|---|---|
| javascript | string | Executes the javascript (passed in as a string) in the window context of the top frame of the page. |
| callback | function | The function which is called when the execution finishes. The result is passed as the first argument. |
Description
Moves to the history forward to the next rendered page. If no "next" rendered page is available this takes no action.
Definition
webview.forward()Example
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
setTimeout(function() { webView.location = "https://www.bing.com"; }, 1000);
setTimeout(function() { webView.location = "https://www.reddit.com"; }, 2000);
setTimeout(function() { webView.location = "https://www.slashdot.org"; }, 3000);
setTimeout(function() { webView.back(); }, 4000);
setTimeout(function() { webView.back(); }, 5000);
setTimeout(function() { console.log(webView.location); }, 6000);Description
Posts an HTML "Message" event to the top frame (and window) of the HTML page. The HTML page can listen to window message events to receive these messages. Strings are only allowed to be passed, complex objects may be serialized via JSON to transfer them back and forth. See the event 'message' to listen for messages sent from the HTML page back to Tint.
Definition
webview.postMessage(message)Parameters
| Name | Type | Description |
|---|---|---|
| message | string | The string or message to pass. |
Description
Reloads the current page.
Definition
webview.reload()Example
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
setTimeout(function() { webView.reload(); }, 1000);Description
Stops loading the current page, if nothing is currently loading this takes no action.
Definition
webview.stop()Example
require('Common');
var win = new Window();
win.visible = true;
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.top=webView.right=webView.bottom=0;
webView.location = "https://www.google.com";
setTimeout(function() { webView.stop(); }, 1000);Events
Description
Fires when an unrecoverable error occurs, such as being unable to retrieve the requested page for the top frame, or when a security error has occured. The callback function is passed the translated description of the error message that occured.
Definition
webview.addEventListener('error', function() { ... });Description
Fires when a new request for a HTML document at the top frame has loaded and the document object model is ready.
Definition
webview.addEventListener('load', function() { ... });Description
Fires when a new request for a HTML document at the top frame is committed, this means the new URL has passed security requirement checks, but has yet to begin making a network request or render any parts of the page.
Definition
webview.addEventListener('loading', function() { ... });Description
Fires when a change in location occurs (E.g., a new URL has been requested). This differs from a load (or loading) event in-that it does not fire if the current page is reloaded and the URL or location has not changed. The event handler is passed two arguments, the first is the old URL, and the second is the new URL.
Definition
webview.addEventListener('location-change', function() { ... });Description
Fires when the top frame HTML document has executed window.postMessageToHost(). The message is a string passed into the callback provided as the first argument.
Definition
webview.addEventListener('message', function() { ... });Description
When a new window is requested, this event is fired. The event handler is passed a new WebView that can be used for a new window (or alternatively) a new tab. It is the responsibility of the event handler to attach the web view to a window, tab (or other GUI item). If the event handler chooses not to open the web site in a new window, the webview can simply be discarded.
Definition
webview.addEventListener('new-window', function() { ... });Example
require('Common');
var win = new Window();
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.right=webView.top=webView.bottom=0;
win.visible = true;
webView.location = "https://www.google.com";
webView.addEventListener('new-window', function(newWebView) {
// Create a new window for the "new-window" event. Alternatively we could
// create a new tab or simply add another webview to the current window.
// the webview does not necessarily need to be onscreen. The webview can be
// held offscreen until the load event occurs to check its url and then dispose
// or attach it to a visible UI window/panel/etc.
var newWin = new Window();
newWin.appendChild(newWebView);
newWebView.left=newWebView.right=newWebView.top=newWebView.bottom=0;
newWin.visible = true;
// Note we could alternatively do nothing with the web view preventing any
// and all new web views from loading.
});Description
Fires the callback for the event to ask if the page about to be loaded should be blocked. The URL for the target resource or navigation is passed in to the event callback. If false (and only strictly false) is returned by the event handler the request is blocked. If any other value is returned (including undefined or null) the resource is allowed to load and continue. This event is useful if you want to screen URL's being loaded and deny navigation and resource requests based on the URL (e.g., such as a net nanny or for security reasons).
Definition
webview.addEventListener('policy', function() { ... });Example
require('Common');
var win = new Window();
var webView = new WebView();
win.appendChild(webView);
webView.left=webView.right=webView.top=webView.bottom=0;
win.visible = true;
webView.addEventListener('policy', function(url) {
if(url === "https://www.google.com") {
console.log('blocking requests to google!');
return false;
}
});
webView.location = "https://www.google.com";Description
Fires when a redirect from a server request occurs.
Definition
webview.addEventListener('redirect', function() { ... });Description
Fires when a new request for a HTML document at the top frame has occured, but before loaded or load has occured.
Definition
webview.addEventListener('request', function() { ... });Description
Fires when a page in the top frame is unloaded.
Definition
webview.addEventListener('unload', function() { ... });