web-dev-qa-db-ja.com

コルドバのexecuteScriptメソッドで外部スクリプトを挿入する問題

CordovaのInAppBrowserプラグイン内でexecuteScript（）メソッドがどのように機能するかをテストするためのダミーアプリを作成しています。特に、1つのWebビュー内にJavaScriptコードを挿入しようとしています。

これが私のindex.htmlファイルです：

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <title>InAppBrowser Injection Test</title>
    </head>
    <body>
        <div class="app">
            <h1>Testing Injection</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Starting Mother WebView</p>
                <div class="event received">
                  <p>Device is Ready</p>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

そしてindex.jsファイル

var app = {

    initialize: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        var ref = window.open('http://www.example.net', '_blank', 'location=yes ,toolbar=yes, EnableViewPortScale=yes');
        ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
        ref.addEventListener('loadstop', function() {

        //ref.executeScript({ code: "alert('Injected Code')" });

        ref.executeScript({ file: "externaljavascriptfile.js" });
        showalert();

        });
       ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
       ref.addEventListener('exit', function(event) { alert(event.type); });      
    },


    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
        console.log('Received Event: ' + id);
   }
};

そして最後にexternaljavascriptfile.js

 alert('External Injected Code');

Javascriptコードを直接挿入しようとすると（つまり、 "ref.executeScript（{code：" alert（ 'Injected Code'） "}）;"という行のコメントを解除すると）すべて正常に機能し、ページの読み込み後にアラートがトリガーされます。外部JavaScriptを挿入しようとしました（つまり、「ref.executeScript（{file： "externaljavascriptfile.js"}）;」という行を使用しましたが、何も起こりません。

私は何かが足りないのですか？

javascriptcordovainappbrowser
11
Antonio Giovanni Schiavone

Inappbrowserプラグインをインストールしましたか？

私はこれをAndroidで次のように動作させています：

編集：cordova 7用に更新

phonegapプロジェクトを作成します

> cordova create JsExec

> cd JsExec

> cordova platform add Android

> cordova plugin add cordova-plugin-inappbrowser

index.jsを更新します-これが私のonDeviceReady関数です：

onDeviceReady: function() {
    this.receivedEvent('deviceready');

    var w = window.open('http://www.example.net','_blank','location=yes');
    w.addEventListener('loadstop', function(event) {
      w.executeScript({file: "https://s3.amazonaws.com/avvi00/externaljavascriptfile.js"});
    });
},

HTCにデプロイする

> cordova run --device

enter image description here

外部スクリプトファイルは ここ

このプロジェクトの完全な作業コピーは ここ

よろしく、

AV

8
Avner

Ajaxを使用してJSファイルデータを取得し、実行スクリプトを使用して挿入します

$.ajax({
    type: "GET",
    url: cordova.file.applicationDirectory + "www/js/externalScript.js",
    dataType: "text",   
    success: function (jsCode) {
        ref.executeScript({code: jsCode}, function () {
            console.log("Code Inserted Succesfully");
        });
    },
    error: function () {
       console.log("Ajax Error");
    }
});

//ref is reference of inappbrowser
//i.e. var ref = window.open();
//url is url of your local javascript file

この方法を使用すると、インターネット上ではなく、ローカルAPPのサンドボックスにあるスクリプトファイルを追加できます。

注意：cordova-plugin-fileを作成する必要があります：cordovaプラグインはcordova-plugin-fileを追加します

10
Aman Uppal

実際、あなたはすでに答えを知っていると思います。

executeScript()メソッドは子WebViewで実行されます。

_ref.executeScript({ file: "externaljavascriptfile.js" });
_

コードでは、executeScript()メソッドは_http://www.example.net/externaljavascriptfile.js_で参照されており、_/www/js_ cordovaディレクトリのスクリプトファイルでは参照されていません。ご存知のように、executeScript()メソッドはチャイルドビューにJavaScriptを挿入するためです。

以下でコードをテストできます。私は自分のウェブサイトにファイルを置きました。

_//...
onDeviceReady: function() {
  var ref = window.open('http://www.haruair.com/', '_blank', 'location=yes, toolbar=yes, EnableViewPortScale=yes');
  ref.addEventListener('loadstop', function() {
    ref.executeScript({ file: "externaljavascriptfile.js" });
  });
},
//...
_

[〜＃〜] fyi [〜＃〜]、childviewからデータを取得する必要がある場合は、コールバックを使用できます。

_//...
var ref = window.open('http://www.haruair.com/', '_blank', 'location=yes, toolbar=yes, EnableViewPortScale=yes');
ref.addEventListener( "loadstop", function() {
  ref.executeScript(
    { file:'http://haruair.com/externaljavascriptfile.js' },
    function() {
      ref.executeScript(
        { code:'getSomething()' },
        function(values){
          var data = values[0];
          alert(data.name);
        });
    }
  );
});
//...
_

_externaljavascriptfile.js_：

_var getSomething = function(){
  // do something and get the result from childview webpage
  return { name : 'foo', age : 12 };
};
_
10
Edward

externaljavscriptfile.jsはhtmlファイルにリンクされていません。あなたはそれをに含める必要があります

<script type="text/javascript" src="path/externaljavascriptfile.js"></script>

タグを付けるか、次のコマンドで動的にロードします。

var script = document.createElement('script');
script.async = "async";
script.src = "path/externaljavascriptfile.js";
document.getElementsByTagName("head")[0].appendChild( script );

注：コードを実行するには、コードを関数に入れる必要がある場合があります。

それがうまくいくことを願っています。

3
Lorenzo Von Matterhorn