Skip to content

Titanium.UI.WebView

The web view allows you to open an HTML5 based view which can load either local or remote content.

Use the Titanium.UI.createWebView method or <WebView> Alloy element to create a web view.

Web views are more expensive to create than other native views because of the requirement to load the HTML browser into memory.

The web view content can be any valid web content such as HTML, PDF, SVG or other WebKit supported content types.

JavaScript Context in WebViews--Local vs. Remote Content

JavaScript in the web view executes in its own context. The web view can interact with this content, but most of this functionality is limited to local content.

Local Scripts

When running local web content (that is, content that is included in the application's resources), scripts have access to the Titanium namespace. In particular, when running local web content:

Remote Scripts

Scripts downloaded from remote web servers cannot access the Titanium namespace.

To interact with remote content, wait until the content is loaded, then use the evalJS method to execute a JavaScript expression inside the web view and retrieve the value of an expression.

To trigger a message from the remote web page, refer to Titanium.UI.WebView.addScriptMessageHandler.

You can inject the local Ti.App.fireEvent bindings yourself by adding a script element using evalJS.

js
webview.evalJS(
  'javascript=(function addBinding(){' +
    'var s=document.createElement("script");' +
    's.setAttribute("type","text/javascript");' +
    's.innerHTML="' + /* insert content of binding.min.js */ + '";'
    +
    'document.getElementsByTagName("body")[0].appendChild(s);' +
  '})()'
);

The binding.min.js is available in the repository.

Local JavaScript Files

During the build process for creating a package, all JavaScript files, that is, any file with a '.js' extension, are removed and their content is encrypted and obfuscated into one resource, causing these files to not load properly in a WebView if they are loaded externally.

For JavaScript files referenced in static local HTML files, these JavaScript files are omitted from processing and left intact, which means they can be correctly loaded in the WebView.

For local JavaScript files not referenced in static local HTML files, for example, a dynamically-generated HTML file referencing a local JavaScript file, rename the file extension of the local JavaScript files to '.jslocal' instead of '.js'.

The build process for testing your application on the simulator, emulator or device does not affect the loading of local JavaScript files.

iOS Platform Implementation Notes

On the iOS platform, the native web view handles scrolling and other related touch events internally. If you add event listeners on the web view or its parent views for any of the standard touch events (touchstart, click, and so on), these events do not reach the native web view, and the user will not be able to scroll, zoom, click on links, and so on. To prevent this default behavior, set willHandleTouches to false.

In other words, you can have either Titanium-style events against the web view instance, or internal JavaScript events in the DOM, but not both.

Android Platform Implementation Notes

Android 4.4 and Later Support

Starting with Android 4.4 (API Level 19), the WebView component is based off of Chromium, introducing a number of changes to its rendering engine. Web content may look or behave differently depending on the Android version. The WebView does not have full feature parity with Chrome for Android.

By default, the Chromium WebView uses hardware acceleration, which may cause content to fail to render. If the WebView fails to render the content, the web view will clear itself, displaying only the default background color. The following log messages will be displayed in the console:

[WARN] :   AwContents: nativeOnDraw failed; clearing to background color.
[INFO] :   chromium: [INFO:async_pixel_transfer_manager_android.cc(56)]

To workaround this issue, you can enable software rendering by setting the WebView's borderRadius property to a value greater than zero.

If you are developing local HTML content and size your elements using percentages, the WebView may not calculate the sizes correctly when hardware acceleration is enabled, resulting in the same behavior previously mentioned.

To workaround this issue, you can use the previously mentioned workaround to enable software rendering, use absolute size values or use the onresize event to set the heights of the components. For example, if you have a div element with an id set to component that needs to use the entire web view, the following callback resizes the content to use the full height of the web view:

window.onresize= function(){
    document.getElementById("component").style.height = window.innerHeight + 'px';
};

For more information, see the following topics:

Plugin Support

The Android web view supports native plugins.

To use plugin content, you must set the pluginState property to either WEBVIEW_PLUGINS_ON or WEBVIEW_PLUGINS_ON_DEMAND.

You must also call pause when the current activity is paused, to prevent plugin content from continuing to run in the background. Call resume when the current activity is resumed. You can do this by adding listeners for the Activity.pause and Activity.resume events.

Accessing Cookies

On Android, the web view uses the system cookie store which does not share cookies with the Titanium.Network.HTTPClient cookie store. Developers can manage their cookies for both cookie stores using the methods Titanium.Network.addHTTPCookie, Titanium.Network.addSystemCookie, Titanium.Network.getHTTPCookies, Titanium.Network.getHTTPCookiesForDomain, Titanium.Network.getSystemCookies, Titanium.Network.removeHTTPCookie, Titanium.Network.removeHTTPCookiesForDomain, Titanium.Network.removeAllHTTPCookies, Titanium.Network.removeSystemCookie, Titanium.Network.removeAllSystemCookies.

WKWebView

With Titanium SDK 8.0.0, we now use WKWebView to implement Ti.UI.WebView (as Apple has deprecated UIWebView). WKWebView has few restriction specially with local file accessing. For supporting custom-fonts with WKWebView a little modification is required in the HTML files:

<style>
  @font-face
    {
      font-family: 'Lato-Regular';
      src: url('fonts/Lato-Regular.ttf');
    }
</style>

To have a WKWebView scale the page the same way as UIWebView, add the following meta tag to the HTML header:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
</html>

Ti.UI.SIZE and WebViews

With Titanium 8.0.0+, Titanium.UI.SIZE does not work for WebViews. We recommend to give a fixed height to Titanium.UI.WebView (as noted in TIDOC-3355).

As a workaround you can try to get the document.body.scrollHeight inside Titanium.UI.WebView.load event of webview and set the height to webview. See following example.

var win = Ti.UI.createWindow();

var verticalView = Ti.UI.createView({layout: 'vertical', width: "100%", height: "100%"});

verticalView.add(Ti.UI.createLabel({text: 'Label 1', top: 30, width: Ti.UI.SIZE, height: Ti.UI.SIZE}));

var htmla = "<div style='font-family: Helvetica Neue; font-size:16px'><ul><li>Item 1</li><li>Item 2</li></ul></div>";
var html = "<!DOCTYPE html>";

html += "<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'><style type='text/css'>html {-webkit-text-size-adjust: none;}</style><script type='text/javascript'>document.ontouchmove = function(event){event.preventDefault();}</script></head><body style='overflow: hidden'>";
html += htmla;
html += "</body></html>";

var webview = Ti.UI.createWebView({left: '14dp', right: '14dp', top: '7dp', height: Ti.UI.SIZE, html: html, backgroundColor: "yellow"});

verticalView.add(webview);

verticalView.add(Ti.UI.createLabel({text: 'Label 2', top: 30, width: Ti.UI.SIZE, height: Ti.UI.SIZE}));

win.add(verticalView);

win.open();

webview.addEventListener('load', function(e) {
  var result = webview.evalJSSync('document.body.scrollHeight');
  Ti.API.info('webview height: ' + result);
  webview.height = result;
});

For More Information

See Integrating Web Content in the Titanium Mobile Guides for more information on using web views, including use cases, more code examples, and best practices for web view content.

Extends: Titanium.UI.View · Since: 0.8

Properties #

accessibilityDisableLongPress#

extendedcreation only

Type: Boolean

Boolean value to remove the long press notification for the device's accessibility service.

Will disable the "double tap and hold for long press" message when selecting an item.

accessibilityHidden#

extended

Type: Boolean

Whether the view should be "hidden" from (i.e., ignored by) the accessibility service.

On iOS this is a direct analog of the accessibilityElementsHidden property defined in the
UIAccessibility Protocol.

On Android, setting accessibilityHidden calls the native
View.setImportantForAccessibility
method. The native method is only available in Android 4.1 (API level 16/Jelly Bean) and
later; if this property is specified on earlier versions of Android, it is ignored.

accessibilityHint#

extended

Type: String

Briefly describes what performing an action (such as a click) on the view will do.

On iOS this is a direct analog of the accessibilityHint property defined in the
UIAccessibility Protocol.
On Android, it is concatenated together with
Titanium.UI.View.accessibilityLabel and Titanium.UI.View.accessibilityValue in the order: accessibilityLabel,
accessibilityValue, accessibilityHint. The concatenated value is then passed as the
argument to the native View.setContentDescription method.

accessibilityLabel#

extended

Type: String

A succinct label identifying the view for the device's accessibility service.

On iOS this is a direct analog of the accessibilityLabel property defined in the
UIAccessibility Protocol.
On Android, it is concatenated together with
Titanium.UI.View.accessibilityValue and Titanium.UI.View.accessibilityHint in the order: accessibilityLabel,
accessibilityValue, accessibilityHint. The concatenated value is then passed as the
argument to the native View.setContentDescription method.
Defaults to Title or label of the control.

accessibilityValue#

extended

Type: String

A string describing the value (if any) of the view for the device's accessibility service.

On iOS this is a direct analog of the accessibilityValue property defined in the
UIAccessibility Protocol.
On Android, it is concatenated together with
Titanium.UI.View.accessibilityLabel and Titanium.UI.View.accessibilityHint in the order: accessibilityLabel,
accessibilityValue, accessibilityHint. The concatenated value is then passed as the
argument to the native View.setContentDescription method.
Defaults to State or value of the control.

allowedURLSchemes#

Type: Array<String>

List of allowed URL schemes for the web view.

See the example section "Usage of allowedURLSchemes and handleurl in iOS".

allowFileAccess#

Type: Boolean

A Boolean value indicating file access within WebView.

Set to true to enable access to local files for examples images stored in Titanium.Filesystem.applicationDataDirectory. If false resources are still accessible using file:///android_asset and file:///android_res. Do not enable this if your app accepts arbitrary URLs from external sources.

allowsBackForwardNavigationGestures#

Type: Boolean

A Boolean value indicating whether horizontal swipe gestures will trigger back-forward list navigation.

allowsLinkPreview#

Type: Boolean

A Boolean value that determines whether pressing on a link displays a preview of the
destination for the link.

This property is available on devices that support 3D Touch. Default value is false.

If you set this value to true for a web view, users (with devices that support 3D Touch)
can preview link destinations, and can preview detected data such as addresses, by pressing on links.
Such previews are known to users as peeks. If a user presses deeper, the preview navigates (or pops,
in user terminology) to the destination. Because pop navigation switches the user from your app to
Safari, it is opt-in, by way of this property, rather default behavior for this class.

anchorPoint#

extended

Type: Point

Coordinate of the view about which to pivot an animation.

Used on iOS only. For Android, use Titanium.UI.Animation.anchorPoint.

Anchor point is specified as a fraction of the view's size. For example, {0, 0} is at
the view's top-left corner, {0.5, 0.5} at its center and {1, 1} at its bottom-right
corner.

See the "Using an anchorPoint" example in Titanium.UI.Animation for a demonstration.
The default is center of this view.

animatedCenter#

extended

Type: Point

Current position of the view during an animation.

apiName#

extended

Type: String

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Button
returns Ti.UI.Button.

assetsDirectory#

Type: String

Path of file or directory to allow read access by the WebView.

Use this property to change the resources the web view has access to when loading the content of a local file.
By default the web view only has access to files inside the same directory as the loaded file. To reference
resources from other directories (e.g. a parent directory) change this property accordingly.

If assetsDirectory references a single file, only that file may be loaded. If assetsDirectory references a
directory, files inside that directory may be loaded.

This property needs to be set before url is assigned to a local file.

autoAdjustScrollViewInsets#

Type: Boolean

Specifies whether or not the web view should automatically adjust its scroll view insets.

When the value is true, it allows the web view to adjust its scroll view insets in response
to the screen areas consumed by the status bar, navigation bar, toolbar and tab bar (safe areas).

This is useful when displaying a web view that extends under navigation bars or into
safe area regions, ensuring content is not obscured.

The default behavior assumes that this is false.

backgroundColor#

extended

Type: String, Titanium.UI.Color

Background color of the view, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI. Defaults to Transparent.

backgroundDisabledColor#

extended

Type: String

Disabled background color of the view, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.
Defaults to the normal background color of this view.

backgroundDisabledImage#

extended

Type: String

Disabled background image for the view, specified as a local file path or URL.

If backgroundDisabledImage is undefined, and the normal background imagebackgroundImage
is set, the normal image is used when this view is disabled.

backgroundFocusedColor#

extended

Type: String

Focused background color of the view, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

For normal views, the focused color is only used if focusable is true.
Defaults to the normal background color of this view.

backgroundFocusedImage#

extended

Type: String

Focused background image for the view, specified as a local file path or URL.

For normal views, the focused background is only used if focusable is true.
If backgroundFocusedImage is undefined, and the normal background image backgroundImage
is set, the normal image is used when this view is focused.

backgroundGradient#

extended

Type: Gradient

A background gradient for the view.

A gradient can be defined as either linear or radial. A linear gradient varies continuously
along a line between the startPoint and endPoint.

A radial gradient is interpolated between two circles, defined by startPoint and
startRadius and endPoint and endRadius respectively.

The start points, end points and radius values can be defined in device units, in the view's
coordinates, or as percentages of the view's size. Thus, if a view is 60 x 60, the center
point of the view can be specified as:

{ x: 30, y: 30 }

Or:

{ x: '50%', y: '50%' }

When specifying multiple colors, you can specify an offset value for each color, defining
how far into the gradient it takes effect. For example, the following color array specifies
a gradient that goes from red to blue back to red:

colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ]

