jQuery的内部VS科尔多瓦的应用程序:$没有定义
问题描述:
最近,我发现了科尔多瓦,并也开始了测试项目,看看它是如何工作。问题是,当我包括jQuery的它让我看到了一个错误:
$ is not defined
HTML代码如下所示:
<!DOCTYPE html>
<html>
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<!--My note:I added unsafe-inline-->
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 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">
<link rel="stylesheet" type="text/css" href="css/index.css">
<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>
<script type="text/javascript" src="scripts/jquery.js"></script>
<!--<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
<title>SchoolMusic</title>
</head>
<body style="background-color:coral ">
<canvas id="canvas"></canvas>
<script type="text/javascript">
$(document).ready(function() {
console.log($(document));
});
</script>
</body>
</html>
起初我用jQuery的本地版本(保存在“脚本/ jQuery的.js“文件 - 缩小版)。它没有奏效。然后我用“code.jquery.com”中的“远程在线”jquery代码尝试了代码。同样的错误。
后来,我想到了安全策略可能会导致一些问题(虽然我不明白为什么,因为其他地方的脚本加载corectly:cordova.js和index.js)和...它的工作!我仍然想保持这个政策。问题是:为什么在使用策略时不加载我的文件?并且:如何在策略中允许其他文件从互联网加载(例如,从code.jquery.com)?
答
问题修复。我错误地将“default-src”中的'self'参数替换为'unsafe-inline'。所以,实际上,没有脚本被加载(甚至没有index.js或cordova.js)。 最终代码如下所示:
<!DOCTYPE html>
<html>
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<!--My note:I added unsafe-inline-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 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">
<link rel="stylesheet" type="text/css" href="css/index.css">
<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>
<script type="text/javascript" src="scripts/jquery.js"></script>
<!--<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
<title>SchoolMusic</title>
</head>
<body style="background-color:coral ">
<canvas id="canvas"></canvas>
<script type="text/javascript">
$(document).ready(function() {
console.log($(document));
});
</script>
</body>
</html>