Load external page into <DIV> [Archive]

View Full Version : Load external page into <DIV>

Ducimus

01-29-2008, 12:43 AM

Ok, here goes

I've been recoding this site to get around different issues with SEO and outdated standards. It's a general product site where there is a list in a <div> on one side of the page and another <DIV> next to it on which i've ID'd as "content"

I then wanted to build each product on it's own little html page just to make it quick and easy - and intentionally faster as it's only changing the content on one area of the apge.

I intiailly used the dreaded "<iframe>" and got no shortage of issues. so went looking about to externally load html into divs I then found innerHTML which of course works nice for the initial loading, but I cant figure out how to code it so when I click on the link on the left, it changed the content on the right. That's problem one. Problem 2 - As everyone knows (and I found out) Firefox does not support innerHTML - so now i'm back where I started.

Suggestions?

The page is posted at : dev.toraenergy.com/wind2.html

Any help suggestions PLEASE? Thanks in advance.

Nile

01-29-2008, 01:18 AM

Firefox does support innerHTML, I use it all the time!

Ducimus

01-29-2008, 03:20 AM

Not quite sure how I can make it work in this instance... in the case I am using, I am using the IFrame to pull the content... in this instance, FF pulls the full page back in...
and leaves the content out. plus still not sure how to make the content change on the click. The new coder tag under my name is a misnomer... I'm a REALLY new coder

Nile

01-29-2008, 03:25 AM

Ducimus

01-29-2008, 06:08 AM

so, how would i mod it to import the full html page into the div based upon an href?

bear with me, i'm still new at the coding and just want to get this out the door, i'm signed up for a few classes in the spring, but have redone this page so many times to try to get it to work properly, i've just managed to get myself lost.

i believe from what i've read it would put
<a href="xxx.html" onclick='changeURL ()'>xxx</a> for the command and

<div id="content" style="width: 10.63em; height: 23.31em; overflow: auto;">
<script type="text/javascript">
function changeURL(){
document.getElementById("content").innerHTML = 'original.html';
}
</script>
</div>

there's so much to start with (again proof that a print designer should run away from a webpage-but i'm trying)

codeexploiter

01-29-2008, 08:17 AM

