是否将一个HTML文件动态插入另一个HTML文件？

Question

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

这就是我正在尝试的:当从下拉列表中选择"Load Sample-1“时，file-1.htm应该作为嵌套的html加载到test.htm中。

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

Answer 1

为什么不直接使用</code></a>，然后让JavaScript动态更改iframe的源呢？</div><div>以下是演示如何使用它的基本页面：</div><pre><code>&lt;html&gt; &lt;head&gt; &lt;script type=&quot;text/javascript&quot;&gt; var changePage = function() { var iframe = document.getElementById(&quot;myiframe&quot;); // One of the many ways to select your iframe var select = document.getElementById(&quot;pageselected&quot;); var url = select.options[select.selectedIndex].value; iframe.src = url; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select id=&quot;pageselected&quot;&gt; &lt;option value=&quot;page1.html&quot;&gt;Page 1&lt;/option&gt; &lt;option value=&quot;page2.html&quot;&gt;Page 2&lt;/option&gt; &lt;/select&gt; &lt;input type=&quot;button&quot; onclick=&quot;changePage()&quot; value=&quot;Change Page&quot; /&gt; &lt;iframe id=&quot;myiframe&quot;&gt;&lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><div>你可能会问自己：“为什么他不直接在<code>&lt;select&gt;</code>上使用<code>onchange</code>呢?好吧，我已经和<code>&lt;select&gt;</code> + <code>onchange</code>那个<a href="https://stackoverflow.com/questions/586936/jquery-change-on-select-and-firefox/586969#586969">I detail here</a>打了个小仗，但基本上使用它会让使用in 6或7的键盘用户完全无法访问你的网站。(不确定它是否还在8中崩溃。)</div><div></div>

Answer 2

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

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

Answer 3

如果下拉列表是“巨大的”，那么我建议不要再使用下拉列表，而是查看一些现有的自动补全框来选择您所选择的语言。

如果有成百上千的选项，下拉列表就不再是合适的表单元素。