Access AJAX dynamic content via browser [Archive]

VincenzoLi

03-02-2015, 11:44 PM

Hi All - apologies if this is in the wrong thread, I couldn't find a specific AJAX forum.

My question is in reference to this script: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

I have been using it as the main framework of my personal website for years and I'm very satisfied with it.

However, I was wondering if there is a way I can surf directly on certain pages instead of having to click a link?

For instance, lets says I have 2 pages on my site.

About
Contact

And I have links to both pages on my homepage.

Currently, this is the only way I can inform people how to access them (via the homepage).

Is it possible to use REL or similar in the address bar to directly access either page within the dynamic content framework?

I can access the 'About' page by surfing directly to mysite.com/about, but the content does not show within the framework of the two panel dynamic layout - it simply shows the minimal HTML page.

I hope you can understand what I am trying to say.

I use the 2 pages above as examples, but of course it is possible to have lots of pages and lots of layers to a website. All I want to do is provide a URL to my 'About' page (or any other for that matter) as one link. At the moment I have to put my websites full URL in and instruct where to go from there... "Once on the homepage click on the 'About' link, then scroll to the bottom where it says 'Employment', then that should take you to a page where blah blah blah" etc.

It would be handy to just be able to give a direct link.

Does anybody know how I can do this?

molendijk

03-03-2015, 12:51 PM

That (outdated) script doesn't allow you to do what you want.
Generally speaking, Ajax scripts do not handle the browser's history and URLs within the address bar 'correctly'.

An option would be to use an iframe instead. Try to experiment with the following, which uses location.search for links in index.html, and parent.location.search in the iframed pages:

index.html:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>bla</title>

<style>
body {font-family: verdana; font-size: 13px; }
</style>

</head>

<body >

<div style="position: absolute; top: 45%; left: 10px">
<a href="javascript: void(0)" onclick="location.search='about.html'">About</a><br>
<a href="javascript: void(0)" onclick="location.search='contact.html'">Contact</a><br>
<a href="javascript: void(0)" onclick="location.search='http://www.dynamicdrive.com'">DynamicDrive</a><br>
</div>

<div style="position:absolute; left:200px; top: 10%; right: 200px; bottom: 10%">
<iframe name="ifr" style="position:absolute; width: 100%; height: 100%; background: white; border: 1px solid silver" src="http://www.dynamicdrive.com" frameborder="0"></iframe>
</div>

<script>
if(location.search)ifr.location.replace(location.search.substring(1))

</script>

</body>

</html>

about.html:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>bla</title>

<script>
function orph(){//dont't allow iframed pages to show as 'orphans' (without the main page). The main page is called 'index.html' here

if (parent.location == self.location)
parent.location.href="index.html?" + document.URL.substr(document.URL.lastIndexOf("/")+1,document.URL.length)
}

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;
}
</script>

</head>

<body>
<h1 style="text-align: center">About</h1>
<a href="javascript: void(0)" onclick="parent.location.search='about.html'">About</a><br>
<a href="javascript: void(0)" onclick="parent.location.search='contact.html'">Contact</a><br>
<a href="javascript: void(0)" onclick="parent.location.search='http://www.dynamicdrive.com'">DynamicDrive</a>

</body>

</html>

contact.html:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>bla</title>

<script>
function orph(){//dont't allow iframed pages to show as 'orphans' (without the main page). The main page is called 'index.html' here

if (parent.location == self.location)
parent.location.href="index.html?" + document.URL.substr(document.URL.lastIndexOf("/")+1,document.URL.length)
}

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;
}
</script>

</head>

<body>
<h1 style="text-align: center">Contact</h1>

<a href="javascript: void(0)" onclick="parent.location.search='about.html'">About</a><br>
<a href="javascript: void(0)" onclick="parent.location.search='contact.html'">Contact</a><br>
<a href="javascript: void(0)" onclick="parent.location.search='http://www.dynamicdrive.com'">DynamicDrive</a>

</body>

</html>

Note:
In the example above, the starting page (in the iframe, index.html) is DynamicDrive. Of course, you would choose a page of your own instead, for instance about.html