2014-01-21 48 views
0

我正在關注012jo的dojo移動教程。deviceTheme.js和dojo.js無法在Chrome中加載

但是,當我試圖在實例教程,我發現//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被加載,在demo page

上午成功加載我做錯了什麼這兩個js文件?

<!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

回答

2

使用的URL的協議版本少(如//ajax.googleapis.com),你必須主機項目中的某處(無論是在本地或遠程網絡服務器)。

您不能只打開該文件(使用前綴爲file://的URL),因爲那樣它將無法找到指定的庫。如果您加載這樣的URL,實際發生的事情是使用相同的協議前綴來加載這些頁面。如果您只是通過打開文件來加載頁面,它將有一個file://前綴,而不是http://https://

這也是爲什麼它正在演示頁面上(因爲它託管)以及爲什麼你得到這些GET錯誤,它試圖找到ajax.googleapis.com在本地計算機上的原因(由於file://協議),它顯然找不到。

要修復它你只需要使用完整的URL,例如:

​​

還是一個更好的解決辦法是把你的項目上的Web服務器(nginx的,的Apache2,...),因爲我不你認爲你也可以加載異步模塊。

+0

在src attibute的url之前加上'http://'後,它就起作用了。非常感謝你的幫助。 – carmentian

相關問題