Menu
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?
344
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.)
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
