javascript - 单击超链接后在同一页面显示对象

Question

我正在开发一个将在纯 HTML5 和小型 Javascript 上运行的网页。

我想在页面文本附近创建菜单，当我单击其中一个菜单链接时，它将包括并显示其他 html 页面的内容。像那样:

http://i.stack.imgur.com/ravwC.png

我阅读了有关 frames 和 i frames 的内容，我决定不想使用它们，而是使用 Object。

这是我的想法:

<center>
<right>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</right>
<left>
<object data="text.html" type="text/html"></object>
</left>
</center>

如何在单击菜单链接时显示和更改同一页面中其他 html 文件的内容？

Answer 1

下面是我会考虑的做法

<right>
  <ul id="nav">
    <li><a href="page1.html">link 1</a></li>
    <li><a href="page2.html">link 2</a></li>
    <li><a href="page3.html">link 3</a></li>
  </ul>
</right>
<left>
  <div id="content"></div>
</left>

$(function() {
   $("#nav > li > a").on("click",function(e) {
     e.preventDefault(); // stop the link
     $("#content").load(this.href); // href must come from same origin as the script
   });
});

更新
由于某些浏览器不允许本地页面使用 ajax(这是 .load 所做的)为什么不在基于硬盘的页面上使用 iFrame - 它可以在所有浏览器上运行而无需任何脚本:

<right>
  <ul id="nav">
    <li><a href="page1.html" target="if1">link 1</a></li>
    <li><a href="page2.html" target="if1">link 2</a></li>
    <li><a href="page3.html" target="if1">link 3</a></li>
  </ul>
</right>
<left>
  <iFrame name="if1"></iframe">
</left>