Question

有2个html文件，file-1.htm和file-2.htm。还有另一个html文件test.htm，下拉列表有2个值，“Load Sample-1”和“Load Sample-2”。

这就是我想要的：从下拉列表中选择“Load Sample-1”时，file-1.htm应作为嵌套html加载到test.htm中。

现在我可以通过在test.htm中包含file-1.htm和file-2.htm的内容来实现这一点。随着下拉变大，test.htm会变得庞大。如何通过为下拉列表中的每个条目分别创建html文件来实现这一目标？

Answer 1

为什么不使用<iframe>，然后让JavaScript动态更改iframe的来源？

这是一个简单的页面，展示了如何使用它：

<html>
<head>
<script type="text/javascript">
var changePage = function() {
    var iframe = document.getElementById("myiframe");  // One of the many ways to select your iframe
    var select = document.getElementById("pageselected");
    var url = select.options[select.selectedIndex].value;
    iframe.src = url;
}
</script>
</head>
<body>
<select id="pageselected">
    <option value="page1.html">Page 1</option>
    <option value="page2.html">Page 2</option>
</select>
<input type="button" onclick="changePage()" value="Change Page" />
<iframe id="myiframe"></iframe>
</body>
</html>

你可能会问自己“为什么他不只是onchange使用<select>？嗯，我与<select> + onchange进行了一场小小的战争I detail here，但基本上使用它会使使用Internet Explorer 6或7的仅限键盘的用户完全无法访问您的网站。（不确定它是否仍在8中断。）

Answer 2

如果你使用JQuery，他们有一个花哨的函数jquery（'＃div'）。load（） http://jquery.com/ http://docs.jquery.com/Ajax/load

效果很好，也支持GET和POST参数。

Answer 3

如果下拉列表是“巨大的”，那么我建议您不再使用下拉菜单，并根据您选择的语言查看一些现有的自动完成框。

如果有数百个选项，则下拉列表不再是适当的表单元素。

Answer 4

您可以使用AJAX来完成此任务。那里有million different AJAX tutorials可以向您介绍该技术。

动态插入另一个HTML文件？

4 个答案: