PDA

View Full Version : Send post data to iframe and using location.replace



benslayton
07-18-2009, 08:29 AM
How can I send post data to an iframe and use location.replace so that the browser's back button doesnt store the iframe history???

rainarts
07-24-2009, 01:08 PM
Hi,

I'm not sure if this is what you exactly need. This demo comes in two separated document. startpage and the iframepage.

Here's the code for the mainpage:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Parent Window!</title>
<style type="text/css" media="screen">
/* <![CDATA[ */

div#framed {
margin : 1em auto;
width : auto; }
iframe {
margin : 0 auto;
display : block;
border : thin solid #ccc;
width : 100%; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
/*
Developed by DynamicDriveUser : rainarts

This notice must remain intact for use.

- http://www.dynamicdrive.com */

var ie = (( !!document.all && !!!document.getElementById ) ? 1 : 0 );
var xPost = function( e ) {
var $ = ( function( element ) {
var element = (( element ) ? (( ie ) ? document.all[ element ] : document.getElementById( element )) : 0 );
return element;
} );
$("iframe").onunload = ( function() { /* Cache Cleared */ } );
if ( $("testform") ) {
$("testform").onsubmit = ( function() {
var iframe = (( "contentDocument" in $("iframe")) ? $("iframe").contentDocument : (( "contentWindow" in $("iframe")) ? $("iframe").contentWindow : $("iframe")));
(( "postMessage" in iframe ) ? iframe : (( "postMessage" in iframe.document ) ? iframe.document : 0 ));
if ( $("testfield").value ) {
(( iframe ) ? iframe.postMessage( $("testfield").value, "*" ) : null );
return false;
} alert( "Please enter some text!" );
$("testfield").focus();
return false;
} ); return
} alert( "Please update your browser with the latest patch!", "unsupported features" );
}; onload = xPost;

// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" name="testform" action="#" method="post">
<div><label for="testfield">Test Data : <input type="text" id="testfield" name="testfield" value="" size="30" maxlength="25" /></label> <input type="submit" value="- post -" /></div>
</form>
<div id="framed"><iframe src="./test.html" id="iframe" name="iframe" scrolling="auto" resizable="no">This page require's frame support.</iframe></div>
</div>
</body>
</html>

and here's the code inside the iframepage:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Iframe Page</title>
<script id="javascriptv15" type="text/javascript">
<!--
var retrieveData = function( e ) {

(( document.getElementById ) ? document.getElementById("main") : document.all.main ).innerHTML = "Data retrieved from ( <b>" + e.source.document.title + "</b> ):<br>Data : " + e.data;
};

if ( window.addEventListener )
window.addEventListener("message", retrieveData, false);
else if ( widow.attachEvent )
window.attachEvent("onmessage", retrieveData );
// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

hope it helps...
rainarts