我建了两个页面,分别命名为index.html(主页)和about.html.然后将javascript代码命名为
global.js,里面同时包含操控这两个页面的函数。将global.js同时插入到两个页面的body标签最后。
结果是作用于index.html页面的函数一切工作正常,但作用于about.html页面的函数却不起作用。求解释。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="scripts/modernizr.js"></script>
<link rel="stylesheet" media="screen" href="styles/index.css" />
</head>
<body>
<header>
<div id="logos">
<img id="logo" src="images/logo.jpg" alt="SIEA" />
<a href="http://www.zju.edu.cn/" class="linklogo"><img src="images/school.gif" alt="浙江大学" /></a>
<a href="http://oc.zju.edu.cn/" class="linklogo"><img src="images/collage.gif" alt="海洋学院" /></a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="arrangement.html">Arrangement</a></li>
</ul>
</nav>
</header>
<article>
<h1>Welcome</h1>
<p>
<span>T</span>oday,we are going to introduce some kinds of fruits. The first type of fruit
is the <a href="#" title="apple">Apple</a>.The second type of fruit is the <a href="#" title="banana">
Banana</a>.The last type of fruit is the <a href="#" title="cherry">Cherry</a>.We all love eating
fruits. Let us have a look!!!
</p>
<div id="slideshow">
<img src="images/fruits.jpg" alt="fruits" id="preview" />
</div>
</article>
<footer>
<p>Designed by <abbr title="Zhejiang University">ZJU</abbr> Mareine Geology Lab</p>
</footer>
<script src="scripts/global.js"></script>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="scripts/modernizr.js"></script>
<link rel="stylesheet" media="screen" href="styles/about.css" />
</head>
<body>
<header>
<div id="logos">
<img id="logo" src="images/logo.jpg" alt="SIEA" />
<a href="http://www.zju.edu.cn/" class="linklogo"><img src="images/school.gif" alt="浙江大学" /></a>
<a href="http://oc.zju.edu.cn/" class="linklogo"><img src="images/collage.gif" alt="海洋学院" /></a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="arrangement.html">Arrangement</a></li>
</ul>
</nav>
</header>
<article>
<h1>About the band</h1>
<nav>
<ul>
<li><a href="#jay">Jay Skript</a></li>
<li><a href="#domsters">The Domsters</a></li>
</ul>
</nav>
<section id="jay">
<h2>Jay Skript</h2>
<p>Jay Skript is going to rock your world!</p>
<p>Together with his compatriots the Domsters,
Jay is set for world domination. Just you wait and see.
</p>
<p>Jay Skript has been on the scene since the mid 1990s.
His talent has not always been recognized or fully appreciated.
In the early days, he was ofen unfavorably compared to bigger,
similarly named artists. That is all in the past now.</p>
</section>
<section id="domsters">
<h2>The Domsters</h2>
<p>The Domsters have been around, in one form or another,
for almost as long. it is only in the past few years that the
Domsters have settled down to their current, stable lineup.
Now they're a rock-solid bunch: methodical and dependable.</p>
</section>
</article>
<footer>
<p>Designed by <abbr title="Zhejiang University">ZJU</abbr> Mareine Geology Lab</p>
</footer>
<script src="scripts/global.js"></script>
</body>
</html>
global.js
function addLoadEvent(func) //将函数添加到window.onload事件中
{
var oldonload=window.onload;
if (typeof window.onload!='function')
{
window.onload=func;
}else
{
window.onload= function(){
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement) //在元素后面插入元素
{
var parent=targetElement.parentNode;
if (parent.lastChild==targetElement)
{
parent.appendChild(newElement);
}else
{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function addclass(element,value) //为元素加类
{
if (!element.className)
{
element.className=value;
}else
{
newClassName=element.className;
newClassName+=' ';
newClassName+=value;
element.className=newClassName;
}
}
function highlightPage() //作用于所有页面,使当前页面的导航按钮高亮
{
if (!document.getElementsByTagName) return false;
var headers=document.getElementsByTagName('header');
if (headers.length==0) return false;
var navs=headers[0].getElementsByTagName('nav');
if (navs.length==0) return false;
var links=navs[0].getElementsByTagName('a');
if (links.length==0) return false;
for (var i=0;i<links.length;i++)
{
linkurl=links[i].getAttribute("href");
if (window.location.href.indexOf(linkurl)!=-1)
{
links[i].className="here";
}
}
}
function moveElement(elementID,final_x,final_y,interval) //作用于index页面,使元素移动
{
if (!document.getElementById) return false;
var elem=document.getElementById(elementID);
if (!elem) return false;
if (elem.movement) clearTimeout(elem.movement)
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if (xpos==final_x && ypos==final_y) return true;
if (xpos<final_x) xpos++;
if (xpos>final_x) xpos--;
if (ypos<final_y) ypos++;
if (ypos>final_y) ypos--;
elem.style.top=ypos+'px';
elem.style.left=xpos+'px';
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeat,interval);
}
function prepareSlideshow() //作用于index页面,使元素的移动与鼠标事件挂钩(冲突函数)
{
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
var preview=document.getElementById('preview');
preview.style.position="absolute";
preview.style.top="0px";
preview.style.left="0px";
var articles=document.getElementsByTagName('article');
if (articles.length==0) return false;
var ps=articles[0].getElementsByTagName('p');
if (ps.length==0) return false;
var links=ps[0].getElementsByTagName('a');
if (links.length==0) return false;
links[0].onmouseover=function(){
moveElement("preview",0,0,10);
}
links[1].onmouseover=function(){
moveElement("preview",-325,0,10);
}
links[2].onmouseover=function(){
moveElement("preview",-640,0,10);
}
}
function showSection(id) //作用于about页面,使当前章节显示
{
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
var articles=document.getElementsByTagName('article');
if (articles.length==0) return false;
var sections=articles[0].getElementsByTagName('section');
if (sections.length==0) return false;
for (var i=0;i<sections.length;i++)
{
if (sections[i].getAttribute('id')==id)
sections[i].style.display='block';
else
sections[i].style.display='none';
}
}
function prepareInternalnav() //作用于about页面,使显示函数与鼠标点击事件挂钩(冲突函数)
{
if (!document.getElementsByTagName) return false;
var articles=document.getElementsByTagName('article');
if (articles.length==0) return false;
var navs=articles[0].getElementsByTagName('nav');
if (navs.length==0) return false;
var links=navs[0].getElementsByTagName('a');
if (links.length!=2) return false;
links[0].destination=links[0].getAttribute('href').split('#')[1];
links[1].destination=links[1].getAttribute('href').split('#')[1];
document.getElementById(links[0].destination).style.display='none';
document.getElementById(links[1].destination).style.display='none';
links[0].onclick=function(){
showSection(links[0].destination);
return false;
}
links[1].onclick=function(){
showSection(links[1].destination);
return false;
}
}
addLoadEvent(highlightPage);
//addLoadEvent(prepareSlideshow); //将一个index页面的函数屏蔽,则about页面函数运行正常
addLoadEvent(prepareInternalnav);