Java腳本未加載快遞

我正在嘗試使用Kendo的TreeView創建一棵簡單的樹。Java腳本未加載快遞

的HTML代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="kendo.common.min.css" /> 
<link rel="stylesheet" href="kendo.default.min.css" /> 
<link rel="stylesheet" href="kendo.default.mobile.min.css" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js"></script> 
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js"></script> 
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js"></script> 
</head> 

<body> 
<script> 
//To check if the scripts are loading 
var len = $('script').filter(function() { 
       return ($(this).attr('src') == 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js'); 
      }).length; 

      //if there are no scripts that match, the load it 
      if (len === 0) { 
       $.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js'); 
       console.log("jquery not loading"); 
      } 
      else 
       console.log("jquery loading");

  var len = $('script').filter(function() { 
       return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js'); 
      }).length; 

      //if there are no scripts that match, the load it 
      if (len === 0) { 
       $.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.data.min.js'); 
       console.log("treeview kendo not loading"); 
      } 
      else 
       console.log("treeview kendo loading"); 


      len = $('script').filter(function() { 
       return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js'); 
      }).length; 

      //if there are no scripts that match, the load it 
      if (len === 0) { 
       $.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.core.min.js'); 
       console.log("core kendo not loading"); 
      } 
      else 
       console.log("core kendo loading"); 

      len = $('script').filter(function() { 
       return ($(this).attr('src') == 'http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js'); 
      }).length; 

      //if there are no scripts that match, the load it 
      if (len === 0) { 
       $.getScript('http://kendo.cdn.telerik.com/2017.1.118/js/kendo.treeview.min.js'); 
       console.log("data kendo not loading"); 
      } 
      else 
       console.log("data kendo loading"); 



var inlineDefault = new kendo.data.HierarchicalDataSource({ 
    data: [ 
     { text: "Furniture", items: [ 
      { text: "Tables & Chairs" }, 
      { text: "Sofas" }, 
      { text: "Occasional Furniture" } 
     ] }, 
      { text: "Decor", items: [ 
      { text: "Bed Linen" }, 
      { text: "Curtains & Blinds" }, 
      { text: "Carpets" } 
     ] } 
    ] 
}); 
$("#treeview").kendoTreeView({ 
    dataSource: inlineDefault 
}); 
</script> 
<div id="example"> 

<div class="demo-section k-content"> 
<h4>Inline data</h4> 
<div id="treeview"></div> 
</div> 

<style> 
.box .k-textbox { 
width: 100px; 
} 
</style> 
</div> 
</body> 
</html>

這個HTML頁面是由節點JS是如下服務：

var nano = require('nano')('http://localhost:5984'); 
var express = require('express'); 
var app = express(); 
var fs = require ('fs'); 
var bp = require('body-parser'); 
var urlencodedParser = bp.urlencoded({extended: false}); 

app.set('port',process.env.PORT || 3001); 

app.all('*', function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    next(); 
}); 

app.get('/a',function(req,res){ 
    res.status(200).sendFile(__dirname+"/a.html"); 
}); 

app.get('/kendo.common.min.css',function(req,res){ 
    res.setHeader('content-type','text/css'); 
    res.sendFile(__dirname+"/kendo.common.min.css"); 
}); 

app.get('/kendo.default.min.css',function(req,res){ 
    res.setHeader('content-type','text/css'); 
    res.sendFile(__dirname+"/kendo.default.min.css"); 
}); 

app.get('/kendo.default.mobile.min.css',function(req,res){ 
    res.sendFile(__dirname+"/images/kendoui.woff"); 
}); 


app.get('/images/kendoui.woff?v=1.1 ',function(req,res){ 
    res.setHeader('content-type','text/css'); 
    res.sendFile(__dirname+"/kendo.default.mobile.min.css"); 
}); 

app.get('/kendo.core.min.js',function(req,res){ 
    res.setHeader('content-type','text/javascript'); 
    res.sendFile(__dirname+'/kendo.core.min.js'); 
}); 

app.get('/kendo.treeview.min.js',function(req,res){ 
    res.setHeader('content-type','text/javascript'); 
    res.sendFile(__dirname+'/kendo.treeview.min.js'); 
}); 

app.get('/kendo.data.min.js',function(req,res){ 
    res.setHeader('content-type','text/javascript'); 
    res.sendFile(__dirname+'/kendo.data.min.js'); 
}); 

app.listen (app.get('port'), function(){ 
console.log ('Express started on http://localhost:' + 
app.get ('port') + '; press Ctrl-C to terminate.'); 
});

所以這HTML代碼示例是我發現的一個示例here。這裏唯一的區別是html和kendo js文件是從我的nodeJs服務器加載的。並檢查是否加載JavaScript，我做了一個測試，我在StackOverflow找到。除了TreeView之外的所有東西都在加載。 Chrome的開發者工具不會引發任何錯誤，Node也不會。有人請解釋爲什麼這不是加載。

感謝您提前。

編輯：所以在使用@LuizFernandodaSilva的評論之前，當我跑時，Chrome中的控制檯看起來像這樣。我從中假設腳本正在加載。與他的評論，我切換到CDN的JavaScript和CSS和控制檯顯示完全相同，但不加載樹。

來源

2017-03-21 NewbieProgrammer

你爲什麼要在前端和nodejs api中加載JavaScript？它是前端js還是節點代碼？如果它是一個前端代碼，也許你只需要檢查腳本的路徑（可能是./kendo ...而不是kendo ...）。否則，它可以作爲一個文件服務器，但我認爲沒有必要，因爲你可以通過url訪問腳本。另外，你看到的控制檯開發工具？通常它會給出提示。例如，如果是路徑問題，則控制檯可能會記錄未找到的錯誤。 –

再一次觀察：如果它只是一個前端腳本，您可以使用CDN代碼而不是腳本文件，就像使用jquery插件一樣。 –

@LuizFernandodaSilva這是一個前端腳本，所以我切換到CDN。它顯示腳本正在控制檯中加載，但樹未建立。請看看我編輯過的截圖。 – NewbieProgrammer

回到示例並複製在那裏提供的代碼（找不到這個和提供的示例之間的區別）。重新運行它，它工作。

來源

2017-03-22 09:13:40 NewbieProgrammer

Java腳本未加載快遞

回答

相關問題