Android's linear gradients ignores backfillStart and backfillEnd, treating them as if
they are true. Android's radial gradients ignore the endPoint property.
Defaults to no gradient.

backgroundImage#

extended

Type: String

Background image for the view, specified as a local file path or URL.

Default behavior when backgroundImage is unspecified depends on the type of view and the platform.
For generic views, no image is used. For most controls (buttons, textfields, and so on), platform-specific default images are used.

backgroundLeftCap#

extended

Type: Number

Size of the left end cap.

See the section on backgroundLeftCap and backgroundTopCap behavior on iOS in Titanium.UI.View.

backgroundRepeat#

extended

Type: Boolean

Determines whether to tile a background across a view.

Setting this to true makes the set backgroundImage repeat across the view as a series
of tiles. The tiling begins in the upper-left corner, where the upper-left corner of the
background image is rendered. The image is then tiled to fill the available space of the
view.

Note that setting this to true may incur performance penalties for large views or
background images, as the tiling must be redone whenever a view is resized.

On iOS, the following views do not currently support tiled backgrounds:

backgroundSelectedColor#

extended

Type: String, Titanium.UI.Color

Selected background color of the view, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.
Defaults to transparent, so the background color of this view will be used.

backgroundSelectedImage#

extended

Type: String

Selected background image URL for the view, specified as a local file path or URL.

For normal views, the selected background is only used if focusable is true.

If backgroundSelectedImage is undefined, and the normal background image backgroundImage is set
the normal image is used when this view is selected.

backgroundTopCap#

extended

Type: Number

Size of the top end cap.

See the section on backgroundLeftCap and backgroundTopCap behavior on iOS in Titanium.UI.View.

blacklistedURLs (deprecated)#

creation only

Type: Array<String>

An array of URL strings to blacklist.

An array of URL strings to blacklist. This will stop the webview from going to URLs listed in
the blacklist. Note, this only applies in the links clicked inside the webview. The first website
that is loaded will not be stopped even if it matches the blacklist.

blockedURLs#

creation only

Type: Array<String>

An array of URL strings to be blocked.

An array of URL strings to be blocked from loading. This will stop the webview from going to URLs
listed in this array. Note that this only applies to the links tapped on by the end-user.
The first website that is loaded will not be stopped, even if it is listed in the blocklist.

borderColor#

extended

Type: String, Titanium.UI.Color

Border color of the view, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

Defaults to the normal background color of this view (Android), black (iOS).

borderRadius#

extended

Type: Number, String, Array<Number>, Array<String>

Radius for the rounded corners of the view's border.

Each corner is rounded using an arc of a circle.
Values for each corner can be specified. For example, '20px 20px' will set both left and right corners to 20px.
Specifying '20px 20px 20px 20px' will set top-left, top-right, bottom-right and bottom-left corners in that order.

If you have issues with dark artifacts on Android you can try to disable Hardware acceleration by setting a
backgroundColor with a small amount of transparency: backgroundColor:"rgba(255,255,255,254)".

borderWidth#

extended

Type: Number

Border width of the view.

If borderColor is set without borderWidth, this value
will be changed to 1 of the unit declared as 'ti.ui.defaultunit' in tiapp.xml descriptor.

bottom#

extended

Type: Number, String

View's bottom position, in platform-specific units.

