Question

我正在关注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中的错误消息。 error message in Chrome

Answer 1

要使用无协议版本的网址（例如//ajax.googleapis.com），您必须在某处（在本地或远程网络服务器上）托管您的项目。

您不能只打开文件（使用file://前缀URL），因为它无法找到指定的库。如果加载这样的URL，实际发生的情况是使用相同的协议前缀来加载这些页面。如果您只是通过打开文件来加载页面，那么它将具有file://前缀，而不是http://或https://。

这也是它正在处理演示页面的原因（因为它是托管的）以及为什么会出现这些GET错误，它试图在本地计算机上找到ajax.googleapis.com（由于file://协议），它显然无法找到。

要解决此问题，您只需使用完整的网址，例如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>

或者更好的解决方案是将您的项目放在网络服务器（nginx，apache2，...）上，因为我认为您不能加载异步模块。

无法在Chrome中加载deviceTheme.js和dojo.js.

1 个答案: