Tuesday, April 5, 2016

Execute script in Cordova Webview

Leave a Comment

I am using this InAppbrowser plugin
After following the suggestions in answers I still cannot get this working.

My app.js

(function () {   'use strict';    var app = angular       .module('starter', ['ionic', 'ngCordova'])       .run(function($ionicPlatform){         $ionicPlatform.ready(function() {           if(window.cordova && window.cordova.plugins.Keyboard) {             cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);             cordova.plugins.Keyboard.disableScroll(true);           }           if(window.StatusBar) {             StatusBar.styleDefault();           }         });       });        app.controller("starter", function($scope, $rootScope, $cordovaInAppBrowser){            console.log("inside controller");            $cordovaInAppBrowser.open('https://google.com','_self', {location: "no"})               .then(function(event) {                 console.log("success");               })               .catch(function(event) {                 console.log(event)               });            $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){               console.log("loadstop called");               $cordovaInAppBrowser.executeScript({                                         code: 'alert("from app to browser");'               });           });            $rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event){             console.log(e);           });          })          angular.element(document).ready(function() {           document.addEventListener("deviceready", function() {             console.log("deviceready called");             angular.bootstrap(document, ["starter"]);           }, false);         });   }()); 

index.html

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">     <title></title>     <link href="lib/ionic/css/ionic.css" rel="stylesheet">     <link href="css/style.css" rel="stylesheet">      <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above     <link href="css/ionic.app.css" rel="stylesheet">     -->      <!-- ionic/angularjs js -->     <script src="lib/ionic/js/ionic.bundle.js"></script>     <script src="lib/ngCordova/dist/ng-cordova.js"></script>      <script src="cordova.js"></script>          <!-- your app's js -->     <script src="src/app.js"></script>   </head>   <body>    <ion-pane ng-controller="starter">    </ion-pane>   </body> </html> 

config.xml

 <content src="index.html"/>   <allow-navigation href="http://*/*"/>   <allow-navigation href="https://*/*"/>   <access browserOnly="true" origin="*" />   <preference name="webviewbounce" value="false"/>   <preference name="UIWebViewBounce" value="false"/>   <preference name="DisallowOverscroll" value="true"/>   <preference name="android-minSdkVersion" value="16"/>   <preference name="BackupWebStorage" value="none"/>   <preference name="SplashScreen" value="screen"/>   <preference name="SplashScreenDelay" value="5000"/>   <preference name="orientation" value="portrait"/>   <feature name="StatusBar">     <param name="ios-package" onload="true" value="CDVStatusBar"/>   </feature>   <platform name="android">     <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>     <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>     <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>     <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>     <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>     <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>     <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>     <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>     <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>     <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>     <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>     <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>   </platform>   <icon src="resources/android/icon/drawable-xhdpi-icon.png"/> 

console output

I/chromium(18704): [INFO:library_loader_hooks.cc(130)] Chromium logging enabled: level = 0, default verbosity = 0 I/chromium(18704): [INFO:CONSOLE(46)] "deviceready called", source: file:///android_asset/www/src/app.js (46) I/chromium(18704): [INFO:CONSOLE(20)] "inside controller", source: file:///android_asset/www/src/app.js (20) 

$cordovaInAppBrowser:loadstop event never fires. Cordova version 6.0.0, ionic version 1.7.14

1 Answers

Answers 1

event listeners shouldn't work if you use _self.

When you use _self you are loading the website inside the cordova webview, not the inAppBrowser webview, and then you are replacing all your existing code with the code from the website you load, so when your page finish loading, your code is gone and won't be executed.

You have to use _blank to open the real inAppBrowser window.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment