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?

Answer 1

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

Answer 2

Use jquery

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

Answer 3

You have to use jQuery with load() method. Here jQuery reference about load method: http://api.jquery.com/load/

Answer 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

Answer 5

You can still use jquery to load the content through an ajax call. Take the result and delete and everthing before it, and and everything behind it. You can use regex to make sure you include any attributes of the body tag.

Then you're left with the raw body html, which you can add to the div using jQuery.

jQuery.ajax({url: 'page.html', succes:function(data, textStatus, XMLHttpRequest){
    data = data.replace(/.*<body.*?>/gi,'');
    data = data.replace(/</body>.*/gi,'');
    jQuery('#myDiv').html(data);
}});

My regex is a bit rusty so you might have to tweak that :)

Answer 6

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>