如何在div中顯示另一個html文件

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 個解決方案

解決方案1
1 2014-10-19 01:53:03

解決方案2
0 已采納 2014-10-19 01:45:51

如何在div中顯示另一個html文件

問題描述

2 個解決方案

解決方案1 1 2014-10-19 01:53:03

解決方案2 0 已采納 2014-10-19 01:45:51

解決方案1
1 2014-10-19 01:53:03

解決方案2
0 已采納 2014-10-19 01:45:51