Home/ Questions/Q 211341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:05:12+00:00

There are 2 html files, file-1.htm and file-2.htm. There is another html file, test.htm,

  • 0

There are 2 html files, file-1.htm and file-2.htm. There is another html file, test.htm, with a drop-down having 2 values, “Load Sample-1” and “Load Sample-2”.

This is what I am trying:
When “Load Sample-1” is selected from the drop-down, file-1.htm should be loaded as a nested html in test.htm.

Right now I am able to achieve this through javascript by having the content of file-1.htm and file-2.htm inside test.htm. Bt as the drop-down grows bigger, test.htm would become huge. How can this be achieved by having separate html files for each entry in the drop-down?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why don’t you just use an <iframe>, and then have the JavaScript dynamically change the source of the iframe?

    Here’s a bare-bones page demonstrating how to use this:

    <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>

    You may be asking yourself “why did he not just use onchange for the <select>? Well, I’ve got a little war going with <select> + onchange that I detail here, but basically using it makes your website completely inaccessible to keyboard-only users who are using Internet Explorer 6 or 7. (Not sure if it is still broken in 8.)

    • 0