« Blog Home

§ Use iframe contents to change iframe to ajax div

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>
 

 

last edited on January 29th, 2009 at 12:05 PM

Comments

No Comments Here. Add yours below!

Add your comment

Name:
Email: (Will not be displayed - Privacy policy)
Website:
Comments:
  random image I can't read it!
Give me a different one!
Verify Post: Input the text from the image above to verify this post (helps prevent spam)
 

« Blog Home


But sometimes it puzzled Adele to see how very unpredictable the consequences of an event could be.
Adele Mundy, In the Stormy Red Sky, David Drake