loading html page inside div

Question

how can I load an html page inside a div. With the 'object' tag it's loading, but I think it's not a good approach. It is not an external file. Is dojo good for this?

Solution 1

This also works... using dojo...

<script type="text/javascript">
var url = dojo.moduleUrl("dijit.form", "help.html");
dojo.xhrGet({
  url: url,
  load: function(html){
       dojo.byId("mycontent").innerHTML = html;
  }
});
</script>

<div id="mycontent">

</div>

Update:

In Dojo 1.7+, use require.toUrl instead of dojo.moduleUrl

Solution 2

Use jquery

$("#mydiv").load("myexternalfile.html");

Solution 3

I'm not completely sure what you're looking for, but if you're wishing to display an HTML document inside another HTML document then I think the only way to do this is to use an iframe. Check out this tutorial: http://www.designplace.org/tutorials.php?page=1&c_id=1

Perhaps you could load the HTML document and strip away the HEAD and wrapping BODY elements and then insert the code into the DIV element.

EDIT: Ah, no iframes you said. Well, then I propose the latter. ^^

Solution 4

No reason to use jQuery just to load content to your page (e.g. only to one div) if there is no another tasks which need framework's functions :)

This should be done with AJAX basics. Check this out: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

View more solutions