load HTML into <div>

**jersey** · 07-18-2005, 03:18 PM

is it possible to have a link load a HTML page into a <div> ?

if that doesn't make sense, its be cause i really don't know what i am doing (haha)

thanks to anyone who can help me out ...
-dan n.

**felgall** · 07-18-2005, 03:48 PM

Javascript can't read files so the entire code to be loaded would need to be within the Javascript itself.

**jersey** · 07-18-2005, 06:30 PM

Originally Posted by felgall

Javascript can't read files so the entire code to be loaded would need to be within the Javascript itself.

ok, i guess i will start there ...

thanks

**Nedals** · 07-18-2005, 07:01 PM

Check out javascript's 'innerHTML'

**Ultimater** · 07-18-2005, 07:06 PM

Originally Posted by Nedals

Check out javascript's 'innerHTML'

That's the right idea. Use an IFRAME to append to the DIV.

Untested:(note I write flawless javascript code 95% of the time)

Code:

<div id="frameContainer"></div>
<script type="text/javascript">
onload=function(){
var el=document.getElementById("frameContainer")
el.innerHTML="<iframe src=\"http://www.yahoo.com\"></iframe>"
}
</script>

**Willy Duitt** · 07-18-2005, 08:15 PM

Yes, it is possible to load a page into a division without the use of an iframe...

Code:

<!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>mouseover image position</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body
   {
    background-color:#aaaaff;
   }
#one
   {
    position:absolute;
    left:50%;
    top:50%;
    margin:-150px 0 0 -250px;
   }
