Class: WebViewWidget

PR. WebViewWidget

Creates a webview widget.

The webview widget is a wrapper for an iFrame that loads external content into the app. The HTML that specifies the widget also contains a loading (or holding) image that is displayed whilst the app is loaded, in many circumstances (with a good internet connection, or loading a local file) the iFrame will load so quickly that this image will not be seen.

An offline image can also be specified in the widget parameters. The offline image is displayed when the app detects that it is offline and therefore can not load the contents of the iFrame. It is common, but not a requirement, that the offline image matches the loading image. The offline image is not required, if it is not specified then the iFrame will simply fail to render and the content beneath (this could be the background image for the page) will be visible.

Note: for legacy reasons the WebView widget is specified as an iFrame widget, see the data-widget HTML Parameter.

HTML Parameters

The following parameters are required.

data-widget="IFRAME" Required
The identifier for the widget type.
data-src="{{string}}" Required
The source file to use. Can be local ('../assets/webview.html') or web-based ('http://somewebsite.com/somepage.html').

The following parameters are optional (defaults are listed between the braces).

id="{{id}}" Optional
It is usually preferable to include a unique ID but it is not strictly necessary.
data-user-interaction="{{true}}" Optional
true || false. Specifies whether the iFrame can accept user interaction.
data-offline-image="{{string}}" Optional
The location of the image to use when the app is offline.

Examples

Base WebView Implementation
The following example shows the HTML specifying a WebView Widget; the offline-image and loading image are specified. This base example loads a webpage into the page. Note that this example does not explicitly set the iFrame to accept user interaction but the default allows this so the webpage inside the webview can be interacted with.

id Optional
A unique id for the HTML element.
data-widget="IFRAME" Required
WebView Widget identifier.
data-src="{{src}}" Required
The webview source.
data-offline-image="{{src}}" Optional
The source for the offline image.
<div id="unique1id"
    data-widget="IFRAME"
    data-src="http://www.appstudio.net"
    data-offline-image="../assets/offline.png">
    <!-- The holding image -->
    <img src="../assets/loading.jpg" />
</div>

Serving a Local file through a WebView
This example loads a page from a local folder. The local folder could contain files that specify a custom widget, which would then be loaded in using the WebView widget specification below.

A live view of this example can be seen on the WebView page of the AppStudio Enrichment Guide for QuarkXPress.

id Optional
A unique id for the HTML element.
data-widget="IFRAME" Required
Video Widget identifier.
data-src="{{src}}" Required
The webview source.
data-offline-image="{{src}}" Optional
The source for the offline image.
<div id="box7"
    data-widget="IFRAME"
    data-src="./assets/WebView/Frames.html"
    data-offline-image="assets/box7.jpg"
    data-user-interaction="true">
    <img alt="img_0_0_2.jpg" border="0" height="370" src="assets/portrait-Picture65.jpg" width="550"/>
</div>

Applying Social Media Buttons via WebView
This example adds a Facebook 'recommend' button to the page. This example does not specify a loading or offline image. User interaction is required for the user to click/tap the button (note that this is true by default).

id Optional
A unique id for the HTML element.
data-widget="IFRAME" Required
Video Widget identifier.
data-src="{{src}}" Required
The webview source.
data-user-interaction="true" Required
Allow interaction with webview.
<div id="unique1id"
    data-widget="IFRAME"
    data-user-interaction="true"
    data-src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fappstudio.net%2F&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;font=verdana&amp;colorscheme=light&amp;action=recommend&amp;height=21">
</div>
Author:
  • AppStudio Widgets
Source:
  • widgets/WebViewWidget.js, line 2

Extends

  • PR.BaseWidget

Members

elHTMLDivElement

The container div for this widget.

Source:
  • widgets/WebViewWidget.js, line 159

iframeHTMLIFrameElement

Holds the reference to the iframe tag from DOM.

Source:
  • widgets/WebViewWidget.js, line 176

imageEl_HTMLImageElement

Holds the reference to the offline image tag created dynamically.

Source:
  • widgets/WebViewWidget.js, line 164

previewImageHTMLImageElement

Holds the reference to the preview image from DOM. (the holding or loading image).

Source:
  • widgets/WebViewWidget.js, line 170

srcString

Holds the source url of the iframe.

Source:
  • widgets/WebViewWidget.js, line 182

Methods

disableIFrame( )

Creates a modal layer above the iframe window to block any user interaction.

Source:
  • widgets/WebViewWidget.js, line 609

hideImage( )

Hides the offline image

Source:
  • widgets/WebViewWidget.js, line 587

initialize( element )

Acts like a constructor, this function triggered by default when you create an object.

Parameters:
Name Type Description
element HTMLElement

The HTML DOM Element to attach to.
Throws:
Error HTML Element not attached.
Source:
  • widgets/WebViewWidget.js, line 194

onFadeEnd( )

Sets display to none when the transition ends

Source:
  • widgets/WebViewWidget.js, line 600

showImage( )

Displays the offline image.

Source:
  • widgets/WebViewWidget.js, line 567

validateWidget( data )

Removes the poster/hiding image if the app is online (therefore iframe is loaded/loading)

Parameters:
Name Type Description
data Boolean

data structure that holds online status
Source:
  • widgets/WebViewWidget.js, line 625
Top