在 Cordova Webview 中执行脚本答案

【问题标题】：Execute script in Cordova Webview在 Cordova Webview 中执行脚本
【发布时间】：2016-03-16 14:08:01
【问题描述】：

我正在使用this InAppbrowser 插件
遵循答案中的建议后，我仍然无法正常工作。

我的 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"/>

控制台输出

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 事件永远不会触发。 Cordova 版本 6.0.0，离子版本 1.7.14

【问题讨论】：

你可以为 loaderror 设置一个监听器，看看你会得到什么吗？ $rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event){ alert('SomethingMeaningful'); });
@SteveKennedy loaderror 根本不会触发
嗯。有趣的。你在 deviceready() 方法中有这段代码吗？
是的，代码在 deviceReady 中
您的 CSP 和白名单规则是什么？

标签： javascript android cordova ionic-framework

【解决方案1】：

如果您使用_self，事件侦听器将不起作用。

当您使用_self 时，您是在cordova webview 中加载网站，而不是在inAppBrowser webview 中，然后您将所有现有代码替换为您加载的网站中的代码，因此当您的页面完成加载时，您的代码已经消失，不会被执行。

您必须使用_blank 才能打开真正的inAppBrowser 窗口。

【讨论】：

那么有没有办法在webview中注入JS呢？当我们使用_self
不是来自 javascript。如果你修改了cordova java类，SystemWebviewClient类应该有处理webview启动和停止事件的方法，你可以让它们执行一些javascript
是的。另一个问题是使用_blank 目标时<input type="file"> 不起作用。所以它几乎是或。我不能同时实现 - 注入 javascript 和工作 <input type="file">。 Webview 处理文件浏览器打开成功。
是的，输入文件在 inAppBrowser 上不起作用是一个已知问题 issues.apache.org/jira/browse/CB-9148。您可以尝试使用另一个基于人行横道的 inAppBrowser 插件（请参阅此处的可用插件cordova.apache.org/plugins/?q=crosswalk）。但是使用人行横道会增加您的 apk 大小。
试过这个人行横道插件 - npmjs.com/package/dtworkshop-inappcrossbrowser。没有运气:(

【解决方案2】：

看起来您可以使用此插件将 Cordova 注入您加载到 webview 中的任何网站：https://github.com/sberan/cordova-plugin-injectview

另外，https://issues.apache.org/jira/browse/CB-9148 已经关闭

【讨论】：