This position is relative to the view's parent. Exact interpretation depends on the parent
view's layout property. Can be either a float value or a
dimension string (for example, '50%' or '10px').

This is an input property for specifying where the view should be positioned, and does not
represent the view's calculated position.

Defaults to undefined.

bubbleParent#

extended

Type: Boolean

Indicates if the proxy will bubble an event to its parent.

Some proxies (most commonly views) have a relationship to other proxies, often
established by the add() method. For example, for a button added to a window, a
click event on the button would bubble up to the window. Other common parents are
table sections to their rows, table views to their sections, and scrollable views
to their views. Set this property to false to disable the bubbling to the proxy's parent.

cacheMode#

Type: Number

Determines how a cache is used in this web view.

cachePolicy#

Type: Number

The cache policy for the request.

center#

extended

Type: Point

View's center position, in the parent view's coordinates.

This is an input property for specifying where the view should be positioned, and does not
represent the view's calculated position.

Defaults to undefined.

clipMode#

extended

Type: Number

View's clipping behavior.

Setting this to Titanium.UI.iOS.CLIP_MODE_ENABLED enforces all child views to be clipped to this views bounds.
Setting this to Titanium.UI.iOS.CLIP_MODE_DISABLED allows child views to be drawn outside the bounds of this view.
When set to Titanium.UI.iOS.CLIP_MODE_DEFAULT or when this property is not set, clipping behavior is inferred.
See section on iOS Clipping Behavior in Titanium.UI.View.

Defaults to undefined. Behaves as if set to Titanium.UI.iOS.CLIP_MODE_DEFAULT.

configuration#

Type: Titanium.UI.iOS.WebViewConfiguration

The configuration for the new web view.

This property can only be set when creating the webview and will be ignored when set afterwards.

data#

Type: Titanium.Blob, Titanium.Filesystem.File

Web content to load.

Android only supports loading data from a Blob, not a File.

See also: url and html.

disableBounce#

Type: Boolean

Determines whether the view will bounce when scrolling to the edge of the scrollable region.

Set to true to disable the bounce effect.

disableContextMenu#

Type: Boolean

Determines whether or not the webview should not be able to display the context menu.

Set to true to disable the context menu. Note that disabling the context menu will
also disable the text selection on iOS.

elevation#

extended

Type: Number

Base elevation of the view relative to its parent in pixels.

The elevation of a view determines the appearance of its shadow.
Higher elevations produce larger and softer shadows.

Note: The elevation property only works on Titanium.UI.View objects.
Many Android components have a default elevation that cannot be modified.
For more information, see
Google design guidelines: Elevation and shadows.

enableJavascriptInterface#

creation only

Type: Boolean

Enable adding JavaScript interfaces internally to webview prior to JELLY_BEAN_MR1 (Android 4.2)

This property is introduced to prevent a security issue with older devices (< JELLY_BEAN_MR1)

enableZoomControls#

Type: Boolean

If true, zoom controls are enabled.

filterTouchesWhenObscured#

extended

Type: Boolean

Discards touch related events if another app's system overlay covers the view.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

Setting this property to true causes touch related events (including "click") to not be fired
if a system overlay overlaps the view.

focusable#

extended

Type: Boolean

Whether view should be focusable while navigating with the trackball.

handlePlatformUrl (deprecated)#

Type: Boolean

Lets the webview handle platform supported urls

By default any urls that are not handled by the Titanium platform but can be handled by the
shared application are automatically sent to the shared application and the webview does not
open these. When this property is set to true the webview will attempt to handle these
urls and they will not be sent to the shared application. An example is links to telephone
numbers.

height#

extended

Type: Number, String

View height, in platform-specific units.

Defaults to: If undefined, defaults to either Titanium.UI.FILL or Titanium.UI.SIZE
depending on the view. See "View Types and Default Layout Behavior" in
Transitioning to the New UI Layout System.

Can be either a float value or a dimension string (for example, '50%' or '40dp').
Can also be one of the following special values:

  • Titanium.UI.SIZE. The view should size itself to fit its contents.
  • Titanium.UI.FILL. The view should size itself to fill its parent.
  • 'auto'. Represents the default sizing behavior for a given type of
    view. The use of 'auto' is deprecated, and should be replaced with the SIZE or
    FILL constants if it is necessary to set the view's behavior explicitly.

This is an input property for specifying the view's height dimension. To determine the
view's size once rendered, use the rect or
size properties.

hiddenBehavior#

extended

Type: Number

Sets the behavior when hiding an object to release or keep the free space

If setting hiddenBehavior to Titanium.UI.HIDDEN_BEHAVIOR_GONE it will automatically release the space the view occupied.
For example: in a vertical layout the views below the object will move up when you hide
an object with hiddenBehavior:Titanium.UI.HIDDEN_BEHAVIOR_GONE.

Defaults to Titanium.UI.HIDDEN_BEHAVIOR_INVISIBLE.

hideKeyboardAccessoryView#

Type: Boolean

A Boolean value indicating whether to hide the keyboard accessory bar.

When this property is set to true, the keyboard accessory bar (the bar with "Previous",
"Next" and "Done" buttons that appears above the keyboard when focusing input fields in
web content) is hidden. This can be useful when you want to provide your own custom
input accessory or simply want a cleaner keyboard appearance.

Set to false (the default) to show the standard keyboard accessory bar.

hideLoadIndicator#

Type: Boolean

Hides activity indicator when loading remote URL.

horizontalMotionEffect#

extended

Type: MinMaxOptions

Adds a horizontal parallax effect to the view

Note that the parallax effect only happens by tilting the device so results can not be seen on Simulator.
To clear all motion effects, use the Titanium.UI.clearMotionEffects method.

horizontalWrap#

extended

Type: Boolean

Determines whether the layout has wrapping behavior.

For more information, see the discussion of horizontal layout mode in the description of
the layout property.

html#

Type: String

HTML content of this web view.

See setHtml for additional parameters that can be
specified when setting HTML content.

The web view's content can also be set using the data or
url properties.

If you want to get the HTML content of a remote URL you can grab it with this evalJS call:

webview.addEventListener('load', function() {
  webview.evalJS('document.documentElement.outerHTML.toString()', function(data) {
    console.log(data);
  });
});

See also: data and url.

id#

extended

Type: String

View's identifier.

The id property of the Ti.UI.View represents the view's identifier. The identifier string does
not have to be unique. You can use this property with Titanium.UI.View.getViewById method.

ignoreSslError#

Type: Boolean

Controls whether to ignore invalid SSL certificates or not.

If set to true, the web page loads despite having an invalid SSL certificate.
If set to false, a web page with an invalid SSL certificate does not load.

iOS Note: As soon as you set this property to true, iOS will cache the response
for the lifetime of the current web view.

keepHardwareMode#

extended

Type: Boolean

A value indicating the render mode of the View

Set to true to keep hardware mode when using a border and transparent backgrounds.

keepScreenOn#

extended

Type: Boolean

Determines whether to keep the device screen on.

When true the screen will not power down. Note: enabling this feature will use more
power, thereby adversely affecting run time when on battery.
For iOS look at Titanium.App.idleTimerDisabled.

keyboardDisplayRequiresUserAction#

Type: Boolean

A Boolean value indicating whether web content can programmatically display the keyboard.

When this property is set to true, the user must explicitly tap the elements in the web view
to display the keyboard (or other relevant input view) for that element. When set to false,
a focus event on an element causes the input view to be displayed and associated with
that element automatically.

LAYER_TYPE_HARDWARE#

Type: Number

Hardware rendering mode

LAYER_TYPE_NONE#

Type: Number

Default rendering mode

LAYER_TYPE_SOFTWARE#

Type: Number

Software rendering mode

layerType#

Type: Number

A value indicating the render mode of the WebView

Set to Ti.UI.WebView.LAYER_TYPE_SOFTWARE (software rendering) if you use Ti.Media.takeScreenshot() or toImage() and the WebView contains local HTML files.
Otherwise the WebView might be empty in the screenshot/image. If you change the setting you will have to assign the HTML content again.

layout#

extended

Type: String

Specifies how the view positions its children.
One of: 'composite', 'vertical', or 'horizontal'.

