为什么AJAX div加载html，但不从其他html调用javascript？
[英]Why does AJAX div loads html, but doesn't call javascript from the other html?
问题描述
I've spent so long trying to get this multiple-page via ajax to work. 
我花了很长时间尝试通过ajax来获取此多页内容。
First I used this tutorial: http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/ 首先，我使用了本教程： http : //webdesign.torn.be/tutorials/javascript/prototype/page-loading/
For some reason, the javascript call doesn't work for me: 由于某些原因，javascript调用对我不起作用：
Here's my layout. 这是我的布局。
index.html 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 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 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 folder contains: effects.js, lightwindow.js, prototype.js, scriptaculous.js Javascript文件夹包含：effects.js，lightwindow.js，prototype.js，scriptaculous.js
Ok, if I copy all the gallery.html code into my main index page it all works, also if I run Gallery.html by it self, the javascript also works... Thus providing it's not an error with gallery.html Images, etc all BODY content displays correctly when called from index.html (just not the javascript) (i even tried moving the scripts around, into index.html, i tried moving scripts from header to body, but none of them work) 好的，如果我将所有gallery.html代码复制到我的主索引页面中都可以正常工作，如果我自己运行Gallery.html，那么javascript也可以正常工作。因此，如果没有gallery.html图片错误，等等，当从index.html（只是不是javascript）调用时，所有BODY内容都能正确显示（我什至尝试将脚本移动到index.html中，我尝试将脚本从标头移动到主体，但是它们都不起作用）
But the error is within the DIV containing the changeable content. 但是错误是在包含可变内容的DIV中。 And not loading the javascript from other pages. 而不是从其他页面加载javascript。
Please Help someone to get my main page to run the external javascript? 请帮助某人获取我的主页以运行外部javascript吗？
ps i uploaded my site, hoping to make it easier for you guys: pss i think the error is due to the img-links on index.html not seeing the external scripts; ps我上传了我的网站，希望可以让您更轻松：pss我认为该错误是由于index.html上的img链接未看到外部脚本所致； there is no event handler attached to the images. 没有附加到图像的事件处理程序。 (but what do i do, help me someone :( ) （但是我该怎么办，请帮助我某人:(）
index2.html (click Gallery at top, and choose image (See error, page is redirected instead of javascript call from other html): mediaproject-su.netne.net/index2.html index2.html（单击顶部的库，然后选择图像（看到错误，页面被重定向，而不是其他html的javascript调用）：mediaproject-su.netne.net/index2.html
Gallery.html (to prove the JS works directly, works fine here): mediaproject-su.netne.net/Gallery.html Gallery.html（以证明JS可直接运行，在这里可以正常工作）：mediaproject-su.netne.net/Gallery.html
2 个解决方案
解决方案1
0 2011-02-01 03:53:18
The page you are AJAXing into your document is not going into another frame so it would not need to look to '.parent' to reference scripts on any of the document. 您正在AJAX进入文档的页面不会进入另一个框架，因此它无需查看“ .parent”即可引用任何文档上的脚本。 That is unless, you are really AJAXing into an iFrame, then that's a different story. 除非您真的是将AJAX集成到iFrame中，否则情况就不同了。
解决方案2
0 2011-03-21 09:28:47
Your gallery page will have an event to check when the page has loaded to get your gallery functions working. 您的图库页面将有一个事件来检查页面何时加载，以使您的图库功能正常工作。 Even if the ajax returns the javascript, you will then need to call any setup functions on the changed dom once it has successfully been inserted into your div 即使ajax返回了javascript，一旦将其成功插入div后，您仍需要在更改的dom上调用任何设置函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.