2012-02-11 82 views
0

我正在构建一个简单的网站,它由一个标题(标题和一个菜单)和一个表格组成,其中放置了内容(因为这样我可以使布局更容易)。问题是,每当我改变类别(点击菜单中的一个链接),整个网站在加载时就变成白色。我喜欢它,所以这不会发生,所以我只需要加载表的内容,而不是整个页面。我想这可以很容易地使用框架来完成,但我被告知他们很快就会停止支持,并且使用它们是一种不好的做法。有没有办法做到这一点?如何使用Javascript将HTML代码加载到表中?

目前,该网站在这里,所以你可以看到我在说的效果: http://bljak.org:1235/index.html

另外,它会是最好的,如果网站只是HTML和Javascript,因为我不太熟悉PHP(我正在编写一个带有512Mb RAM的上网本,所以我怀疑我可以启动服务器那里)。

+0

不知道人们仍然以这种方式制作网站,除了可能是tor浏览器!但你可以做一个jQuery.Ajax({});但这可能有点过头 – davethecoder 2012-02-11 16:17:29

+0

这样做网站有什么不好吗? – corazza 2012-02-11 16:51:26

回答

1

我会给基于jQuery的方式 - 这是最简单和短期的方式。

首先,下载最新的jQuery库 - 可以找到here

假设你命名你的本地文件“jquery.min.js”在你现有的HTML代码,行“包括” jQuery库:

<script type="text/javascript" src="jquery.min.js"></script> 

现在,所有你需要的是这个代码在您的网页就大功告成了:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a").bind("click", function() { 
      var href = $(this).attr("href"); 

      //bust nasty browser AJAX cache: 
      href += "?nnn=" + parseInt(Math.random() * 1000000); 

      $("#Container").load(href); 
      return false; 
     }); 
    }); 
</script> 

更换集装箱在你的页面的实际元素应包含“身体”的ID,然后点击任何链接会导致链接的页面被装入集装箱没有完整页面重新加载。

该代码非常简单,可以随时询问您是否想了解它的任何部分。

jQuery小于100K,所以对于现代互联网速度来说,它确实不应该是任何问题 - 纯JavaScript当然是可能的,但会导致很多让它跨浏览器的麻烦。

+0

这是我正在寻找的内容。非常感谢你! – corazza 2012-02-12 13:05:51

+1

干杯@Bane,很高兴我能帮上忙。 :) – 2012-02-12 13:06:19

+0

但是,似乎有错误:XMLHttpRequest无法加载文件:/// C:/Documents%20and%20Settings/user/Desktop/Latinski/izgovorigs.html。 Access-Control-Allow-Origin不允许Origin null。我该怎么做,这是什么意思? – corazza 2012-02-12 13:11:35

1

您可以使用innerHTML改写标签和结束标记之间的文本:

<script type="text/javascript"> 
function changeText(){ 
    document.getElementById('tbl').innerHTML = '<table><tr><td>New Text</td></tr></table>'; 
} 
</script> 
<div id="tbl"></div> 
<input type="button" onclick="javascript:changeText()" value="Change Text"/> 
+0

当然可以。但是,这意味着我需要将整个HTML页面(或者只是一个表格)复制到单个语句中,并且进行更改会有点痛苦......我正在寻找类似的东西,但不直接将代码此外,当我尝试将该表复制到引号中时,它有点打破了某个位置(引号)... – corazza 2012-02-12 11:59:37

相关问题