There are three layout options:

  • composite (or absolute). Default layout. A child view is positioned based on its
    positioning properties or "pins" (top, bottom, left, right and center).
    If no positioning properties are specified, the child is centered.

    The child is always sized based on its width and height properties, if these are
    specified. If the child's height or width is not specified explicitly, it may be
    calculated implicitly from the positioning properties. For example, if both left and
    center.x are specified, they can be used to calculate the width of the child control.

    Because the size and position properties can conflict, there is a specific precedence
    order for the layout properties. For vertical positioning, the precedence
    order is: height, top, center.y, bottom.

    The following table summarizes the various combinations of properties that can
    be used for vertical positioning, in order from highest precedence to lowest.
    (For example, if height, center.y and bottom are all specified, the
    height and center.y values take precedence.)

    <table class="doc-table">
    <thead>
    <tr>
    <th>Scenario</th>
    <th>Behavior</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><code>height</code> & <code>top</code> specified</td>
    <td>
    Child positioned <code>top</code> unit from parent's top, using specified <code>height</code>;
    any <code>center.y</code> and <code>bottom</code> values are ignored.
    </td>
    </tr>
    <tr>
    <td><code>height</code> & <code>center.y</code> specified</td>
    <td>
    Child positioned with center at <code>center.y</code>, using specified <code>height</code>;
    any <code>bottom</code> value is ignored.
    </td>
    </tr>
    <tr>
    <td><code>height</code> & <code>bottom</code> specified</td>
    <td>Child positioned <code>bottom</code> units from parent's bottom, using specified <code>height</code>.</td>
    </tr>
    <tr>
    <td><code>top</code> & <code>center.y</code> specified</td>
    <td>
    Child positioned with top edge <code>top</code> units from parent's top and center at
    <code>center.y</code>. Height is determined implicitly; any <code>bottom</code> value is ignored.
    </td>
    </tr>
    <tr>
    <td><code>top</code> & <code>bottom</code> specified</td>
    <td>
    Child positioned with top edge <code>top</code> units from parent's top and bottom edge
    <code>bottom</code> units from parent's bottom. Height is determined implicitly.
    </td>
    </tr>
    <tr>
    <td>Only <code>top</code> specified</td>
    <td>
    Child positioned <code>top</code> units from parent's top, and uses the default height
    calculation for the view type.
    </td>
    </tr>
    <tr>
    <td><code>center.y</code> and <code>bottom</code> specified</td>
    <td>
    Child positioned with center at <code>center.y</code> and bottom edge <code>bottom</code>
    units from parent's bottom. Height is determined implicitly.
    </td>
    </tr>
    <tr>
    <td>Only <code>center.y</code> specified</td>
    <td>Child positioned with center at <code>center.y</code>, and uses the default height calculation for the view type.</td>
    </tr>
    <tr>
    <td>Only <code>bottom</code> specified</td>
    <td>Child positioned with bottom edge <code>bottom</code> units from parent's bottom, and uses the default height calculation for the view type.</td>
    </tr>
    <tr>
    <td><code>height</code>, <code>top</code>, <code>center.y</code>, and <code>bottom</code> unspecified</td>
    <td>Child entered vertically in the parent and uses the default height calculation for the child view type.</td>
    </tr>
    </tbody>
    </table>

    Horizontal positioning works like vertical positioning, except that the
    precedence is width, left, center.x, right.

    For complete details on composite layout rules, see
    Transitioning to the New UI Layout System
    in the Titanium Mobile Guides.

  • vertical. Children are laid out vertically from top to bottom. The first child
    is laid out top units from its parent's bounding box. Each subsequent child is
    laid out below the previous child. The space between children is equal to the
    upper child's bottom value plus the lower child's top value.

    Each child is positioned horizontally as in the composite layout mode.

  • horizontal. Horizontal layouts have different behavior depending on whether wrapping
    is enabled. Wrapping is enabled by default (the horizontalWrap property is true).

    With wrapping behavior, the children are laid out horizontally from left to right,
    in rows. If a child requires more horizontal space than exists in the current row,
    it is wrapped to a new row. The height of each row is equal to the maximum height of
    the children in that row.

    Wrapping behavior is available on iOS and Android. When the horizontalWrap property is
    set to true, the first row is placed at the top of the parent view, and successive rows
    are placed below the first row. Each child is positioned vertically within its row somewhat
    like composite layout mode. In particular:

    • If neither top or bottom is specified, the child is centered in the
      row.
    • If either top or bottom is specified, the child is aligned to either
      the top or bottom of the row, with the specified amount of padding.
    • If both top and bottom is specified for a given child, the properties
      are both treated as padding.

    If the horizontalWrap property is false, the behavior is more equivalent to a vertical layout.
    Children are laid or horizontally from left to right in a single row. The left and
    right properties are used as padding between the children, and the top and bottom
    properties are used to position the children vertically.

    Defaults to Composite layout.

left#

extended

Type: Number, String

View's left position, in platform-specific units.

This position is relative to the view's parent. Exact interpretation depends on the
parent view's layout property. Can be either a float value or
a dimension string (for example, '50%' or '10px').

This is an input property for specifying where the view should be positioned, and does not
represent the view's calculated position.

Defaults to undefined.

lifecycleContainer#

extended

Type: Titanium.UI.Window, Titanium.UI.TabGroup

The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.

If this property is set to a Window or TabGroup, then the corresponding Activity lifecycle event callbacks
will also be called on the proxy. Proxies that require the activity lifecycle will need this property set
to the appropriate containing Window or TabGroup.

lightTouchEnabled#

Type: Boolean

Enables using light touches to make a selection and activate mouseovers.

Setting this property solves the problem of web links with specific length not triggering a link click in Android.

This is only an Android specific property and has no effect starting from API level 18.

This flag is true by default to retain backwards compatibility with previous
behavior.

loading#

Type: Boolean

Indicates if the webview is loading content.

mixedContentMode#

creation only

Type: Boolean

If true, allows the loading of insecure resources from a secure origin.

On iOS this functionality can be set in the <plist> section of the tiapp.xml
using the NSAllowsArbitraryLoads key as part of the App Transport Security.
The plist key is enabled by default, allowing arbitrary loads to be processed.

multipleWindows#

creation only

Type: Boolean

If set to false it will prevent the WebView from opening new windows/tabs.

onCreateWindow#

Type: Callback<Object>

Callback function called when there is a request for the application to create a new window
to host new content.

For example, the request is triggered if a web page wants to open a URL in a new
window. By default, Titanium will open a new full-size window to host the new content.
Use the callback to override the default behavior.

The callback needs to create a new WebView object to host the content in and add the WebView to the
application UI. The callback must return either a WebView object to host the content in or null if
it does not wish to handle the request.

The callback is passed a dictionary with two boolean properties:

  • isDialog: set to true if the content should be opened in a dialog window rather than a
    full-size window.
  • isUserGesture: set to true if the user initiated the request with a gesture, such as
    tapping a link.

The following example opens new web content in a new tab rather than a new window:

var tabGroup = Ti.UI.createTabGroup(),
    win = Ti.UI.createWindow(),
    tab = Ti.UI.createTab({window: win, title: 'Start Page'}),
    webview = Ti.UI.createWebView({ url:'index.html'});

webview.onCreateWindow = function(e) {
    var newWin = Ti.UI.createWindow(),
        newWebView = Ti.UI.createWebView(),
        newTab = Ti.UI.createTab({window: newWin, title: 'New Page'});
    newWin.add(newWebView);
    tabGroup.addTab(newTab);
    return newWebView;
};

win.add(webview);
tabGroup.addTab(tab);
tabGroup.open();

Type: Callback<OnLinkURLResponse>

Fired before navigating to a link.

The callback will be called before navigating to the link. The Boolean return value of the
callback will determine if the link will be navigated or discarded.

opacity#

extended

Type: Number

Opacity of this view, from 0.0 (transparent) to 1.0 (opaque). Defaults to 1.0 (opaque).

overrideCurrentAnimation#

extendedcreation only

Type: Boolean

When on, animate call overrides current animation if applicable.

If this property is set to false, the animate call is ignored if the view is currently being animated.

Defaults to undefined but behaves as false

overScrollMode#

Type: Number

Determines the behavior when the user overscrolls the view.

PDF_PAGE_DIN_A1#

Type: Number

PDF paper size

PDF_PAGE_DIN_A2#

Type: Number

PDF paper size

PDF_PAGE_DIN_A3#

Type: Number

PDF paper size

PDF_PAGE_DIN_A4#

Type: Number

PDF paper size

PDF_PAGE_DIN_A5#

Type: Number

PDF paper size

pluginState#

Type: Number

