8

I've been told that using Divs instead of iframes is the way forward, so I'm using frames from my banner and main body. How do I load my index.html into my div?

124697
  • 22,097
  • 68
  • 188
  • 315
  • 6
    whoever told you that has a screw loose. – Thomas Shields May 24 '11 at 15:26
  • 1
    Take a look at this answer: http://stackoverflow.com/questions/6001118/display-element-from-other-page-on-my-site-with-document-getelementbyid/6001162#6001162 – Daniel O'Hara May 24 '11 at 15:27
  • 5
    To follow up slightly on what @Thomas Shield says, there is a school of thought nowadays that rather than using iframes, we should insert content into page elements using javascript (jQuery, or innerHTML or whatever). I have never seen a good justification for this. I imagine the people who think this good idea are also the people who think all that #! pure-Ajax Gawker monstrosity site design is a good idea, ie total barmcakes who should not be allowed near a computer. – Tom Anderson May 24 '11 at 15:32
  • 2
    @Tom Anderson agreed, but to be fair there are definitely times to use AJAX to dynamically load some content at realtime. But if you just want one page loaded into another at runtime, use server side includes, or if you must have an entirely different page in - use iframes. that's what they're there for. – Thomas Shields May 24 '11 at 15:35
  • @TomAnderson There is no need to serve content using iframes. Get the server to concatenate pages together. There is also nothing wrong with pure ajax websites as long as they offer a non-js alternative. Besides iframes are potential security risks. – Raynos May 24 '11 at 15:39
  • @Raynos: I agree that doing composition server-side is usually right. There are times where it isn't; then, iframes are the right tool. What are the security risks associated with iframes? – Tom Anderson May 24 '11 at 15:44
  • @TomAnderson XSS attacks coming in from 3rd party iframes. Generally things like loading youtube videos or facebook like buttons in iframes. – Raynos May 24 '11 at 15:57
  • 1
    One other point, using javascript/iframes to import the code would be bad for search engine optimisation. Google etc won't be able to read the code in your header. If this includes your navigation then it may limit how much of your site it can crawl. I think it sounds like you are after a PHP include or an ASP.NET MasterPage solution really. However, I've provided an answer on how to do this with Javascript/jQuery below. – Curtis May 24 '11 at 15:59
  • @Raynos: Point taken about XSS attacks, but if you're loading 3rd party content, isn't loading it directly into the DOM tree even worse? – Tom Anderson May 24 '11 at 16:45
  • @TomAnderson yes and no. The ideal solution would be to access their data through a well defined REST api and then render relevant DOM nodes yourself. Basically use the templates they give you and render them with their REST data. – Raynos May 24 '11 at 16:58

6 Answers6

6

did u try .load() of jquery. with server side technology you can do this easily.

MLS
  • 885
  • 1
  • 9
  • 16
6

Using jQuery:

jQuery('#myDiv').load('http://example.com/somefile.html');

Without jQuery:

var request = new XMLHttpRequest();
request.open('GET', 'http://example.com/somefile.html', true);
request.onreadystatechange = function (anEvent) {
   if (request.readyState == 4) {
      if(request.status == 200) {
         document.getElementById("myDiv").innerHTML = request.responseText;
      }
   }
};
request.send(null);

Typically I use this approach to load small snippets of content dynamically. It's probably a bad idea to use a div if you're loading an extremely large amount of content (like an entire page). An iframe would be better for that scenario.

Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
2
$(".divClassHere").load("url path here");

However, it sounds to me more like you're after a MasterPage structure (if you've got ASP.NET) or file imports

Curtis
  • 101,612
  • 66
  • 270
  • 352
2

Some people say that objects instead of iframes is the way forward. But divs and iframes are completely different things. An iframe is like a separate page within the page. It has a different context, different scripts, different css... A similar result can be achieved using object. But nothing like this can be done with a div.

You can load content into a div. You can use javascript to alter the content of a div. With an ajax call you can get the contents of an url which can be put in the div using javascript.

But this is entirely different from iframes.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
1

You create a separate page for each distinct document you have, then you use some form of template or include system to duplicate common content automatically.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Which serverside language you are using?

first try to use your Serverside language to achive this. For example if you are using PHP you can use include

and if you are usind coldfusion consider using cfinclude

and if you a told to do it through javascript then the only way is Ajax.

user160820
  • 14,866
  • 22
  • 67
  • 94
  • Don't grab your includes over HTTP. That is inefficient and more likely to run into bits of configuration being turned off in shared hosting. – Quentin May 24 '11 at 15:35