外部文件中的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