Determines how to treat content that requires plugins in this web view.

This setting affects the loading of content that requires web plugins.

To enable hardware acceleration, add the tool-api-level and
manifest elements shown below inside the android element in your tiapp.xml file.

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <tool-api-level>11</tool-api-level>
    <manifest>
        <application android:hardwareAccelerated="true"/>
    </manifest>
</android>

See Android documentation for
WebSettings.PluginState.

This property only works on Android devices at API Level 8 or greater.

previewContext#

extended

Type: Titanium.UI.iOS.PreviewContext

The preview context used in the 3D-Touch feature "Peek and Pop".

Preview context to present the "Peek and Pop" of a view. Use an configured instance
of Titanium.UI.iOS.PreviewContext here.

Note: This property can only be used on devices running iOS 9 or later and supporting 3D-Touch.
It is ignored on older devices and can manually be checked using Titanium.UI.iOS.forceTouchSupported.

progress#

Type: Number

An estimate of what fraction of the current navigation has been loaded.

This value ranges from 0.0 to 1.0 based on the total number of bytes expected
to be received, including the main document and all of its potential subresources.
After loading completes, the progress remains at 1.0 until a new download starts,
at which point progress is reset to 0.0.

pullBackgroundColor#

extended

Type: String, Titanium.UI.Color

Background color of the wrapper view when this view is used as either Titanium.UI.ListView.pullView or Titanium.UI.TableView.headerPullView.

Defaults to undefined. Results in a light grey background color on the wrapper view.

rect#

extended

Type: DimensionWithAbsolutes

The bounding box of the view relative to its parent, in system units.

The view's bounding box is defined by its size and position.

The view's size is rect.width x rect.height. The view's top-left position relative to
its parent is (rect.x , rect.y).

On Android it will also return rect.absoluteX and 'rect.absoluteY' which are relative to
the main window.

The correct values will only be available when layout is complete.
To determine when layout is complete, add a listener for the
postlayout event.

requestHeaders#

Type: Dictionary

Sets extra request headers for this web view to use on subsequent URL requests.

Setting this property allows you to set custom headers to the URL requests.
The parameter will be key-value pairs: {"Custom-field1":"value1", "Custom-field2":"value2"}

On Android you should avoid Calling setRequestHeaders() right after createWebView(). Use the requestHeaders property
inside createWebView() or put it inside the window open event.

extended

Type: Number, String

View's right position, in platform-specific units.

This position is relative to the view's parent. Exact interpretation depends on the
parent view's layout property. Can be either a float value or
a dimension string (for example, '50%' or '10px').

This is an input property for specifying where the view should be positioned, and does not
represent the view's calculated position.

Defaults to undefined.

rotation#

extended

Type: Number

Clockwise 2D rotation of the view in degrees.

Translation values are applied to the static post layout value.

rotationX#

extended

Type: Number

Clockwise rotation of the view in degrees (x-axis).

Translation values are applied to the static post layout value.

rotationY#

extended

Type: Number

Clockwise rotation of the view in degrees (y-axis).

Translation values are applied to the static post layout value.

scalesPageToFit#

Type: Boolean

If true, scale contents to fit the web view.

On iOS, setting this to true sets the initial zoom level to show the entire
page, and enables the user to zoom the web view in and out. Setting this to
false prevents the user from zooming the web view.

On Android, only controls the initial zoom level.

scaleX#

extended

Type: Number

Scaling of the view in x-axis in pixels.

Translation values are applied to the static post layout value.

scaleY#

extended

Type: Number

Scaling of the view in y-axis in pixels.

Translation values are applied to the static post layout value.

scrollbars#

Type: Number

Enable or disable horizontal/vertical scrollbars in a WebView.

scrollsToTop#

Type: Boolean

Controls whether the scroll-to-top gesture is effective.

The scroll-to-top gesture is a tap on the status bar; The default value of this property is true.
This gesture works when you have a single visible web view.
If there are multiple table views, web views, text areas, and/or scroll views visible,
you will need to disable (set to false) on the above views you DON'T want this
behaviour on. The remaining view will then respond to scroll-to-top gesture.

secure#

Type: Boolean

A Boolean value indicating whether all resources on the page have been loaded through
securely encrypted connections.

selectionGranularity#

Type: Number

The level of granularity with which the user can interactively select content in the web view.

size#

extended

Type: Dimension

The size of the view in system units.

Although property returns a <Dimension> dictionary, only the width and height
properties are valid. The position properties--x and y--are always 0.

To find the position and size of the view, use the rect
property instead.

The correct values will only be available when layout is complete.
To determine when layout is complete, add a listener for the
postlayout event.

softKeyboardOnFocus#

extended

Type: Number

Determines keyboard behavior when this view is focused. Defaults to Titanium.UI.Android.SOFT_KEYBOARD_DEFAULT_ON_FOCUS.

timeout#

Type: Number

The timeout interval for the request, in seconds.

tintColor#

extended

Type: String, Titanium.UI.Color

The view's tintColor

This property is a direct correspondent of the tintColor property of UIView on iOS. If no value is specified,
the tintColor of the View is inherited from its superview.

title#

Type: String

Returns page title of webpage.

tooltip#

extended

Type: String

The default text to display in the control's tooltip.

Assigning a value to this property causes the tool tip to be displayed for the view.
Setting the property to null cancels the display of the tool tip for the view.
Note: This property is only used for apps targeting macOS Catalyst.

top#

extended

Type: Number, String

The view's top position.

This position is relative to the view's parent. Exact interpretation depends on the
parent view's layout property. Can be either a float value or
a dimension string (for example, '50%' or '10px').

This is an input property for specifying where the view should be positioned, and does not
represent the view's calculated position.

touchEnabled#

extended

Type: Boolean

Determines whether view should receive touch events.

If false, will forward the events to peers.

touchFeedback#

extended

Type: Boolean

A material design visual construct that provides an instantaneous visual confirmation of touch point.

Touch feedback is only applied to a view's background. It is never applied to the view's foreground content
such as a Titanium.UI.ImageView's image.

For Titanium versions older than 9.1.0, touch feedback only works if you set the
Titanium.UI.View.backgroundColor property to a non-transparent color.

touchFeedbackColor#

extended

Type: String

Optional touch feedback ripple color. This has no effect unless touchFeedback is true.

Defaults to provided theme color.

transform#

extended

Type: Titanium.UI.Matrix2D, Titanium.UI.Matrix3D

Transformation matrix to apply to the view.

Android only supports Matrix2D transforms.

transitionName#

extended

Type: String

A name to identify this view in activity transition.

Name should be unique in the View hierarchy.

translationX#

extended

Type: Number

Horizontal location of the view relative to its left position in pixels.

Translation values are applied to the static post layout value.

translationY#

extended

Type: Number

Vertical location of the view relative to its top position in pixels.

Translation values are applied to the static post layout value.

translationZ#

extended

Type: Number

Depth of the view relative to its elevation in pixels.

Translation values are applied to the static post layout value.

url#

Type: String

URL to the web document.

This property changes as the content of the webview changes (such as when the user
clicks a hyperlink inside the web view).

See also: data and html.

userAgent#

Type: String

The User-Agent header used by the web view when requesting content.

On the iOS platform, this is not per-webview. Once you have set this property for a webview
it will not change for same. But while creating new webview it can be changed to new user agent.

On Android, changing the user agent after the webview has begun loading content may cause
the webview to reload and fire multiple load or beforeload events. Developers should provide the
user agent value in the creation properties to avoid the reload and multiple events firing.

verticalMotionEffect#

extended

Type: MinMaxOptions

Adds a vertical parallax effect to the view

Note that the parallax effect only happens by tilting the device so results can not be seen on Simulator.
To clear all motion effects, use the Titanium.UI.clearMotionEffects method.

viewShadowColor#

extended

Type: String, Titanium.UI.Color

Determines the color of the shadow.

iOS Defaults to undefined. Behaves as if transparent. Android default is black.
On Android you can set <item name="android:ambientShadowAlpha">0.5</item> and
<item name="android:spotShadowAlpha">0.5</item> in your theme to change the
opacity.

viewShadowOffset#

extended

Type: Point

Determines the offset for the shadow of the view.

Defaults to undefined. Behaves as if set to (0,-3)

viewShadowRadius#

extended

Type: Number, String

Determines the blur radius used to create the shadow.

Defaults to undefined. Behaves as if set to 3. Accepts density units as of 10.0.1.