If you want to display a page which is not in your domain then I think you have to use iframe. AJAX could be used if the page you want to display is in your domain itself (AJAX doesn't work across domains).

Using the 'innerHTML' property you can change the content of an element but in your case the content should come from another domain and that creates the difficulties.

The code you've furnished in your code will display 'original.html' (without single quotes) in the mentioned div element.

That was the state if you try to tackle the problem only with client-side technologies.

You can try to do it using a server-side tool like PHP. Please have a look at the following code snippet:

<?
print "<html><head></head><body><div id='content'>";
include("http://www.yourdestinationsitename.com/yourpage.htm");
print "</div></body></html>";
?>

Please note that you need to change your server settings to make this cross domain file inclusion to work. You need to edit your server's php.ini files to make this possible:

1. Open the mentioned file.

2. Search for the following lines in the file

allow_url_include = Off

3. Change the value to On from Off. By default it will be Off state.

4. Restart the web server and now the remote file inclusion will work without any problem.

molendijk

01-29-2008, 11:59 AM

This (http://www.dynamicdrive.com/forums/showthread.php?t=28620) might be of help, or this (http://molendijk.110mb.com/LoadPartsOfPage/start.html)?

Arie Molendijk

Ducimus

01-29-2008, 02:50 PM

Ducimus

01-29-2008, 11:53 PM

Another thing I was reading was about Ajax... would it work?

codeexploiter

01-30-2008, 04:11 AM

CE - I didn't mention, but in this case the product pages are within my domain, not external sources. (And PHP is not a thing I know antything about yet)

M - your second example looks closer to what i'm trying to accomplish but will still have to muddle thru it a bit

I'm sure i'll have more q's before i'm thru here

That was a critical information that you've missed to furnish in your posting. If the page you are trying to load in another page is in your domain then we can go for AJAX. But personally I feel that if you can use a solution based on Server-side like SSI (server-side includes), PHP, etc.

Please find an AJAX based solution below which includes a HTML page file content in a div element in another page.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">
function ajaxFunction(id, url){
var xmlHttp;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
var respText = xmlHttp.responseText.split('<body>');
elem.innerHTML = respText[1].split('</body>')[0];
}
}

var elem = document.getElementById(id);
if (!elem) {
alert('The element with the passed ID doesn\'t exists in your page');
return;
}

xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
</head>

<body>
<div id="test"></div>
<form>
<input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');"/>
</form>
</body>
</html>

You can use the code in your case but with your element ID and page name.

Note that in this demo page my assumption is that you just want to load some HTML page content. Thats why I've extracted only those items that falls within its body section. If the body section needs any script file inclusion then you have to change the extraction section according to your needs.

Hope this help

molendijk

01-30-2008, 12:51 PM

Hello Codeexploiter,
1. respText[1] should be respText[0].
2. The problem with ajax is that is does not correctly render é, à, etc.

Arie Molendijk.

Medyman

01-30-2008, 01:56 PM

have you looked at this: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

I have to agree with codeexploiter though, PHP (or some other server side language) is probably the way to go. It'll save you so much time and frustration in the long run.

But then again,if SEO was your concern, this might prove an issue.

Ducimus

01-30-2008, 03:02 PM

CE - Thank you so much, extracting what was between the body tags was exactly what i was after. Thank you so much.

One last little thing, though I'll be plugging away at it on my own, can you point me in the direction of good tutorials for learning some of this stuff - (i suppose most usefully would be php to start) - relying on others to write it for me on forums such as this isn't going to help me in the long run

THanks Again

codeexploiter

01-31-2008, 03:09 AM

You can find some of the sites from which you can learn AJAX and PHP below. But I am sure that there are lots of sites available with the learning stuff on both technologies if you use google efficiently.

AJAX Tutorials

http://developer.mozilla.org/en/docs/AJAX
http://www.w3schools.com/ajax/default.asp
http://www.maxkiesler.com/index.php/weblog/comments/60_more_helpful_ajax_tutorials/ - with examples
http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html

PHP Tutorials

http://www.tizag.com/phpT/
http://www.w3schools.com/php/default.asp
http://www.php-mysql-tutorial.com/
http://www.phpfreaks.com/tutorials.php

Ducimus

01-31-2008, 06:50 AM

two more little questions.. can I make the ajax load a default page? and is there a way to use text rather than buttons to do the onclick ie in the <a href> style?

Sorry to keep asking but as I mentioned before, I'm just trying to get this out of the way so I can focus more on starting my edumacation :)

cond0r

04-08-2009, 11:00 PM

You can find here (http://www.fancyload.com/) a nice web tool to load and animate external pages into a "DIV", "P", "IFRAME" by reading URL anchor .

molendijk

04-08-2009, 11:13 PM

They fancyly destroy the history button.
===
Arie.

cond0r

04-09-2009, 07:40 AM

Can you be more precise ....

They fancyly destroy the history button.
===
Arie.

cond0r

04-09-2009, 08:23 AM

Only in IE 6 and IE 7 .

molendijk

04-09-2009, 09:40 PM

Only in IE 6 and IE 7 .
Only?

dominicdesign

09-17-2013, 01:37 PM

That was a critical information that you've missed to furnish in your posting. If the page you are trying to load in another page is in your domain then we can go for AJAX. But personally I feel that if you can use a solution based on Server-side like SSI (server-side includes), PHP, etc.

Please find an AJAX based solution below which includes a HTML page file content in a div element in another page.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">
function ajaxFunction(id, url){
var xmlHttp;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
var respText = xmlHttp.responseText.split('<body>');
elem.innerHTML = respText[1].split('</body>')[0];
}
}

var elem = document.getElementById(id);
if (!elem) {
alert('The element with the passed ID doesn\'t exists in your page');
return;
}

xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
</head>

<body>
<div id="test"></div>
<form>
<input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');"/>
</form>
</body>
</html>

You can use the code in your case but with your element ID and page name.

Note that in this demo page my assumption is that you just want to load some HTML page content. Thats why I've extracted only those items that falls within its body section. If the body section needs any script file inclusion then you have to change the extraction section according to your needs.

Hope this help

Hi,

Your code work very well for me but my script doesn't work anymore... i need help!

Thanks

jscheuer1

09-17-2013, 05:06 PM

Hi,

Your code work very well for me but my script doesn't work anymore... i need help!

Thanks

This is an old thread, and that question is rather vague. And I'm not sure if codeexploiter is still around or not.

So I'm closing this thread.

Feel free to start a new thread, you can even link back to this one if you like. But please include a link to your page so we can check it out, and explain what your code did before that it is no longer doing.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.