我花了這麼長時間試圖通過ajax獲得這個多頁面的工作。爲什麼AJAX div加載html,但不會從其他html調用javascript?
首先,我用這個教程:http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/
出於某種原因,javascript調用不爲我工作:
這裏是我的佈局。
的index.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Venue - New Student building</title>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript" src="miniTab.js"></script>
<link href="css2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
document.observe('dom:loaded', function() {
var newsCat = document.getElementsByClassName('newsCat');
for (var i = 0; i < newsCat.length; i++) {
$(newsCat[i].id).onclick = function() {
getCatPage(this.id);
}
}
});
function getCatPage(id) {
var url = 'load-content4.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse});
}
function showLoad() {
$('newsContent').style.display = 'none';
$('newsLoading').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('newsLoading').style.display = 'none';
$('newsContent').style.display = 'block';
$('newsContent').innerHTML = newData;
}
// ]]>
</script>
<!-- blablablablbaalblabalbalblablablabla other stuff -->
</head>
<body>
<div id="newsContainer" style="background-image: url(images/menuGradient.png); background-repeat:repeat-x; width:100%;" align="center">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">
<tr><td width="960" align="center" background="http://bytes.com/images/menuGradient.png" >
<div id="newsCategoriesContainer">
<ul id="miniflex" >
<span>
<li><div class="newsCat" id="tabHome"><a class="active" title="">Home</a></div></li>
<li><div class="newsCat" id="tabInformation"><a title="">Information</a></div></li>
<li><div class="newsCat" id="tabGallery"><a>Gallery</a></div></li>
<li><a href="/archives/" title="">Blog</a></li>
<li><a href="/the-language-in-the-lab/" title="">About us</a></li>
<li><a href="/demo/animated-minitabs/" title="">Sitemap</a></li>
<li><a href="/contact/" title="">Contact us</a></li>
</span>
</ul></div>
1111111111111111111 blablablabla
<tr><td width="960" valign="top" align="left">
<div style="width: 960px; position: relative;">
<div id="newsLoading" align="center"><img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" vspace="100" /></div>
<div>
<div id="newsContent"></div>
</div>
</div>
</td></tr>
</table>
</div>
</body>
</html>
loadcontent4.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<?php
function stringForJavascript($in_string) {
$str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
$str = ereg_replace('"', '\\"', $str);
return $str;
}
switch($_GET['id']) {
case 'tabHome':
include('Home.html');
break;
case 'tabInformation':
include('deleteme_frameContent1.html');
break;
case 'tabGallery':
include('Gallery.html');
break;
default:
$content = 'There was an error.';
}
print stringForJavascript($content);
usleep(600000);
?>
</body>
</html>
Gallery.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
</head>
<body>
<a href="http://bytes.com/images/other/futureSu/side1.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side1.jpg" height="100" width="100" /></a>
<a href="http://bytes.com/images/other/futureSu/side2.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side2.jpg" height="100" width="100" /></a>
<a href="http://bytes.com/images/other/futureSu/final.jpg" onFocus="if(this.blur)this.blur()" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/final.jpg" height="100" width="100" /></a>
<a href="flash/SnowDrivingFail.mov" class="lightwindow" params="lightwindow_width=340,lightwindow_height=260" title="vid">mp4 vid</a>
</body>
</html>
的Javascript倍呃包含: effects.js,lightwindow.js,prototype.js,scriptaculous.js
好吧,如果我將所有gallery.html代碼複製到我的主索引頁,它的一切工作,如果我運行Gallery.html通過它自我,JavaScript也有效...因此,它提供它不是一個錯誤gallery.html 圖像等所有BODY內容顯示從index.html(只是不是JavaScript)調用時正確(我甚至嘗試移動腳本成的index.html,我試圖從報頭移動腳本體,但它們都沒有工作)
但錯誤是包含可變的內容DIV內。而不是從其他頁面加載JavaScript。
請幫助別人讓我的主網頁運行外部JavaScript?
p.s.我上傳了我的網站,希望能讓你們更輕鬆: ps.s.s.我認爲這個錯誤是由於index.html上的img-links沒有看到外部腳本;沒有事件處理程序附加到圖像。 (但我該怎麼做,幫我個人:()
index2.html(單擊頂部的圖庫,並選擇圖像(請參閱錯誤,頁面被重定向,而不是來自其他html的javascript調用):mediaproject-su.netne .NET/index2.html
Gallery.html(證明JS直接工作,在這裏工作正常):mediaproject-su.netne.net/Gallery.html
林AJAXing到一個div ..嗯,我不想使用框架,因爲我他們遇到了麻煩,我實際上嘗試使用框架來分割標題/內容以防止標題刷新,但我無法修復所有這些滾動條問題,主要問題是沒有MASTER SCROLLBAR來控制它們,只有單個滾動條。 \ n我還有什麼可以參考腳本的。\ n還有什麼其他的方式可以讓我達到這個效果。 javascript:標題/內容(僅限內容刷新,因爲標題後面包含聲音,每次有人更改頁面時我不想刷新) – astral 2011-02-01 11:26:44