visible#

extended

Type: Boolean

Determines whether the view is visible.

width#

extended

Type: Number, String

View's width, in platform-specific units.

Defaults to: If undefined, defaults to either Titanium.UI.FILL or Titanium.UI.SIZE
depending on the view. See "View Types and Default Layout Behavior" in
Transitioning to the New UI Layout System.

Can be either a float value or a dimension string (for example, '50%' or '40dp').
Can also be one of the following special values:

  • Titanium.UI.SIZE. The view should size itself to fit its contents.
  • Titanium.UI.FILL. The view should size itself to fill its parent.
  • 'auto'. Represents the default sizing behavior for a given type of
    view. The use of 'auto' is deprecated, and should be replaced with the SIZE or
    FILL constants if it is necessary to set the view's behavior explicitly.

This is an input property for specifying the view's width dimension. To determine
the view's size once rendered, use the rect or
size properties.

willHandleTouches#

Type: Boolean

Explicitly specifies if this web view handles touches.

On the iOS platform, if this web view or any of its parent views have touch
listeners, the Titanium component intercepts all touch events. This
prevents the user from interacting with the native web view components.

Set this flag to false to disable the default behavior. Setting this property to false
allows the user to interact with the native web view and still honor any touch events sent to
its parents. No touch events will be generated when the user interacts with the web view itself.

Set this flag to true if you want to receive touch events from the web view and
the user does not need to interact with the web content directly.

This flag is true by default to retain backwards compatibility with previous
behavior.

zIndex#

extended

Type: Number

Z-index stack order position, relative to other sibling views.

A view does not have a default z-index value, meaning that it is undefined by default.
When this property is explicitly set, regardless of its value, it causes the view to be
positioned in front of any sibling that has an undefined z-index.

Defaults to undefined.

zoomLevel#

Type: Number

Manage the zoom-level of the current page.

Methods #

addEventListener #

extended

Adds the specified callback as an event listener for the named event.

Parameters:
NameTypeSummaryOptional
nameStringName of the event.No
callbackCallback<Titanium.Event>Callback function to invoke when the event is fired.No

addScriptMessageHandler #

Adds a script message handler.

Adds a script message handler that enables communication between the web content and your Titanium application in all frames of the web view.

New, cross-platform API:
Use window.tisdk.emit('yourHandlerName', JSON.stringify(body)); to send messages from web content. This API is available on all platforms and should be preferred for new development.

Legacy iOS-only API:
For backwards compatibility or when targeting SDK 13.0.0 or older, you can also use the legacy iOS-specific API:
window.webkit.messageHandlers.yourHandlerName.postMessage(body)
This method works only on iOS and will not be available on other platforms.

Important:
Always call addScriptMessageHandler before loading the page (setting the URL), or reload the URL after adding the handler to ensure your web content can communicate as expected.

JS code usage examples for your webpage:

<script type="text/javascript">
    const body = { message: 'Hello Titanium!'};

    // Preferred API for all platforms in SDK 13.1.0 and later.
    window.tisdk.emit('yourHandlerName', JSON.stringify(body));

    // Legacy iOS-only API for SDK 13.0.0 and older.
    window.webkit.messageHandlers.yourHandlerName.postMessage(body);
</script>

Titanium app code usages:

webView.addScriptMessageHandler('yourHandlerName');
webView.addEventListener('message', (e) => {
    if (e.name === 'yourHandlerName') {
        console.log(e.body.message);
    }
});
webView.url = 'https://some-remote-url.org';
Parameters:
NameTypeSummaryOptional
handlerNameStringThe name of the message handler, other than the reserved 'Ti', or 'Ti_Cookie'.
No

addUserScript #

Adds a user script.

Parameters:
NameTypeSummaryOptional
paramsUserScriptParamsProperties required to create user script.No

animate #

extended

Animates this view.

The Animation object or dictionary passed to this method defines
the end state for the animation, the duration of the animation, and other properties.

Note that on SDKs older than 9.1.0 - if you use animate to move a view, the view's actual position is changed, but
its layout properties, such as top, left, center and so on are not changed--these
reflect the original values set by the user, not the actual position of the view.

As of SDK 9.1.0, the final values of the animation will be set on the view just before the complete event and/or the callback is fired.

The rect property can be used to determine the actual size and
position of the view.

Parameters:
NameTypeSummaryOptional
animationTitanium.UI.Animation, Dictionary<Titanium.UI.Animation>Either a dictionary of animation properties or an
Animation object.
No
callbackCallback<Object>Function to be invoked upon completion of the animation.Yes

applyProperties #

extended

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that
myproxy[key] = value.

Parameters:
NameTypeSummaryOptional
propsDictionaryA dictionary of properties to apply.No

backForwardList #

An object which maintains a list of visited pages used to go back and forward to the most recent page.

Returns: BackForwardList

canGoBack #

Returns true if the web view can go back in its history list.

Returns: Boolean

canGoForward #

Returns true if the web view can go forward in its history list.

Returns: Boolean

clearMotionEffects #

extended

Removes all previously added motion effects.

convertPointToView #

extended

Translates a point from this view's coordinate system to another view's coordinate system.

Returns null if either view is not in the view hierarchy.

Keep in mind that views may be removed from the view hierarchy if their window is blurred
or if the view is offscreen (such as in some situations with Titanium.UI.ScrollableView).

If this view is a Titanium.UI.ScrollView, the view's x and y offsets are subtracted from
the return value.

Parameters:
NameTypeSummaryOptional
pointPointA point in this view's coordinate system.

If this argument is missing an x or y property, or the properties can not be
converted into numbers, an exception will be raised.
No
destinationViewTitanium.UI.ViewView that specifies the destination coordinate system to convert to. If this argument
is not a view, an exception will be raised.
No

Returns: Point

createPDF #

Create a PDF document representation from the web page currently displayed in the WebView.

If the data is written to a file the resulting file is a valid PDF document.

The Android version uses an object as a parameter instead of a callback function:

$.webview.createPDF({
  pageWidth: 5000,
  pageHeight: 72000,
  success: function(e) {
    // e.data <- the PDF data
  }
});

You can use either pageWidth/pageHeight or a pageSize constant like PDF_PAGE_DIN_A4.

Parameters:
NameTypeSummaryOptional
pageWidthNumberThe width in mils (thousandths of an inch) of the PDF (Android only)No
pageHeightNumberThe height in mils (thousandths of an inch) of the PDF (Android only)No
pageSizeNumberPredefined size. (Android only)No
showMenuBooleanWill show Androids printing menu. No success callback afterwards. (Android only)No
firstPageOnlyBooleanOnly print first page (Android only)No
successCallback<DataCreationResultAndroid>Function to call upon PDF creation. (Android only)No
callbackCallback<DataCreationResult>Function to call upon PDF creation. (iOS only)No

createWebArchive #

Create WebKit web archive data representing the current web content of the WebView.

WebKit web archive data represents a snapshot of web content. It can be loaded into a WebView directly,
and saved to a file for later use.

Parameters:
NameTypeSummaryOptional
callbackCallback<DataCreationResult>Function to call upon web archive creation.No

evalJS #

Evaluates a JavaScript expression inside the context of the web view and
optionally, returns a result. If a callback function is passed in as second argument,
the evaluation will take place asynchronously and the the callback function will be called with the result.

The JavaScript expression must be passed in as a string. If you are passing in any objects,
you must serialize them to strings using stringify.

The evalJS method returns a string representing the value of the expression. For
example, the following call retrieves the document.title element from the
document currently loaded into the web view.

var docTitle = myWebView.evalJS('document.title');

It is not necessary to include return in the JavaScript. In fact, the following
call returns the empty string:

myWebView.evalJS('return document.title');

The evalJS variant with a second callback argument executes asynchronously.

myWebView.evalJS('document.title', function (result) {
  // Manipulate the result here
});
Parameters:
NameTypeSummaryOptional
codeStringJavaScript code as a string. The code will be evaluated inside the web view context.No
callbackCallback<String>Optional callback function for the result. Required on Windows, optional on iOS/Android.Yes

Returns: String — Result of the evaluation. May be null if the asynchronous variant of this method is called.

findString #

Searches the page contents for the given string.

Parameters:
NameTypeSummaryOptional
searchStringStringThe string to search for.No
optionsStringSearchOptionsOptions for search.Yes
callbackCallback<SearchResult>Function to call upon search finished.No

fireEvent #

