外部文件中的javascript代码无法在Cordova应用中执行

Question

我想在应用程序实际准备就绪且在线时（我在原始代码中进行检查，但没有找到）将外部javascript（没有jquery或其他）加载到我的Corodova / Phonegapp应用程序（Visual Studio 2015，Cordova CLI 6.1.1）中。在下面的示例中输入）。 最终，这个外部javascript将成为google maps javascript api。 但是，由于遇到了一些问题，我首先尝试使用自己的小JavaScript文件（ external_file.js ）。

在调试时，我可以看到<script src="https://myhost/external_file.js"></script>标签已写入我应用的原始代码中，但是我无法访问已加载的代码（function external_function()不可用）。 我尝试了波纹模拟器以及我的android 5.1.1设备。

我所有的功能都在没有Cordova的“正常” html文件中工作。 另外，当我尝试从本地scripts/external_file.js文件（从scripts/external_file.js ）加载javascript文件时，我可以访问文件中的函数。

我花了相当长的时间寻找解决方案，但没有找到任何有用的方法：

安德烈亚斯·林纳特（Andreas Linnert）在2013年曾遇到过类似的问题，但没有给出答案。
psycrow117希望使用<script></script>标记（如Google Maps Javascript API示例中给出的）加载googel maps api。 但是我想用一个功能
rolinger没有加载cordova-plugin-whitelist（我这样做）
FabianE和KRIZTE描述了相同的问题。 我实际上将Blauharley和e-satis的解决方案与Jason Livesay一起使用来加载外部脚本。 但是，该帖子似乎也未解决该问题。

我知道有cordova-plugin-googlemaps可以加载本机环境。 只是说我现在不想这样做。 如果没有其他解决方案，我将不得不...

由于我的函数使用“常规” html文件工作，而且我也可以正确加载本地脚本文件，因此我认为我忘记正确设置一些内容以执行外部代码。

我将Content-Security-Policy为

 <meta http-equiv="Content-Security-Policy" content="default-src: 'self' https://myhost https://maps.google.com 'unsafe-inline' 'unsafe-eval'"> <meta http-equiv="Content-Security-Policy" content="script-src: 'self' https://myhost https://maps.google.com 'unsafe-inline' 'unsafe-eval'">

我还输入了cordova-plugin-whitelist参数

 <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <access origin="https://*.googleapis.com" /> <access origin="https://myhost" /> <access origin="*" /> <allow-navigation href="https://*.googleapis.com" /> <allow-navigation href="https://myhost" /> <allow-navigation href="*" /> <allow-intent href="https://*.googleapis.com" /> <allow-intent href="https://myhost" /> <allow-intent href="*" />

但是，这似乎也不可行。

有没有人有办法在加载外部文件后执行代码？

后来，谷歌地图的javascript api需要是asyncron，但这是另一个问题。

index.html

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <!-- Enable all requests, inline styles, and eval() --> <meta http-equiv="Content-Security-Policy" content="default-src: 'self' https://myhost https://maps.google.com 'unsafe-inline' 'unsafe-eval'"> <meta http-equiv="Content-Security-Policy" content="script-src: 'self' https://myhost https://maps.google.com 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Testapp</title> </head> <body> <div class="app"> <h1>Testapp</h1> <button id="loadexternal_button">load external file</button> &nbsp; <button id="isloaded_button">is loaded?</button> <div id="map"></div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="scripts/platformOverrides.js"></script> <script type="text/javascript" src="scripts/index.js"></script> </body> </html>

index.css

 .app { background-color:white; } #map{ height: 400px; width: 400px; border:1px solid white; }

index.js

 (function () { "use strict"; function onDeviceReady() { // Event Listener for Buttons: https://stackoverflow.com/a/31892530/2381164 document.getElementById('isloaded_button').addEventListener('click', function () { checkLoadedFile(); }, false); document.getElementById('loadexternal_button').addEventListener('click', function () { loadJS('https://myhost/external_file.js', hasloaded(), document.body); }, false); }; // https://stackoverflow.com/a/950146/2381164 function loadJS(url, implementationCode, location) { var scriptTag = document.createElement('script'); scriptTag.src = url; scriptTag.onload = implementationCode; scriptTag.onreadystatechange = implementationCode; location.appendChild(scriptTag); }; // Change color of div when script is loaded function hasloaded() { var mapElement = document.getElementById('map'); mapElement.setAttribute('style', 'border:1px solid yellow'); } // Change background-color of div when file is loaded propperly function checkLoadedFile() { var mapElement = document.getElementById('map'); if (typeof external_function === 'function') { mapElement.setAttribute('style', 'background-color: green;'); } else { mapElement.setAttribute('style', 'background-color: red;'); } } // Load when App is ready document.addEventListener('deviceready', onDeviceReady.bind(this), false); })();

external_file.js

 function external_function() { var mapElement = document.getElementById('map'); mapElement.setAttribute('style', 'background-color: orange;'); }

Answer 1

这是我当前正在使用的安全策略元：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval; media-src *">

目前它接受我扔给它的一切！ ...请记住使用

content =“ default-src *;

不是100％安全的，因为它将在任何位置（本地或在线）运行脚本，但前提是您拥有

script-src'自我'

在您的安全元中...执行外部脚本时当前遇到的问题已经成为过去！

外部文件中的javascript代码无法在Cordova应用中执行

问题描述

index.html

index.css

index.js

external_file.js

1 个解决方案

解决方案1
2 2017-07-05 21:53:22

外部文件中的javascript代码无法在Cordova应用中执行

问题描述

index.html

index.css

index.js

external_file.js

1 个解决方案

解决方案1 2 2017-07-05 21:53:22

解决方案1
2 2017-07-05 21:53:22