InAppBrowser

The InAppBrowser plugin can provide a web browser view that is displayed when calling the window.open() function or when opening a link formed as <a target="_blank">.

In order to use the InAppBrowser plugin in our Apache Cordova project, we need to use the following cordova plugin add command:

> cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Demo

In order to access the InAppBrowser demo, you can click on the InAppBrowser list item. You will be introduced to the InAppBrowser page. As shown in the following screenshot, you can click on the Open and Close web page button in order to open the http://www.google.com/ web page using InAppBrowser. Note that the opened web page will be closed after 10 seconds.

Demo

Opening an external page using InAppBrowser

The HTML page

The following code snippet shows the "inAppBrowser" page:

<div data-role="page" id="inAppBrowser">
    <div data-role="header">
        <h1>InAppBrowser</h1>
        <a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
    </div>
    <div data-role="content">
        <h1>Welcome to the InAppBrowser Gallery</h1>
        <p>Click the button below to open the inAppBrowser which will close after 10 seconds.</p>
        
        <input type="button" id="openGoogleSearchPage" value="Open and Close web page"/>
    </div>
</div>

As shown in the preceding "inAppBrowser" page code snippet, it contains the following:

  • A page header that includes a back button
  • Page content that includes a "openGoogleSearchPage" button to open a web page (http://www.google.com/) and close it after 10 seconds

View controller

The following code snippet shows the InAppBrowser page view controller JavaScript object that includes the event handlers of the page (inAppBrowser.js):

(function() {
    var inAppBrowserManager = InAppBrowserManager.getInstance();

    $(document).on("pageinit", "#inAppBrowser", function(e) {
        e.preventDefault();

        $("#openGoogleSearchPage").on("tap", function(e) {
            e.preventDefault();

            var windowRef = inAppBrowserManager.openWindow("http://www.google.com");    

            //Close the window after 10 seconds...
            window.setTimeout(function() {
                console.log("It is over. Time to close the window...");
                inAppBrowserManager.closeWindow(windowRef);
            }, 10000);
        });         
    });    
})();

As shown in the preceding code snippet, the "pageinit" event handler registers the "tap" event handler on the "openGoogleSearchPage" button. In the "tap" event handler of the "openGoogleSearchPage" button, a new window is opened by calling the inAppBrowserManager.openWindow() method that specifies the URL to open "http://www.google.com/".

When the window.setTimeout() function is executed after 10 seconds using windowRef, which is returned from the inAppBrowserManager.openWindow() method, the opened window is closed by calling inAppBrowserManager.closeWindow(windowRef).

API

The following code snippet shows InAppBrowserManager.js:

var InAppBrowserManager = (function () {     
    var instance;

    function createObject() {
        return {
            openWindow: function (url) {
                var windowRef = window.open(url, '_blank', 'location=no'),

                return windowRef; 
            },
            closeWindow: function (windowRef) {  
                if (windowRef) {
                    windowRef.close();
                }
            }
        };
    };

    return {
        getInstance: function () {
            if (!instance) {
                instance = createObject();
            }

            return instance;
        }
    }; 
})();

As shown in the preceding code, InAppBrowserManager is a singleton object that has two simple methods, as highlighted in the preceding code:

  • openWindow(url): This is used to open a new window by calling the window.open() method. The window.open(url, target, options) method has the following parameters:
    • url: This represents the URL to be loaded.
    • target: This represents the target in which to load the URL. It can be _self (default value), which means that the URL opens in the Cordova WebView if it is in the white list; otherwise, it opens in InAppBrowser or _blank (a specified value by InAppBrowserManager). This _blank means that the URL opens in InAppBrowser or _system, which means that the URL opens in the web browser of the system.
    • options: This represents the options for the InAppBrowser. It is a string that must not have any empty spaces, and it consists of key/value pairs, where key represents a feature's name and value represents a feature's value. The separator between any two features in the options string must be a comma. A location string is one of the available features that can be used in the options string. It specifies whether the location bar will be shown or not. In InAppBrowserManager, the location feature is set to no to hide the location bar, as it is by default set to yes.

window.open() returns a reference to the InAppBrowser window. This can be used to close the opened window later.

  • closeWindow(windowRef): This is used to close an opened window by calling the close() method of the reference to the InAppBrowser window (the windowRef object).

Tip

InAppBrowser has more methods that you can check out in the Apache Cordova documentation at https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index.md.

We are now done with the InAppBrowser functionality in the Cordova Exhibition app.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.140.196.244