How to load a page in a div using innerHtml and javascript [duplicate]

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

user2273202
– user2273202

2015-03-11 06:24:30 +00:00
Commented Mar 11, 2015 at 6:24 — user2273202
– user2273202, Commented Mar 11, 2015 at 6:24

Debanshu Kundu · Accepted Answer · 2015-03-11 07:08:01Z

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

Collectives™ on Stack Overflow

How to load a page in a div using innerHtml and javascript [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related