Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Load external page into <DIV>

  1. #1
    Join Date
    Jan 2008
    Location
    Lost in cyberspace
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Load external page into <DIV>

    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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Firefox does support innerHTML, I use it all the time!
    Jeremy | jfein.net

  3. #3
    Join Date
    Jan 2008
    Location
    Lost in cyberspace
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    <script type="text/javascript">
    function changeText(){
    	document.getElementById("new_coder').innerHTML = 'Hello World';
    }
    </script>
    <b id='new_coder'>Good Bye World</b>
    <input type='button' onclick='changeText()' value='Change Text'/>
    Jeremy | jfein.net

  5. #5
    Join Date
    Jan 2008
    Location
    Lost in cyberspace
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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)

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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:

    Code:
    <?
    	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
    Code:
    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.
    Last edited by codeexploiter; 01-29-2008 at 07:54 AM. Reason: added php oriented information

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,337
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    This might be of help, or this?

    Arie Molendijk

  8. #8
    Join Date
    Jan 2008
    Location
    Lost in cyberspace
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Jan 2008
    Location
    Lost in cyberspace
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by Ducimus View Post
    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.

    Code:
    <?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
    Last edited by codeexploiter; 01-30-2008 at 03:23 AM. Reason: Corrections

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •