javascript 脚本在本地主机中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3795580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Script not working in localhost
提问by graham.reeds
I found this site/tutorial/demofrom another question here on SO.
我在 SO 上的另一个问题中找到了这个站点/教程/演示。
Very nice and clean code. However I am having problems with it when running from localhost where I test all changes to my sites. I am running pretty much the exact same code (I have all mine in /lib not /js).
非常漂亮和干净的代码。但是，当我从 localhost 运行时遇到了问题，我在其中测试了对我的站点的所有更改。我正在运行几乎完全相同的代码（我的所有代码都在 /lib 中，而不是 /js）。
I've stepped through the code in FireBug and inspected the generated source and it is adding the script tags, but a breakpoint on the loaded function never triggers.
我已经逐步完成了 FireBug 中的代码并检查了生成的源代码，它正在添加脚本标记，但是加载的函数上的断点永远不会触发。
To test whether the files are being loaded and not registered, I am loading jquery and in the standard $(document).ready()function have a simple alert but FireBug gives the error of $ is not definedwhich means that while loading.js updates the html file, the browser (FireFox, but IE8 exhibits the same behaviour) isn't loading the files.
为了测试文件是否正在加载和未注册，我正在加载 jquery 并且在标准$(document).ready()函数中有一个简单的警报，但 FireBug 给出了错误，$ is not defined这意味着当 loading.js 更新 html 文件时，浏览器（FireFox，但 IE8表现出相同的行为）不加载文件。
UPDATE:I've enabled the Net tab. When the page is hard reloaded (via ctrl+f5) there are 9 requests, 8 of which is 304 and a 404 (which is the call to load logo.png which I never copied), the rest are ColorBox css files. None of the objects listed are js files that should be loaded via the loading.js file which is being loaded. All of the times are in low milliseconds and nothing seems out the ordinary.
更新：我启用了网络选项卡。当页面被硬重新加载（通过ctrl+ f5）时，有 9 个请求，其中 8 个是 304 和一个 404（这是对加载 logo.png 的调用，我从未复制过），其余的是 ColorBox css 文件。列出的对象都不是应该通过正在加载的 loading.js 文件加载的 js 文件。所有的时间都在低毫秒内，没有什么不寻常的。
UPDATE2:Here's the source:
UPDATE2：这是来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - How to create a stylish loading bar as Gmail in jQuery</title>
<link rel="stylesheet" href="css/loading.css" type="text/css" media="screen" />
<script src="lib/loading.js" type="text/javascript"></script>
</head>
<body onload="start()">
<div id="restart">
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button" onclick="restart()"><input type="submit" value="Restart me please!" /></div>
</div>
<div id="loadingZone">
<div id="loadingSms">LOADING</div>
<div id="infoProgress">0%</div>
<br class="clear" />
<div id="loadingBar">
<div id="progressBar"> </div>
</div>
<div id="infoLoading"></div>
</div>
</body>
</html>
Note the change in name from general.css to loading.css. This is loading.css which apart from the name change is identical to general.css:
请注意名称从general.css 更改为loading.css。这是loading.css，除了名称更改外，与general.css 相同：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
font-size: 12px;
font-family:tahoma,arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
.clear{
clear:both;
}
#button{
text-align:center;
margin:50px 50px 150px 50px;
}
#restart{
display:none;
text-align:center;
}
#loadingZone{
margin:0 auto;
width:410px;
text-align:center;
}
#loadingBar{
border:1px solid #c2c2c2;
height:2px;
text-align:left;
line-height:0;
margin:0;
padding:0;
overflow:hidden; /*fix for IE 6*/
}
#progressBar{
height:2px;
line-height:0;
margin:0;
padding:0;
background:#b3f83d;
width:0%;
}
#loadingSms{
color:#6ea1fa;
float:left;
padding:10px 2px;
}
#infoProgress{
color:#6ea1fa;
float:right;
padding:10px 2px;
}
#infoLoading{
padding:10px;
color:#b9b9b9;
font-size:10px;
}
And finally loading.js. Note the changes to the line which adds the creates the script tag has been modified to reflect my directory layout.
最后是loading.js。请注意，添加创建脚本标记的行的更改已被修改以反映我的目录布局。
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: [email protected]
//@license: Feel free to use it, but keep this credits please!
/***************************/
var LoadBar = function(){
this.value = 0;
this.sources = Array();
this.sourcesDB = Array();
this.totalFiles = 0;
this.loadedFiles = 0;
};
//Show the loading bar interface
LoadBar.prototype.show = function() {
this.locate();
document.getElementById("loadingZone").style.display = "block";
};
//Hide the loading bar interface
LoadBar.prototype.hide = function() {
document.getElementById("loadingZone").style.display = "none";
};
//Add all scripts to the DOM
LoadBar.prototype.run = function(){
this.show();
var i;
for (i=0; i<this.sourcesDB.length; i++){
var source = this.sourcesDB[i];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = source
head.appendChild(script);
}
};
//Center in the screen remember it from old tutorials? ;)
LoadBar.prototype.locate = function(){
var loadingZone = document.getElementById("loadingZone");
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = loadingZone.clientHeight;
var popupWidth = loadingZone.clientWidth;
loadingZone.style.position = "absolute";
loadingZone.style.top = parseInt(windowHeight/2-popupHeight/2) + "px";
loadingZone.style.left = parseInt(windowWidth/2-popupWidth/2) + "px";
};
//Set the value position of the bar (Only 0-100 values are allowed)
LoadBar.prototype.setValue = function(value){
if(value >= 0 && value <= 100){
document.getElementById("progressBar").style.width = value + "%";
document.getElementById("infoProgress").innerHTML = parseInt(value) + "%";
}
};
//Set the bottom text value
LoadBar.prototype.setAction = function(action){
document.getElementById("infoLoading").innerHTML = action;
};
//Add the specified script to the list
LoadBar.prototype.addScript = function(source){
this.totalFiles++;
this.sources[source] = source;
this.sourcesDB.push(source);
};
//Called when a script is loaded. Increment the progress value and check if all files are loaded
LoadBar.prototype.loaded = function(file) {
this.loadedFiles++;
delete this.sources[file];
var pc = (this.loadedFiles * 100) / this.totalFiles;
this.setValue(pc);
this.setAction(file + " loaded");
//Are all files loaded?
if(this.loadedFiles == this.totalFiles){
setTimeout("myBar.hide()",300);
//load the reset button to try one more time!
document.getElementById("restart").style.display = "block";
}
};
//Global var to reference from other scripts
var myBar = new LoadBar();
//Checking resize window to recenter :)
window.onresize = function(){
myBar.locate();
};
//Called on body load
start = function() {
myBar.addScript("lib/jquery-min.js");
myBar.addScript("lib/jquery.colorbox-min.js");
myBar.addScript("lib/jquery.pan-min.js");
myBar.addScript("lib/raphael-min.js");
myBar.addScript("lib/map.js");
myBar.run();
};
//Called on click reset button
restart = function(){
window.location.reload();
};
Any ideas of how to make a script that plainly works online work in localhost? Or a similar method to do a loading screen that does work in localhost?
关于如何制作一个可以在本地主机中在线工作的脚本的任何想法？或者类似的方法来做一个在本地主机中工作的加载屏幕？
采纳答案by Telanor
You said you moved your code to /lib instead of /js. Did you change the code to reflect this? Its hardcoded on line 34 to assume the files are there: script.src = "js/" + source. Also, if your firebug net tab is disabled, click the tab and an arrow should show up next to it. Click that arrow and select enable.
您说您将代码移至 /lib 而不是 /js。您是否更改了代码以反映这一点？它在第 34 行硬编码以假设文件在那里：script.src = "js/" + source. 此外，如果您的萤火虫网络选项卡被禁用，请单击该选项卡，旁边会显示一个箭头。单击该箭头并选择启用。
Edit in response to update:
编辑以响应更新：
I set it up on my localhost and I found out 2 things. First, this script kinda cheats it seems. Each of the scripts it loads has to call the "loaded" function to notify the loader that loading has been completed, so you're going to have to edit all the scripts you include to call that function if you want the progress bar to work right. That aside, it is actually loading all the files. In the firebug command line, $ returns a function which is part of the jquery.min.js file, so it is loading the files.
我在我的本地主机上设置了它，我发现了两件事。首先，这个脚本似乎有点作弊。它加载的每个脚本都必须调用“已加载”函数来通知加载器加载已完成，因此如果您希望进度条工作，您将必须编辑包含的所有脚本以调用该函数对。除此之外，它实际上正在加载所有文件。在 firebug 命令行中， $ 返回一个函数，它是 jquery.min.js 文件的一部分，因此它正在加载文件。
You said you put an alert in $(document).ready. Depending on where you put that, it makes sense that you'd get an error. If that script is run before loading.js has loaded jQuery, then you'll get an error. I'm not quite sure why you want or need a javascript loader, especially since its going to make this harder on you to do this, but if you want to use jQuery after the loading is complete, you might want to put all the jQuery dependant code in another script and load that with the loading.js. I tried this out and it worked fine.
你说你在 中发出警报$(document).ready。根据你把它放在哪里，你会得到一个错误是有道理的。如果该脚本在loading.js 加载jQuery 之前运行，那么您将收到错误消息。我不太确定你为什么想要或需要一个 javascript 加载器，特别是因为它会让你更难做到这一点，但是如果你想在加载完成后使用 jQuery，你可能想要把所有的 jQuery另一个脚本中的依赖代码并使用 loading.js 加载它。我试过了，效果很好。
回答by SamStephens
Without seeing the code, I'm guessing you're running the page from your file system, and the javascript paths are pointing at the root directory, something like /example.js
没有看到代码，我猜你是从你的文件系统运行页面，并且 javascript 路径指向根目录，比如 /example.js
You should indeed use the NET tab of Firebug to diagnose if the files aren't being loaded, if it's greyed out, its disabled, you should be able to on the down arrow beside the "Net" title, and enable it.
您确实应该使用 Firebug 的 NET 选项卡来诊断文件是否没有被加载，如果它是灰色的，它被禁用了，您应该能够在“Net”标题旁边的向下箭头上，并启用它。
回答by graham.reeds
Okay, it appears I didn't quite read all the tutorial. It appears I need to modify the files it will be loading to contain a callback to the loading script. Not useful if I am loading files from a CDN or wanting to preload images/css.
好吧，看来我没有完全阅读所有教程。看来我需要修改将要加载的文件以包含对加载脚本的回调。如果我从 CDN 加载文件或想要预加载图像/css，则没有用。
Sorry for wasting your time guys.
抱歉浪费你们的时间。
