Javascript无法执行
Javascript won't execute
本文关键字：执行 Javascript 更新时间：2023-09-26
我正在做一个新的网站。我以前写过很多代码，但没有这个先进。我有一个html文件，这是主页。现在，我将通过ajax更改页面的内容。一切正常。所以当我点击，比如说，Home菜单，它调用这个函数，得到另一个HTML文件，里面有内容。
在我的主html中，我有这个:
<html>
<head>
<title>
Estancia
</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<link rel="stylesheet" href="webfont/webFontStylesheet.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body onLoad = "javascript:home()">
<div id = "bodyLeft">
<!-- This is just a sideskirt -->
</div>
<div id = "bodyRight">
<!-- This is just a sideskirt -->
</div>
<div id = "header">
<h1>
Estancia
</h1>
</div>
<div id = "footer">
<h5>
Copyright© 2013
</h5>
</div>
<div id = "background">
<!-- This is just the background color -->
</div>
<div id = "scrollCover">
<!-- Used to cover the scrolled content -->
</div>
<div id = "body">
</div>
<div id = "content">
If you see this then the page did not load correctly. Try reloading the page. If problem persists, try reinstalling the Mozilla Firefox Browser. <br/><br/> Error: Javascript may not be working. <br/> Fix: Enable Javascript in your browser.
</div>
<div id = "menu">
<div id = "home" onClick="javascript:home()">
<a href = "#"> Home </a>
</div>
<div id = "information">
<a href = "#"> Information </a>
<span id = "aboutDrop">
<a class = "about" href="#" onClick = "javascript:about()"> About </a>
<br/>
<a class = "map" href="#" onClick = "javascript:map()"> Map </a>
</span>
</div>
<div id = "history" onClick = "javascript:history()">
<a href = "#"> History </a>
</div>
<div id = "pictureGallary">
<a href = "#"> Picture Gallary </a>
<span id = "pictureGalleryDrop">
<a class = "ef" href = "#" onClick = "javascript:estanciaFarm()"> Estancia Farm </a>
<br/>
<a class = "ca" href = "#" onClick = "javascript:cattle()"> Cattle </a>
<br/>
<a class = "ga"href = "#" onClick = "javascript:game()"> Game </a>
<br/>
<a class = "go" href = "#" onClick = "javascript:goats()"> Goats </a>
<br/>
<a class = "sh" href = "#" onClick = "javascript:sheep()"> Sheep </a>
</span>
</div>
</div>
</body>
这里没有问题…当我点击它正确加载。因此，当点击Home时，它会通过ajax改变内容，像这样:
var xmlhttp = new XMLHttpRequest();
var path;
var div;
function home()
{
path = "html/home.html";
div = "content";
AJAX(path, div);
}
function AJAX(path, div)
{
xmlhttp.open("GET", path, false);
xmlhttp.send();
if (xmlhttp.readyState == 4)
{
document.getElementById(div).innerHTML = xmlhttp.responseText;
}
}
可以看到，它将另一个html文件加载到内容中。下面是html文件的代码:
<html>
<head>
<link rel="stylesheet" href="css/homeMenu.css"/>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<div id = "slideshow">
<div id = "first">
<img id = "a1" src = "images/home/img1_e.jpg"/>
<img id = "a2" src = "images/home/img2_e.jpg"/>
<img id = "a3" src = "images/home/img3_e.jpg"/>
<img id = "a4" src = "images/home/img4_e.jpg"/>
</div>
<div id = "second">
<img id = "b4" src = "images/home/img4_e.jpg"/>
<img id = "b1" src = "images/home/img1_e.jpg"/>
<img id = "b2" src = "images/home/img2_e.jpg"/>
<img id = "b3" src = "images/home/img3_e.jpg"/>
</div>
<div id = "third">
<img id = "c3" src = "images/home/img3_e.jpg"/>
<img id = "c4" src = "images/home/img4_e.jpg"/>
<img id = "c1" src = "images/home/img1_e.jpg"/>
<img id = "c2" src = "images/home/img2_e.jpg"/>
</div>
<div id = "fourth">
<img id = "d2" src = "images/home/img2_e.jpg"/>
<img id = "d3" src = "images/home/img3_e.jpg"/>
<img id = "d4" src = "images/home/img4_e.jpg"/>
<img id = "d1" src = "images/home/img1_e.jpg"/>
</div>
</div>
</body>
这个问题……我面临的唯一问题是，当我自己加载home.html文件时，它执行它的javascript就像一块蛋糕。
但是，当它加载到主html中时，它不能工作。它根本不可能执行。我已经尝试过内部javascript，但它不工作，仍然。
javascript:
var useBSNns;
if (useBSNns)
{
if (typeof(bsn) == "undefined")
bsn = {}
var _bsn = bsn;
}
else
{
var _bsn = this;
}
_bsn.Crossfader = function (divs, fadetime, delay )
{
this.nAct = -1;
this.aDivs = divs;
for (var i=0;i<divs.length;i++)
{
document.getElementById(divs[i]).style.opacity = 0;
document.getElementById(divs[i]).style.position = "absolute";
document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
document.getElementById(divs[i]).style.visibility = "hidden";
}
this.nDur = fadetime;
this.nDelay = delay;
this._newfade();
}
_bsn.Crossfader.prototype._newfade = function()
{
if (this.nID1)
clearInterval(this.nID1);
this.nOldAct = this.nAct;
this.nAct++;
if (!this.aDivs[this.nAct]) this.nAct = 0;
if (this.nAct == this.nOldAct)
return false;
document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";
this.nInt = 50;
this.nTime = 0;
var p=this;
this.nID2 = setInterval(function() { p._fade() }, this.nInt);
}
_bsn.Crossfader.prototype._fade = function()
{
this.nTime += this.nInt;
var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
var op = ieop / 100;
document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";
if (this.nOldAct > -1)
{
document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
}
if (this.nTime == this.nDur)
{
clearInterval( this.nID2 );
if (this.nOldAct > -1)
document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";
var p=this;
this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
}
}
_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
{
return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}
请，是什么出了问题，它不想执行当home.html被加载到主html，但当home.html是自己执行它的工作?
我知道您已经投入了大量的工作，但它可能是有益的，看看jQuery插件，如循环。http://malsup.com/jquery/cycle
另一方面，您需要从您正在检索的Home.html页面中删除<script type="text/javascript" src="js/javascript.js"></script>，并将其置于您正在加载辅助页面的main.html文件的头部。它将被调用，而不是通过AJAX加载内联执行，这就是您所遇到的问题。因此，我们将其移动到main.html，并在加载home.html页面时手动调用它。
我已经改变了你的AJAX方法采取回调方法或函数时，AJAX是成功的。您将看到AJAX方法的第三个参数是完成时要调用的函数，在我们的示例中是startBSN，您将看到我在此方法中包装了js/javascript函数。
var xmlhttp = new XMLHttpRequest();
var path;
var div;
function home()
{
path = "html/home.html";
div = "content";
AJAX(path, div, 'startBSN');
}
function AJAX(path, div, callback)
{
xmlhttp.open("GET", path, false);
xmlhttp.send();
if (xmlhttp.readyState == 4)
{
document.getElementById(div).innerHTML = xmlhttp.responseText;
window[callback]();
}
}
我已经删除了你的js/javascript.js并将其包含在main.html的头部，你应该从你的home.html中删除它
我也把你的js/javascript.js代码包装成一个叫做startBSN的可调用函数，否则它会在页面加载时作为匿名函数运行。
这是你的js.javascript文件，周围的函数startBSN
function startBSN(){
var useBSNns;
if (useBSNns)
{
if (typeof(bsn) == "undefined")
bsn = {}
var _bsn = bsn;
}
else
{
var _bsn = this;
}
_bsn.Crossfader = function (divs, fadetime, delay )
{
this.nAct = -1;
this.aDivs = divs;
for (var i=0;i<divs.length;i++)
{
document.getElementById(divs[i]).style.opacity = 0;
document.getElementById(divs[i]).style.position = "absolute";
document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
document.getElementById(divs[i]).style.visibility = "hidden";
}
this.nDur = fadetime;
this.nDelay = delay;
this._newfade();
}
_bsn.Crossfader.prototype._newfade = function()
{
if (this.nID1)
clearInterval(this.nID1);
this.nOldAct = this.nAct;
this.nAct++;
if (!this.aDivs[this.nAct]) this.nAct = 0;
if (this.nAct == this.nOldAct)
return false;
document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";
this.nInt = 50;
this.nTime = 0;
var p=this;
this.nID2 = setInterval(function() { p._fade() }, this.nInt);
}
_bsn.Crossfader.prototype._fade = function()
{
this.nTime += this.nInt;
var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
var op = ieop / 100;
document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";
if (this.nOldAct > -1)
{
document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
}
if (this.nTime == this.nDur)
{
clearInterval( this.nID2 );
if (this.nOldAct > -1)
document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";
var p=this;
this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
}
}
_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
{
return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}
}
相关文章：
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 在Safari执行javascript之前对其进行修改
- 如何在执行此特定onclick事件时执行JavaScript函数
- 如何在从浏览缓存加载页面时执行javascript
- 使用Rhino和ASE执行Javascript的区别
- 如何在加载完整页面后严格执行javascript代码
- 在动态加载的对话框中执行Javascript
- 在Sinatra中执行Javascript
- 通过AJAX加载页面并执行javascript和CSS
- 适用于多种浏览器的Selenium-需要能够执行javascript的webDriver
- 如何在seleniumwebdriver中执行javascript提示并等待接受输入
- 在window.open(）生成的窗口中执行JavaScript
- AJAX成功回调-执行javascript时出现问题
- 通过指令在控制器中执行javascript函数
- 从React Native Android原生地执行JavaScript代码
- iframe未执行Javascript方法(PHP）
- 执行JavaScript代码，使用selenium webdriver或WatiN从控制台获取日志
- 通过web驱动程序异步执行Javascript
- 如何在长时间执行JavaScript期间显示微调器
- 点击困难时执行javascript函数