extended

Fires a synthesized event to any registered listeners.

Parameters:
NameTypeSummaryOptional
nameStringName of the event.No
eventDictionaryA dictionary of keys and values to add to the Titanium.Event object sent to the listeners.Yes

getViewById #

extended

Returns the matching view of a given view ID.

Parameters:
NameTypeSummaryOptional
idStringThe ID of the view that should be returned. Use the id property in your views to
enable it for indexing in this method.
No

Returns: Titanium.UI.View

goBack #

Goes back one entry in the web view's history list, to the previous page.

goForward #

Goes forward one entry in this web view's history list, if possible.

hide #

extended

Hides this view.

Parameters:
NameTypeSummaryOptional
optionsAnimatedOptionsAnimation options for Android only. Since SDK 5.1.0 and used only on Android 5.0+

Determines whether to enable a circular reveal animation.
Note that the default here is equivalent to passing in { animated: false }
Yes

insertAt #

extended

Inserts a view at the specified position in the children array.

Useful if the layout property is set to horizontal or vertical.

Parameters:
NameTypeSummaryOptional
paramsViewPositionOptionsPass an object that specifies the view to insert and optionally at which position (defaults to end)
No

pause #

Pauses native webview plugins.

Add a pause handler to your Titanium.Android.Activity and invoke
this method to pause native plugins.

Call resume to unpause native plugins.

release #

Releases memory when the web view is no longer needed.

reload #

Reloads the current webpage.

removeAllUserScripts #

Removes all associated user scripts.

removeEventListener #

extended

Removes the specified callback as an event listener for the named event.

Multiple listeners can be registered for the same event, so the
callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function
in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);
Parameters:
NameTypeSummaryOptional
nameStringName of the event.No
callbackCallback<Titanium.Event>Callback function to remove. Must be the same function passed to addEventListener.No

removeScriptMessageHandler #

Removes a script message handler.

Parameters:
NameTypeSummaryOptional
nameStringThe name of the message handler.No

repaint #

Forces the web view to repaint its contents.

resume #

Resume native webview plugins.

Used to unpause native plugins after calling pause.

Add a resume handler to your Titanium.Android.Activity and invoke
this method to resume native plugins.

setBasicAuthentication #

Sets the basic authentication for this web view to use on subsequent URL requests.

The persistence property of this method is only supported on iOS and Titanium SDK 8.0.0+.
It is ignored on other platforms and versions.

Parameters:
NameTypeSummaryOptional
usernameStringBasic auth user name.No
passwordStringBasic auth password.No
persistenceNumberConstants specify how long the credential will be kept.
This is only supported on iOS and Titanium SDK 8.0.0+.
No

setHtml #

Sets the value of html property.

The options parameter can be used to specify two options that affect
the WebView main content presentation:

  • baseURL. Sets the URL that the web content's paths will be relative to.
  • mimeType. Sets the MIME type for the content. Defaults to "text/html" if not specified.

For example:

setHtml('<html><body>Hello, <a href="/documentation">Titanium</a>!</body></html>',
        { baseURL: 'https://titaniumsdk.com/' });
Parameters:
NameTypeSummaryOptional
htmlStringNew HTML to display in the web view.No
optionssetHtmlOptionsOptional parameters for the content. Only used by iOS and Android.Yes

show #

extended

Makes this view visible.

Parameters:
NameTypeSummaryOptional
optionsAnimatedOptionsAnimation options for Android only. Since SDK 5.1.0 and only used on Android 5.0+

Determines whether to enable a circular reveal animation.
Note that the default here is equivalent to passing in { animated: false }
Yes

startListeningToProperties #

Add native properties for observing for change.

Some common properties are title, URL, estimatedProgress etc.
See native KVO capability at https://developer.apple.com/documentation/webkit/wkwebview.
See example section "Listening to Web View properties in iOS" for usage.

Parameters:
NameTypeSummaryOptional
propertyListArray<String>List of properties for listen.No

stopAnimation #

extended

Stops a running animation.

Stops a running view Animation.

stopListeningToProperties #

Remove native properties from observing.

Parameters:
NameTypeSummaryOptional
propertyListArray<String>List of properties to remove.No

stopLoading #

Stops loading a currently loading page.

takeSnapshot #

Takes a snapshot of the view's visible viewport.

Parameters:
NameTypeSummaryOptional
callbackCallback<SnapshotResult>Function to call upon snapshot captured.No

toImage #

extended

Returns an image of the rendered view, as a Blob.

The honorScaleFactor argument is only supported on iOS.

Parameters:
NameTypeSummaryOptional
callbackCallback<Titanium.Blob>Function to be invoked upon completion. If non-null, this method will be performed
asynchronously. If null, it will be performed immediately.
Yes
honorScaleFactorBooleanDetermines whether the image is scaled based on scale factor of main screen. (iOS only)

When set to true, image is scale factor is honored. When set to false, the image in the
blob has the same dimensions for retina and non-retina devices.
Yes

Returns: Titanium.Blob

Events #

beforeload #

Fired before the web view starts loading its content.

This event may fire multiple times depending on the content or URL. For example, if you set
the URL of the web view to a URL that redirects to another URL, such as an HTTP URL
redirecting to an HTTPS URL, this event is fired for the original URL and the redirect URL.

This event does not fire when navigating remote web pages.

Event Properties:
NameTypeSummary
urlStringURL of the web document being loaded.
navigationTypeNumberConstant indicating the user's action.
isMainFrameBooleanIndicate if the event was generated from the main page or an iframe.

blacklisturl #

Fired when a blacklisted URL is stopped.

Event Properties:
NameTypeSummary
urlStringThe URL of the web document that is stopped.

blockedurl #

Fired when a URL has been blocked from loading.

This event is fired when the end-user attempts to navigate to a website matching a URL in
the Titanium.UI.WebView.blockedURLs property.

Event Properties:
NameTypeSummary
urlStringThe URL of the web document that has been blocked from loading.

click #

extended

Fired when the device detects a click against the view.

There is a subtle difference between singletap and click events.

A singletap event is generated when the user taps the screen briefly
without moving their finger. This gesture will also generate a click event.

However, a click event can also be generated when the user touches,
moves their finger, and then removes it from the screen.

On Android, a click event can also be generated by a trackball click.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
obscuredBooleanReturns true if the click passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

dblclick #

extended

Fired when the device detects a double click against the view.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
obscuredBooleanReturns true if the double click passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

doubletap #

extended

Fired when the device detects a double tap against the view.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
obscuredBooleanReturns true if the double tap passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

error #

Fired when the web view cannot load the content.

The errorCode value refers to one of the Titanium.UI URL_ERROR constants or, if it does not
match one of those constants, it refers to a platform-specific constant. The platform-specific
values are underlying iOS NSURLError*
or Android WebViewClient ERROR_* constants.

Event Properties:
NameTypeSummary
successBooleanIndicates a successful operation. Returns false.
errorStringError message, if any returned. May be undefined.
codeNumberError code.
If the error was generated by the operating system, that system's error value
is used. Otherwise, this value will be -1.
urlStringURL of the web document.

focus #

extended

Fired when the view element gains focus.

This event only fires when using the trackball to navigate.

handleurl #

Fired when Titanium.UI.WebView.allowedURLSchemes contains scheme of opening url.

See the example section "Usage of allowedURLSchemes and handleurl in iOS".

Event Properties:
NameTypeSummary
handlerStringHandler Titanium.UI.iOS.WebViewDecisionHandler.
urlStringURL of the web document being loaded.

keypressed #

extended

Fired when a hardware key is pressed in the view.

A keypressed event is generated by pressing a hardware key. On Android, this event can only be
fired when the property focusable is set to true. On iOS the
event is generated only when using Ti.UI.TextArea, Ti.UI.TextField
and Ti.UI.SearchBar.

Event Properties:
NameTypeSummary
keyCodeNumberThe code for the physical key that was pressed. For more details, see KeyEvent. This API is experimental and subject to change.

load #

Fired when the web view content is loaded.

Event Properties:
NameTypeSummary
urlStringURL of the web document.

longclick #

extended

Fired when the device detects a long click.

A long click is generated by touching and holding on the touchscreen or holding down the
trackball button.

The event occurs before the finger/button is lifted.

A longpress and a longclick can occur together.

As the trackball can fire this event, it is not intended to return the x and y
coordinates of the touch, even when it is generated by the touchscreen.

