动态插入另一个HTML文件?

use*_*262 2 html javascript

有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的内容来通过javascript实现这一点.随着下拉变大,test.htm会变得庞大.如何通过为下拉列表中的每个条目分别创建html文件来实现这一目标?

Dan*_*Lew 8

你为什么不用一个<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>
Run Code Online (Sandbox Code Playgroud)

你可能会问自己:"为什么他不直接使用onchange<select>?嗯,我有一个小规模战争与去<select>+ onchange我在这里的细节,但基本上都采用它使你的网站完全不能访问键盘只有谁使用互联网用户Explorer 6或7.(不确定它是否仍在8.中断)

  • 我建议使用`document.getElementById("myiframe")`而不是`document.all.myiframe`.至少Firefox不支持后者. (2认同)

Bal*_*an1 5

如果你使用JQuery,他们有一个奇特的函数jquery('#div').load () http://jquery.com/ http://docs.jquery.com/Ajax/load

效果很好,还支持GET和POST参数.