Question

我有这个javascript代码和下面的HTML代码。我想要做的是当我在下拉列表中选择一个选项时，子文件夹上的index.html文件将显示在div上。

<script>
 function display() {
var cake = document.getElementById("type").value;
document.getElementById("cakes").innerHTML = '<object type="text/html" 
data="\'+cake+'\index.html" >   </object>';
}
</script>

<body>
<center><img src="LOGO.jpg" size=20%></img></center>
<p><center><font face="Brush Script MT" size="32" color="lightblue"`enter code here`>YOU'RE SO 
SWEETS</font></center></p>
<table>
<tr>
<td><img src="home.png"></td>
<td><img src="product.png"></td>
<td><img src="online.png"></td>
<td><img src="about.png"></td>
<td><img src="contact.png"></td>
</tr>
</table>
<br>
<select id="type" multiple onchange="display()">
<option value="special">Specialty Cakes</option>
<option value="adult">Birthday Cakes for Adult</option>
<option value="kids">Birthday Cakes for Kids</option>
<option value="wedding">Wedding Cakes</option>
</select>
<br>
<div id="cakes"></div>

Answer 1

您应该使用Ajax加载Div中的内容。您可以从任何好的教程中了解ajax。起点可能是 -

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

更新：

根据您的评论，我的理解是 -

您可以使用jquery并在代码中使用以下代码段的变体来自将在select的onchange事件中触发的任何函数。你需要附上jquery库。

$('#your-div-id').load('your-html-page.html');

感谢。

Answer 2

如果你想做丑陋的方式，可以使用iframe并更改src。

如果你想做漂亮的方式（这是大多数网站现在做的事情），使用Ajax将内容加载到div中，特别是因为使用Ajax，内容将真正加载到div，而iframe你只需在其中打开另一个HTML，如果你最终需要检查其中的内容，那将会更加困难。 Ajax将是我的选择（我从不使用iframe）

如果您不了解Ajax，我建议检查prototypejs或jQuery如何实现它。这很容易，并且可以让您更好地控制插入div中的内容。

如何在div中显示另一个html文件

2 个答案: