Question

我花了这么长时间试图通过ajax来实现这个多页面。

首先我使用了本教程：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也可以工作......因此提供它不是库的错误。 HTML 图像等所有BODY内容在从index.html（只是不是javascript）调用时正确显示（我甚至尝试将脚本移动到index.html中，我尝试将脚本从标题移动到正文，但它们都不起作用）< / p>

但错误在包含可更改内容的DIV中。而不是从其他页面加载javascript。

请帮助某人让我的主页运行外部JavaScript？

P.S。我上传了我的网站，希望能让你们更轻松： p.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

Answer 1

您在文档中进行AJAX的页面不会进入另一个框架，因此不需要查看“.parent”来引用任何文档上的脚本。这是除非，你真的是AJAXing到iFrame，然后这是一个不同的故事。

Answer 2

您的图库页面会有一个事件来检查页面加载的时间，以使您的图库功能正常工作。即使ajax返回javascript，您也需要在已成功插入div后调用已更改的dom上的任何设置函数

为什么AJAX div加载html，但不调用其他html的javascript？

2 个答案: