Question

我正在开发一个纯HTML5和小Javascript的网页。

我想在页面文本附近创建菜单，当我点击其中一个菜单链接时，它将包含并显示其他html页面的竞争。那样：

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

我读到了关于帧和i帧的内容，我决定不想使用它们，而是使用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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function doPage()
{
    var objTag = document.getElementById("contentarea");
    if (objTag != null)
    {
    	objTag.setAttribute('data', 'http://stackoverflow.com/');
    	alert('Page should have been changed');
    }
}
</script>
</head>
<body>
<form name="Form1" method="POST">
<p><input type="button" value="Click to change page" onclick="doPage();" /></p>
<object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="http://stackoverflow.com/"></object>
</form>
</body>
</html>

Answer 2

以下是我会考虑做的事情

<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
   });
});

<强>更新
由于某些浏览器不允许本地页面被ajaxed（这就是.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>

Answer 3

您可以在每个链接上执行onclick操作。

基于你的例子： $（＆＃34;对象＆＃34）。ATTR（＆＃34;数据＆＃34;＆＃34; text2.html＆＃34）;

类似的东西：

 <center>
    <right>
    <li onclick="$('object').attr('data','text1.html')">link 1</li>
    <li onclick="$('object').attr('data','text2.html')">link 2</li>
    <li onclick="$('object').attr('data','text3.html')">link 3</li>
    </right>
    <left>
    <object data="text1.html" type="text/html"></object>
    </left>
    </center>

我头晕目眩。你必须使用jquery。

作品jst罚款： http://jsfiddle.net/rws8pa8z/

单击“超链接”后，在同一页面中显示对象

3 个答案: