Load another site page into a DIV

**Teapott** · 12-08-2012, 11:56 PM

Originally Posted by bernie1227

Sorry about it being held back for moderating, it must have been caught by the anti-spam filter.

No worries

**molendijk** · 12-08-2012, 11:57 PM

Originally Posted by Teapott

And thank you molendijk but I probably should have mentioned I wanted to avoid iframes

A lecturer of ours heavily encouraged us to avoid them these days.

Your lecturer is right to the degree that iframes may be harmful in certain cases. But that's true for almost everything.
Iframes are harmful if there's a risk that they may destroy the history queue. But that's not the case here.
Iframes are valid elements in html5, and YouTube uses them in their new embeds.
So don't be afraid of iframes if you know what you're doing.
But I agree you shouldn't use them if you aren't aware of certain consequences pertaining to using them.
Arie.

**Teapott** · 12-09-2012, 12:08 AM

Thanks for the advice

I've tried a solution using "$("#content").load(href);" which grabs the href from the menu anchors and puts them in my content DIV - however, I'm losing this on refresh. Is there anyway to grab/detect which href is currently within a DIV and code this to persist after refreshing?

At the minute I can get:
window.onbeforeunload = function() {
return "Are you sure you wish to leave the page?";
}

To appear, so I'm just wondering if there's some sort of "#content.getHrefContents" equivalent that I could use when leaving the page, and hopefully put back into #content through some sort of "whenReloading" method? Again I haven't done a lot of web programming so apologies for the stupid method name guessing. Also is this the best way to do this? :/ Or should I give up and try the http://www.dynamicdrive.com/dynamici...axtabscontent/ method that Bernie posted that allows persisting?

**bernie1227** · 12-09-2012, 04:40 AM

It may be better to end up going with my suggestion, however with that method, you could try and retain the current tab using cookies and then if the cookie is set open the tab which the cookie refers to.

**Beverleyh** · 12-09-2012, 06:02 AM

Originally Posted by Teapott

Is there perhaps a way to change <?php include('contentIWant.html');?> so it would update in place of the DIV?

Yes, with the help of a query string and GET for example;

In your main page (let's say that its called "main.php"), setup your content links like this;

Code:

<a href="main.php?c=home">Home</a><br/>
<a href="main.php?c=about">About</a><br/>
<a href="main.php?c=contact">Contact</a>

and then also in your main page, put this where you want the div content to appear;

Code:

<?php 

if (empty($_GET))
	{
	include('home.html'); // default to showing home content if nothing selected
	}
	else
	{
	include($_GET['c'].'.html'); // get page name from 'c' and insert corresponding html content file
	}
?>

Now for your content, just create a "home.html" page, a "contact.html" page and an "about.html" page with ONLY the HTML for the changing page content inside (no DOCTYPE , <head> or <body> tags, etc - just the fragment of HTML that shows inside the content div).

**molendijk** · 12-09-2012, 02:46 PM

Thanks, Beverleyh, that gave me an idea on how to do it on the client side (using javascript) and WITHOUT IFRAMES.

index.html:

Code:

<!doctype html>
<html >
<head>
<title>jQuery Test Demo Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index.html'){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html'){setTimeout("$('#test').load(document.URL.substring(document.URL.indexOf('?')+1,document.URL.length))",150)}
});
</script>
</head>
<body style="font-family: verdana; font-size: 12px">
INDEX.HTML<br>
<div id="test" style="position: absolute; left:10%; top:10%; right: 20%; bottom: 10%;background: white; border: 10px solid #dedede"></div>
<div style="position: absolute; top: 0px; right: 0px; padding-top: 20px; width:200px; bottom:0px; background: #dedede; font-family: verdana; font-size:12px">
<div style="position: relative; text-align: center">
LOGO<br><br><br><br>
<a href="index.html?home.html">HOME</a><br><br>
<a href="index.html?about.html">ABOUT</a>
</div>
</div>
</body>
</html>

---
about.html:

Code:

<!doctype html>
<html >
<head>
<title>ABOUT</title>
<script src="orph.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; right:0px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; ">
THIS IS ABOUT.HTML
<hr>
CONTENT
</div>
</body>
</html>

---
home.html:

Code:

<!doctype html>
<html >
<head>
<title>HOME</title>
<script src="orph.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; right:0px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; ">
THIS IS HOME.HTML
<hr>
CONTENT
</div>
</body>
</html>

---
orph.js (dont't allow pages to show as 'orphans' (without the menu)).

Code:

function orph(){//dont't allow pages to show as 'orphans' (without the menu).
if (parent.location == self.location) 
parent.location.href="index.html?" + document.URL 
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", orph, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", orph );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            orph();
        };
    }
    else
        window.onload = orph;
}

---
Arie.

**Beverleyh** · 12-09-2012, 03:39 PM

Hee, hee - don't you just love the way ideas bounce around

That's a really useful script Arie - perfect for non-PHP website projects! Thanks for sharing!

Arie's script demo for reference: http://fofwebdesign.co.uk/template/_...mes/index.html

**ajfmrf** · 12-10-2012, 12:06 AM

Hi Arie,can you email me regarding your script mentioned above.I want to understand they way it works and why/how.

I have a website that uses frames and would like to see how your script could possibly improve my site.

My site is

http://www.web-user.info/index.html

Thats if you have a few minutes and are inclined to do so

**djr33** · 12-10-2012, 12:09 AM

Arie's been developing this and similar methods for a while. There are a few threads in the "submit a script" section, and I believe he has some blog posts on it too. I think that would help.