ansaurus

Question

Insert one HTML file in another dynamically?

Answer 1

+7 A:

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

Daniel Lew 2009-05-22 20:09:45

+1 — I expect this is far and away the simplest method of achieving the effect.

Ben Blank 2009-05-22 20:12:33

Thanks for the answer. How would the url change for different html files? Could you please show how the complete javascript file would look like?

2009-05-22 22:29:27

I've updated my answer with a more full example.

Daniel Lew 2009-05-22 23:30:16

I'd suggest using `document.getElementById("myiframe")` rather than `document.all.myiframe`. Firefox, at least, doesn't support the latter.

Ben Blank 2009-05-22 23:33:30

Good call, updated answer.

Daniel Lew 2009-05-23 00:00:03

Thanks again for the page. It works perfectly in IE6, but doesn't work in Firefox 3. Any idea why?

2009-05-23 00:00:33

Hmm, I don't know... I actually tested it in Firefox 3, so it ought to work there. Maybe there is something else on the page that is causing problems?

Daniel Lew 2009-05-23 00:37:01

Answer 2

A:

If the drop down is "huge" then I would suggest no longer using a drop down and looking into some of the existing autocompletion boxes out there for your language of choice.

If there are hundreds and hundreds of options a dropdown is no longer an appropriate form element.

Martin Murphy 2009-05-22 20:12:23

Answer 3

A:

You can use AJAX to accomplish this. There's a million different AJAX tutorials out there that can introduce you to the technique.

Plutor 2009-05-22 20:12:46

Answer 4

+3 A:

If you use JQuery they have a fancy function jquery('#div').load() http://jquery.com/ http://docs.jquery.com/Ajax/load

Works great and also supports GET and POST parameters.

Ballsacian1 2009-05-22 20:56:27

thanks for the link

Chris Simpson 2009-05-22 23:38:10

ansaurus

tags:

views:

answers:

Insert one HTML file in another dynamically?

related questions