Define both an iframe and a display div in your markup:
<div id="display"></div> <iframe id="buffer" name="buffer" src="hidden1.html" onload="dw_Loader.display()"></iframe>
For accessibility, iframe styles can be written using JavaScript and target attributes included in the links:
<a href="yourpage.html" target="buffer">link</a>
Include a script tag for the very small external JavaScript file dw_loader.js. The code includes the following settings and options:
loadMsg: 'Retrieving data ...',
displayID: 'display', // default id for display div
iframeID: 'buffer', // default id for hidden iframe
bReplace: false, // to use location.replace (no history support)
bScrollToTop: false, // page scroll to top when new content is loaded?
An example link with the onclick attribute and optional parameters:
<a href="yourpage.html" target="buffer"
onclick="return dw_Loader.load(this.href,
'ifrm', // iframe id
'ifrmDiv', // id of div where iframe contents displayed
ifrmCallback // function to call after contents transferred to div
)">link</a>
The code has been tested successfully on Firefox, Chrome, Internet Explorer 5.5+, Opera and Safari.