Open new Javascript window

Question

I would like to open a new window in an application developed with Ionic framework.

html

<a href="{{exemplo}}">Abrir </a>

java script

exemplo = window.open("google.com");

I would like to open when I click on the link "open", what happens now is that when I load the page is already opening the new window.

Answer 1

To open external links within an application being developed with Ionic, use the Cordova Inappbrowser plugin that can be used to open images, access web pages and open PDF files.

The plugin can be installed by the following command:

cordova plugin add cordova-plugin-inappbrowser

To install and configure the plugin in the ngCordova application, more information here.

Example:

View code:

<ion-content ng-controller="ExampleController" padding="true">
        <button class="button button-full button-assertive" ng-click="openInExternalBrowser()">
            Browser do sistema
        </button>
        <button class="button button-full button-assertive" ng-click="openInAppBrowser()">
            Nova instância inAppBrowser
        </button>
         <button class="button button-full button-assertive" ng-click="openCordovaWebView()">
            Cordova Webview
        </button>
</ion-content>

Controller code:

angular.module('starter', ['ionic'])

.controller("ExampleController", function ($scope) {

    $scope.openInExternalBrowser = function()
    {
        window.open('http://google.com','_system','location=yes'); 
    };

    $scope.openInAppBrowser = function()
    {
        window.open('http://google.com','_blank'); 
    };

    $scope.openCordovaWebView = function()
    {
        window.open('http://google.com','_self'); 
    };

});

Better understanding:

_Blank: It opens the URL in inAppBrowser

_self: Open in Cordova Webview if the URL is in the white list, otherwise it opens in Inappbrowser.

_system: Opens in the system browser.

Location=yes: Displays the full page URL in Inappbrowser in an address bar by default location is configured to no.

Events:

This plugin has events combined with $rootScope:

When you start to open Papua:

$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event));

Event called when Inappbrowser starts to open the page.

When finished loading:

$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event));

Event that fires after the Browser has finished loading the page.

When error while loading:

$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event));

Event triggered when Inappbrowser encounters an error when opening the URL.

When I open the window:

$rootScope.$on('$cordovaInAppBrowser:exit', function(e, event));

Event triggered when the Inappbrowser window is closed.

Example with event finish loading page:

Inject a css and javascript into the loaded page

$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){

   //insere um css por código
   $cordovaInAppBrowser.insertCSS({
     code: 'body {background-color:blue;}'
   });

   // insere um Javascript por arquivo
   $cordovaInAppBrowser.executeScript({
     file: 'script.js'
   });

   alert("Página carregada");
});