Loading external pages/seperate pages in a div

H

HateEternal

Mac Metal Head
Is there anyway, through javascript and the DOM (or any other way) to load any specified html file into a div, so in a way the div is used like a frame would be?

I am just trying to find a way to replace frames with divs alone. I know how to set a div's HTML through javascript but I don't know how to load any external html. I have been searching and have not yet found a way. I expect that if there is a way, it is ugly and not worth it.

Let me know if you have a way to do it, its probably more of geek wanting to know how something works more than practical use.
 
i wish this could be done easilly. The only way is to have an iframe within the div tag thgen target that iframe....
 
mrfluffy said:
xmlhttprequest can load html (porbably not a whole page though cos there'd be 2 body/head tags) into a div, Apple have a tutorial - http://developer.apple.com/internet/webcontent/xmlhttpreq.html

and I'm working on a web-based Delicious Library which uses it - http://www.dottom.co.uk/library/ (really not finished)
Click to expand...

cool, I'll give it a try. it shouldn't be a problem with the 2 body/head tags. Worst case I'll just leave the head and body tags off my dynamic content.
 
Perhaps this is a stupid question, but is there any reason not to use PHP? It may depend on what exactly you are trying to achive and PHP may not be the best solution, but anyway ...
Code: 
<?php include "filename"; ?>
 
Cat said:
Perhaps this is a stupid question, but is there any reason not to use PHP? It may depend on what exactly you are trying to achive and PHP may not be the best solution, but anyway ...
Code: 
<?php include "filename"; ?>
Click to expand...

Ok, so you know how iframes work? So say I made a website with a content frame and a navigation div. When I click on a link in the nav it opens the new page in the iframe. I want to be able to do the same thing but only using divs. You can make scrollable divs, which is not a problem, but I don't know how to load html from a separate file in the div if a link is clicked. So it would be functionally the same as using an iframe... but not using an iframe. Biggest benefit is that I can make pages for my class that validate strict and still have the same functionality.
 
HateEternal said:
Ok, so you know how iframes work? So say I made a website with a content frame and a navigation div. When I click on a link in the nav it opens the new page in the iframe. I want to be able to do the same thing but only using divs. You can make scrollable divs, which is not a problem, but I don't know how to load html from a separate file in the div if a link is clicked. So it would be functionally the same as using an iframe... but not using an iframe.
Click to expand...

You'd have to use a few different methods combined for it to work. The PHP include for the content, and JS for the links to know which to use.

You're probably better off in the long run keeping it more 'traditional' as separate pages. That'll go better towards standards compliance and accessibility/usability.
 
i think he wants to make divs load external documents without complete page reload, is this right hateeternal? If so, this cannot be done, you need to have an iframe the dimensions of your div and target the iframe in the nav. You will be able to still hide and show the div's with JS. But I totally agree there should be something like <div src="your_externaldoc.php">
 
andehlu said:
i think he wants to make divs load external documents without complete page reload, is this right hateeternal? If so, this cannot be done, you need to have an iframe the dimensions of your div and target the iframe in the nav. You will be able to still hide and show the div's with JS. But I totally agree there should be something like <div src="your_externaldoc.php">
Click to expand...

exactly, no page reload.
 
There is a way to do it, but it's a really bad idea. It would be worse accessibility/usability wise than using an iFrame or frames. I went through this very same problem for 6 months trying to figure out a solution, nothing usable was found. WSG has had similar requests in the past, same result...not viable.
 
mdnky said:
There is a way to do it, but it's a really bad idea. It would be worse accessibility/usability wise than using an iFrame or frames.
Click to expand...

interesting... can you explain?
 
One way would be by using a combination of CSS and Javascript. Kind of a show/hide routine. Give each link's contents a DIV on one page, show and hide through CSS and JS. Like I said, it's a dirty trick and definitely an accessibility/usability nightmare. Would be horrible in browsers that don't have JS enable or aren't CSS capable. People using screen readers would really have it tough.

The other way is using a hidden iFrame (iframe buffer technique) to load the content into, then using innerHTML to transfer that to the DIV. Not a very 'browser friendly' way.
 
mdnky said:
The other way is using a hidden iFrame (iframe buffer technique) to load the content into, then using innerHTML to transfer that to the DIV. Not a very 'browser friendly' way.
Click to expand...

HAH! wicked, thats an amzing idea. I could see the issues for sure but at least it would work....good call mdnky.
 
Not my idea, just a remnant from the days of yore. I would strongly recommend against using it on any 'production site'.
 
You must log in or register to reply here.
Back
Top