How to load a page in a div using innerHtml and javascript

Question

I am trying to change the contents of a div when i click on a link in another div. I have used the javascript function:

function load_home(){
    document.getElementById("content").innerHTML='<object type="type/html" data="home.html"  ></object>';
}

However, the page being loaded in the div 'content' is appearing as a small scrollable box. The size of the div 'content' is fixed and is occupying the part of the page i want it to. Any idea how i can change the size of that box being loaded?

Please indent your code and format it – Mar 11 '15 at 06:24 — , Mar 11 '15 at 06:24

score 0 · Answer 1 · answered Mar 11 '15 at 07:08

Well you can define a height of the object tag like this

<object type="type/html" data="home.html" height="1000"></object>

But that would also be static.

You can also use an iframe instead of object, but iframe would also have a static height.

<iframe src="home.html" height="1000"></iframe>

To make the height of your div depend upon the content you'd have get the content via an AJAX call and insert it into the div using Javascript as suggested by @Chris. And to make AJAX calls and doing HTML manipulation using Javascript I would suggest using Jquery (unless you are using and other JS framework) (ref: http://api.jquery.com/jquery.ajax/, http://www.w3schools.com/jquery/ajax_ajax.asp).

Then you can do something like:

$.ajax({
    url: 'home.html',
    success: function(data) {
        $('#content').html(data);  // assuming div#content has a auto height
    }
})

Also, you'll have to make sure have 'home.html' returns only the content to be displayed (as HTML) and not a complete HTML page (i.e., It should not have html and body tags, it should only have inner content of body tag).

How to load a page in a div using innerHtml and javascript

1 Answers1