我正在编写一个虚拟应用程序来测试Cordova的InAppBrowser插件中的executeScript()方法是如何工作的.特别是,我正在尝试在一个webview中注入一个javascript代码.

这里有我的index.html文件:

    

        
        
        
        
        
        
    
    
        

            
Testing Injection
            

                
Starting Mother WebView
                

                  
Device is Ready
                
            
        
        
    

和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"});",没有任何反应.

我错过了什么吗？

1> Edward..：

---

实际上,我认为你已经知道了答案.

executeScript() 方法在子WebView中运行.

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

在您的代码中,executeScript()引用方法http://www.example.net/externaljavascriptfile.js,而不是在/www/js cordova目录中的脚本文件中引用.因为executeScript()您知道方法在childview中注入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" });
  });
},
//...

仅供参考,如果您需要从子视图获取数据,则可以使用回调.

//...
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 };
};

---

好的答案是，“ externaljavascriptfile.js”是指无法访问应用程序资产（位于其他“服务器”上）的子视图的根。因此，最好的猜测是将js内容加载到变量中，然后通过“ code：”声明将其发送。

---

使用`_self`选项时,此解决方案不起作用.

2> 小智..：

---

使用Ajax获取JS文件数据,然后使用execute脚本注入它

$.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沙箱中的脚本文件,而不是Internet中的脚本文件.

注意,你需要cordova-plugin-file:cordova插件添加cordova-plugin-file

3> Avner..：

---

你安装了inappbrowser插件吗？

我有这个在android工作如下:

编辑:更新了cordova 7

创建phonegap项目

> cordova create JsExec

> cd JsExec

> cordova platform add android

> cordova plugin add cordova-plugin-inappbrowser

更新index.js -here是我的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

外部脚本文件在这里

这个项目的完整工作副本在这里

问候,

AV