我正在关注 Part 2 - Developing a Dojo Mobile Application: FlickrView 的 dojo 移动教程。
但是当我尝试该教程中的示例时，我发现 //ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js 和 //ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js在我下面的测试html中无法加载，这两个js文件在demo page加载成功
我做错了什么吗？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<title>Dojo Mobile tutorial | Flickrview | Part II | HTML Structure</title>
<!-- application stylesheet -->
<link rel="stylesheet" type="text/css" href="css/flickrview.css">
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async : true,
baseUrl : './',
parseOnLoad : false,
mblHideAddressBar : true,
packages : [{
name : "flickrview",
location : "js"
}]
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<!-- dojo application code -->
<script>
// Load the widget parser and mobile base
require(["dojox/mobile/parser", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {
// Parse the page for widgets
parser.parse();
});
</script>
</head>
<body>
<!-- Feed view -->
<div id="feed" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true">
<div id="feedHeading"
data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top', label: 'Feeds'">
<span data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="icon: 'images/settings.png', moveTo:'settings', transitionDir:'-1', transition:'none'"
style="float:left;"></span>
<span id="refreshButton" data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="icon: 'images/refresh.png'"
style="float:right;"></span>
</div>
<div id="feedList" data-dojo-type="dojox/mobile/EdgeToEdgeList">
<div data-dojo-type="dojox/mobile/ListItem"
data-dojo-props="moveTo:'details', transition:'slide'" class="photoListItem">
<img src="images/photo1.png" width="80px" height="80px" alt="Title" style="float:left;"/>
<div class="photoSummary">
<div class="photoTitle">
Photo title here
</div>
<div class="publishedTime" data-dojo-time="2013-12-13">
published date here
</div>
<div class="author">
author here
</div>
</div>
<div class="summaryClear"></div>
</div>
<div data-dojo-type="dojox/mobile/ListItem"
data-dojo-props="moveTo:'details', transition:'slide'" class="photoListItem">
<img src="images/photo2.png" width="80px" height="80px" alt="Title" style="float:left;"/>
<div class="photoSummary">
<div class="photoTitle">
Another photo title here
</div>
<div class="publishedTime" data-dojo-time="2013-12-13">
published date here
</div>
<div class="author">
author here
</div>
</div>
<div class="summaryClear"></div>
</div>
</div>
</div>
</body>
</html>
这是 Chrome 中的错误消息。
最佳答案
要使用无协议(protocol)版本的网址(例如 //ajax.googleapis.com)，您必须在某个地方托管您的项目(无论是在本地还是在远程网络服务器)。
您不能直接打开文件(使用 file:// 前缀 URL)，因为这样它将无法找到指定的库。如果加载这样的 URL，实际发生的情况是使用相同的协议(protocol)前缀来加载这些页面。如果您仅通过打开文件来加载页面，它将具有 file:// 前缀，而不是 http:// 或 https://.
这也是它在演示页面上运行的原因(因为它是托管的)以及您收到这些 GET 错误的原因，它正在尝试查找 ajax.googleapis.com 在你的本地机器上(由于 file:// 协议(protocol))，它显然找不到。
要修复它，您只需使用完整的 URL，例如:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
或者更好的解决方案是将您的项目放在网络服务器上(nginx，apache2，...)，因为我认为您也无法加载异步模块。
关于javascript - deviceTheme.js 和 dojo.js 无法在 Chrome 中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21257606/