Use iframe contents to change iframe to ajax div ~ Slashback Software

§ Use iframe contents to change iframe to ajax div

January 16th, 2009 at 10:06 PM · (edited January 29th, 2009 at 12:05 PM) · 0 Comments added to this post

This php file, used as an iframe's content, will attempt to load javascript to the parent to replace the iframe with a div, then ajax its content to that div.

The iframe must be in a div (or some container; I have only tried this with a div). The id of the div must be the same as the name of the iframe.

The iframe starts loading this file.

If first bit of javascript works and finds an element with id=iframe's name, it will reload the iframe with this file with a $_GET string of ?divid=whatever. Since this piece of javascript is sleeping for one second, this reload should happen before this javascript continues. If this javascript fails for whatever reason, this file will continue to load the form (or whatever) into the iframe like normal.

On the reload, a bunch of ajax javascript gets stuffed into the head of the parent window, then parent.replaceIframeDiv() is called.

Finally, this file is called for the third time to get the div content via ajax.

<?php
//iframe_contents_3_calls.php
if(count($_GET)==0) {
$scripts0='
<script type="text/javascript">
if(parent.document.getElementById(window.name)) {
    location.href="'.$_SERVER['SCRIPT_NAME'].'?divid="+window.name;
}
</script>';
echo $scripts0;
ob_flush();
flush();
sleep(1); //if javascript didn't work then the following will fill the iframe
?>
<style type="text/css">
body {
    background-color: #008080;
    color: #F0DCA9;
    font-weight: bold;
    font-size: 18px;
    text-align: left;
}
</style>
<head>
<body>
<?php showform(); ?>
</body>
<html>
<?php
} //end empty get string
elseif(isset($_GET['divid'])) {
$scripts1='
<script type="text/javascript">
if(parent.document.getElementById("'.$_GET['divid'].'")) {
    addMyScriptToParent();
    parent.replaceIframeDiv();
}
function addMyScriptToParent() {
    var ParDoc = parent.document;
    var js = ParDoc.createElement("script");
    js.type="text/javascript";
    var myscript=\'';

$scripts2='\'
    js.text=myscript;
    var headRef = ParDoc.getElementsByTagName("head")[0];
    headRef.appendChild(js);
} //end addMyScriptToParent()
</script>';
echo $scripts1;
echo multiline_to_single_line_javascript($_GET['divid']);
echo $scripts2;
} //end isset($_GET['divid'])
elseif($_GET['load']=='form') {
showform();
} //end ifs

function multiline_to_single_line_javascript($divid) {
//any //comments will break this since it turns into one line. /*comments*/ are ok
$myjs='
var xmlHttp;
/*replace the div*/
function replaceIframeDiv() {
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
      alert ("Browser does not support HTTP Request");
      return;
    }
    var url = "'.$_SERVER['SCRIPT_NAME'].'?load=form";
    xmlHttp.onreadystatechange = replaceIframeDivStateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
/*fill the div with the response*/
function replaceIframeDivStateChanged() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      var response = xmlHttp.responseText;
      var ifd= document.getElementById("'.$divid.'");
      ifd.innerHTML=response;
    }
}
/*get the XmlHttpObject*/
function GetXmlHttpObject() {
    var objXMLHttp = null;
    if (window.XMLHttpRequest) {
      objXMLHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
      objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objXMLHttp;
}
';
$singleline=preg_replace('/\n/','',$myjs);
return $singleline;
} //end multiline_to_single_line_javascript()

function showform() {
/*you could include('the_form.html') here if you want
    but if it has <html>, <body>, etc., it might cause problems
    at least in perfect browsers :) */
?>
whatever html, etc.
<?php
} //end showform()

Here's a page to load it in:

<html>
<head>
<title></title>
</head>
<body>
here follows a bordered div with id = iframe name<br>
turn off javascript and there will be an iframe with a lovely blue-green background and a form<br>
with javascript on the div contents will be ajax replaced with the form<br>
<div id='iframediv' style="border:2px black solid;">
<iframe name='iframediv' frameborder="0" name="me" id="me" src="iframe_contents_3_calls.php" height="600">iframe</iframe>
</div>

</body>
</html>

Slashback Software

Slashback Associates, Inc.

Quality software since 1996.

§ Use iframe contents to change iframe to ajax div

Comments

Add your comment