object
   {
    width:500px; 
    height:300px; 
    border:solid 1px #000000;
   }
 /*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}

//]]>
</script>

</head>
<body>

<div id="one">
<object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
</div>
<div>
<a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">this is an object test not an iframe test</a>
</div>

</body>
</html>

.....Willy

**jersey** · 07-19-2005, 10:03 PM

Originally Posted by Willy Duitt

Yes, it is possible to load a page into a division without the use of an iframe...

Code:

<!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>mouseover image position</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body
   {
    background-color:#aaaaff;
   }
#one
   {
    position:absolute;
    left:50%;
    top:50%;
    margin:-150px 0 0 -250px;
   }
object
   {
    width:500px; 
    height:300px; 
    border:solid 1px #000000;
   }
 /*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}

//]]>
</script>

</head>
<body>

<div id="one">
<object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
</div>
<div>
<a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">this is an object test not an iframe test</a>
</div>

</body>
</html>

.....Willy

Willy, this works perfect ...
thanks you .. but i ran into one problem, i don't know if it is possible to get around,
my page also has a flash header, so when i alter the <object> tag
my flash piece is altered ...
if this can't be avoided, i'll have to think of something different ..
thanks again,
dan

**Che** · 07-20-2005, 12:58 AM

I already posted this HERE

PHP Code:


function processAjax(url) {

    



    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = targetDiv;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = targetDiv;

        req.open("GET", url, true);

        req.send();



      }

    }

}



function targetDiv() {

    if (req.readyState == 4) { // Complete

          if (req.status == 200) { // OK response

              document.getElementById("MyDivName").innerHTML = req.responseText;

          } else {

            alert("Problem: " + req.statusText);

          }

    }

}

Put the above in the header, then call it with the following:

PHP Code:


<a href="javascript:processAjax('www.yahoo.com');">CLICK ME</a>

<div id="myDivName"></div>

Should work!

**mick28** · 02-18-2007, 02:08 AM

I tried the ajax method and it won't permit any urls that don't exist on the same server as the page the script is on.

I worked around this by attaching the requested url as a variable to the url of a php script that just collects the source and returns it (echo file_get_contents($_GET['url']); ).

Now it works with any url local or remote

**konithomimo** · 02-18-2007, 08:54 AM

Originally Posted by jersey

Willy, this works perfect ...
thanks you .. but i ran into one problem, i don't know if it is possible to get around,
my page also has a flash header, so when i alter the <object> tag
my flash piece is altered ...
if this can't be avoided, i'll have to think of something different ..
thanks again,
dan

Give your flash an ID or a class and then use CSS to set the style for it. The CSS given works for all objects, but if you give your flash object a class then you can do:

object.myclass
or
.myclass

or if you give it an ID then simply:

#myobject

where myclass and myobject are replaced with the identifiers you choose.

**tcdahlberg** · 02-20-2007, 03:09 PM

Che posted some great code for placing html files dynamically into a DIV tag. I was very excited to find this script. I implemented the script on one of my sites and it worked great. Unfortunately, when I went to make a google sitemap none of the links would show. I thought, great, I can't use this for anything if it is not SEF friendly. Well, I think I found a way to make this work with Search Engines. I have included Che's great code work below with just a few small modifications (one in the script and one in the URL used to reference the script). With these modifications I was able to easily generate a google sitemap xml file.

PHP Code:


function processAjax(url) {

    



    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = targetDiv;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = targetDiv;

        req.open("GET", url, true);

        req.send();



      }

    }

  return false;

}



function targetDiv() {

    if (req.readyState == 4) { // Complete

          if (req.status == 200) { // OK response

              document.getElementById("MyDivName").innerHTML = req.responseText;

          } else {

            alert("Problem: " + req.statusText);

          }

    }

}

Put the above in the header, then call it with the following:

PHP Code:


<a onclick="return processAjax(this.href)"  href="/internal-link.html">CLICK ME</a>

<div id="myDivName"></div>

Works for me, but any suggestions are welcome.

**Van Helsing** · 08-21-2007, 01:40 PM

I could not get this working,

all I get is this alert: "Problem: OK"

??

**gemelli2** · 01-30-2008, 09:04 AM

Originally Posted by Che

I already posted this HERE

PHP Code:


function processAjax(url) {

    



    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = targetDiv;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = targetDiv;

        req.open("GET", url, true);

        req.send();



      }

    }

}



function targetDiv() {

    if (req.readyState == 4) { // Complete

          if (req.status == 200) { // OK response

              document.getElementById("MyDivName").innerHTML = req.responseText;

          } else {

            alert("Problem: " + req.statusText);

          }

    }

}

Put the above in the header, then call it with the following:

PHP Code:


<a href="javascript:processAjax('www.yahoo.com');">CLICK ME</a>

<div id="myDivName"></div>

Should work!

hi Che - i used your script and have gotten it to work but i still have the problem of the url that is loaded into the div seems to be losing its css styling, its loading into the bottom of the div and the url i'm refering to is a spry sliding panes which also is not being loaded. i'm just seeing the text. any idea of how to get this resolved?
here's the page: http://www.marshall-legacy.org/about...s22test22.html

--->on the left menu the "recent news" link is the one in
question.
--->you can see the page that i'd like loaded and what its supposed
to look like by clicking on the "where were working" link

ALSO --- is this the best way to approach this? Any thoughts,
suggestions??

thanks in advance for any help at all!!! i need it.

**gemelli2** · 01-30-2008, 09:12 AM

Originally Posted by Che

I already posted this HERE

PHP Code:


function processAjax(url) {

    



    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = targetDiv;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

      req = new ActiveXObject("Microsoft.XMLHTTP");

      if (req) {

        req.onreadystatechange = targetDiv;

        req.open("GET", url, true);

        req.send();



      }

    }

}



function targetDiv() {

    if (req.readyState == 4) { // Complete

          if (req.status == 200) { // OK response

              document.getElementById("MyDivName").innerHTML = req.responseText;

          } else {

            alert("Problem: " + req.statusText);

          }

    }

}

Put the above in the header, then call it with the following:

PHP Code:


<a href="javascript:processAjax('www.yahoo.com');">CLICK ME</a>

<div id="myDivName"></div>

Should work!

hi Che - i used your script and have gotten it to work but i still have the problem of the url that is loaded into the div seems to be losing its css styling, its loading into the bottom of the div and the url i'm refering to is a spry sliding panes which also is not being loaded. i'm just seeing the text. any idea of how to get this resolved?
here's the page: http://www.marshall-legacy.org/about...s22test22.html

--->on the left menu the "recent news" link is the one in
question.
--->you can see the page that i'd like loaded and what its supposed
to look like by clicking on the "where were working" link

ALSO --- is this the best way to approach this? Any thoughts,
suggestions??

thanks in advance for any help at all!!! i need it.