A longclick blocks a click, meaning that a click event will not fire when a
longclick listener exists.

longpress #

extended

Fired when the device detects a long press.

A long press is generated by touching and holding on the touchscreen. Unlike a longclick,
it does not respond to the trackball button.

The event occurs before the finger is lifted.

A longpress and a longclick can occur together.

In contrast to a longclick, this event returns the x and y coordinates of the touch.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
obscuredBooleanReturns true if the long press passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

message #

Fired when a script message is received from a webpage.

This event get fired when you have added a message handler using Titanium.UI.WebView.addScriptMessageHandler
and the webpage sends a message to it.

Event Properties:
NameTypeSummary
urlStringURL of the web document being loaded.
bodyStringThe body of the message sent from webview.
nameStringThe name of the message handler to which the message is sent.
isMainFrameBooleanA Boolean value indicating whether the frame is the web site's main frame or a subframe.

onLoadResource #

Fired when loading resource.

Android only. Notify the host application that the WebView will load the resource specified by the given URL.

Event Properties:
NameTypeSummary
urlStringThe URL of the resource that will load.

pinch #

extended

Fired when the device detects a pinch gesture.

A pinch is a touch and expand or contract
with two fingers. The event occurs continuously until a finger is lifted again.

Event Properties:
NameTypeSummary
scaleNumberThe scale factor relative to the points of the two touches in screen coordinates.
velocityNumberThe velocity of the pinch in scale factor per second.
timeNumberThe event time of the current event being processed.
timeDeltaNumberThe time difference in milliseconds between the previous accepted scaling event and the
current scaling event.
currentSpanNumberThe average distance between each of the pointers forming the gesture in progress through
the focal point.
currentSpanXNumberThe average X distance between each of the pointers forming the gesture in progress through
the focal point.
currentSpanYNumberThe average Y distance between each of the pointers forming the gesture in progress through
the focal point.
previousSpanNumberThe previous average distance between each of the pointers forming the gesture in progress through
the focal point.
previousSpanXNumberThe previous average X distance between each of the pointers forming the gesture in progress through
the focal point.
previousSpanYNumberThe previous average Y distance between each of the pointers forming the gesture in progress through
the focal point.
focusXNumberThe X coordinate of the current gesture's focal point.
focusYNumberThe Y coordinate of the current gesture's focal point.
inProgressBooleanReturns true if a scale gesture is in progress, false otherwise.

postlayout #

extended

Fired when a layout cycle is finished.

This event is fired when the view and its ancestors have been laid out.
The rect and size values
should be usable when this event is fired.

This event is typically triggered by either changing layout
properties or by changing the orientation of the device. Note that changing the
layout of child views or ancestors can also trigger a relayout of this view.

Note that altering any properties that affect layout from the postlayout callback
may result in an endless loop.

progress #

Fired when webpage download progresses.

Provides a normalized value between 0.0 and 1.0, where 0.0 indicates nothing was downloaded and
1.0 means the page and all of its resources has finished downloading.

Event Properties:
NameTypeSummary
valueNumberAn estimate of what fraction of the current navigation has been loaded.
urlStringURL of the web document being loaded.

redirect #

Fired when a web view receives a server redirect.

Event Properties:
NameTypeSummary
titleStringPage title of webpage.
urlStringURL of the web document being loaded.

rotate #

extended

Fired when the device detects a two finger rotation.

This event is fired when doing a two finger rotation and returning the angle.
The event occurs continuously until a finger is lifted again.

Event Properties:
NameTypeSummary
rotateNumberRotation in degrees.

singletap #

extended

Fired when the device detects a single tap against the view.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
obscuredBooleanReturns true if the single tap passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

sslerror #

Fired when an SSL error occurred.

This is a synchronous event and the developer can change the value of ignoreSslError
to control if the request should proceed or fail.

Event Properties:
NameTypeSummary
codeNumberSSL error code.

swipe #

extended

Fired when the device detects a swipe gesture against the view.

Event Properties:
NameTypeSummary
directionStringDirection of the swipe--either 'left', 'right', 'up', or 'down'.
xNumberX coordinate of the event's endpoint from the source view's coordinate system.
yNumberY coordinate of the event's endpoint from the source view's coordinate system.
obscuredBooleanReturns true if the swipe passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

touchcancel #

extended

Fired when a touch event is interrupted by the device.

A touchcancel can happen in circumstances such as an incoming call to allow the
UI to clean up state.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
forceNumberThe current force value of the touch event.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.
sizeNumberThe current size of the touch area. Note: This property is only available on some Android devices.
maximumPossibleForceNumberMaximum possible value of the force property.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
altitudeAngleNumberA value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is
being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0.
Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.
timestampNumberThe time (in seconds) when the touch was used in correlation with the system start up.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
azimuthUnitVectorInViewXNumberThe x value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
azimuthUnitVectorInViewYNumberThe y value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
obscuredBooleanReturns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

touchend #

extended

Fired when a touch event is completed.

On the Android platform, other gesture events, such as longpress or swipe, cancel touch
events, so this event may not be triggered after a touchstart event.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
forceNumberThe current force value of the touch event.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.
sizeNumberThe current size of the touch area. Note: This property is only available on some Android devices.
maximumPossibleForceNumberMaximum possible value of the force property.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
altitudeAngleNumberA value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is
being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0.
Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.
timestampNumberThe time (in seconds) when the touch was used in correlation with the system start up.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
azimuthUnitVectorInViewXNumberThe x value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
azimuthUnitVectorInViewYNumberThe y value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Penciland are 9.1 or later.
obscuredBooleanReturns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

touchmove #

extended

Fired as soon as the device detects movement of a touch.

Event coordinates are always relative to the view in which the initial touch occurred

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
forceNumberThe current force value of the touch event.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.
sizeNumberThe current size of the touch area. Note: This property is only available on some Android devices.
maximumPossibleForceNumberMaximum possible value of the force property.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
altitudeAngleNumberA value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is
being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0.
Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.
timestampNumberThe time (in seconds) when the touch was used in correlation with the system start up.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
azimuthUnitVectorInViewXNumberThe x value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
azimuthUnitVectorInViewYNumberThe y value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
obscuredBooleanReturns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

touchstart #

extended

Fired as soon as the device detects a touch gesture.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
forceNumberThe current force value of the touch event.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.
sizeNumberThe current size of the touch area. Note: This property is only available on some Android devices.
maximumPossibleForceNumberMaximum possible value of the force property.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
altitudeAngleNumberA value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is
being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0.
Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.
timestampNumberThe time (in seconds) when the touch was used in correlation with the system start up.
Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.
azimuthUnitVectorInViewXNumberThe x value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
azimuthUnitVectorInViewYNumberThe y value of the unit vector that points in the direction of the azimuth of the stylus.
Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.
obscuredBooleanReturns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

twofingertap #

extended

Fired when the device detects a two-finger tap against the view.

Event Properties:
NameTypeSummary
xNumberX coordinate of the event from the source view's coordinate system.
yNumberY coordinate of the event from the source view's coordinate system.
obscuredBooleanReturns true if the tap passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

Examples #

Basic Web View to External URL

Create a web view to a remote URL and open the window as modal.

var webview = Titanium.UI.createWebView({url:'http://www.titaniumsdk.com'});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open({modal:true});

Alloy XML Markup

Previous example as an Alloy view.

<Alloy>
    <Window id="win" modal="true">
        <WebView id="webview" url="http://www.titaniumsdk.com" />
    </Window>
</Alloy>

Listening to Web View properties in iOS

Create a web view and listen 'title' property of web view.

var webview = Ti.UI.createWebView({
    url:'http://www.titaniumsdk.com'
});
webview.startListeningToProperties([ 'title' ]);
webview.addEventListener('title', function(e) {
    alert('Title is : -' +e.value);
});
var window = Ti.UI.createWindow();
window.add(webview);
window.open();

Usage of allowedURLSchemes and handleurl in iOS

Create a web view and listen 'handleurl' event to open URL from Titanium platform.

var webview = Ti.UI.createWebView({
    url: 'https://www.google.com',
    allowedURLSchemes: [ 'https', 'http' ]
});

webview.addEventListener('handleurl', function(e) {
    var handler = e.handler;
    Ti.Platform.openURL(e.url);
    handler.invoke(Ti.UI.iOS.ACTION_POLICY_CANCEL);
});
var window = Ti.UI.createWindow();
window.add(webview);
window.open();

Titanium SDK Documentation