Javascript iFrame accessing parent variables

kickstart · July 26, 2011

Hi

I am trying to write a page that uploads a file to the server using Ajax and avoiding a page refresh. This part works fine, using an iframe as the target for the upload form.

Problem occurs on return when I want to update a minor part of the page (colour a box on a matrix to show the file has been uploaded) and then hide a field. I used top.HidePopup() to call the function HidePopup, which works fine on localhost.

However putting the to a live server it fails in Opera with Uncaught exception: ReferenceError: Security error: attempted to read protected variable: HidePopup. It works fine in Firefox.

Googling around this seems to be normally caused if the page and the iframes source are from different domains, but in this case they are not (and if I do alert (document.domain); in the javascript of both the page and the iframe then both give the same domain name).

Any ideas?

All the best

Keith

MadTechie · July 26, 2011

Wouldn't it be parent.HidePopup()

if called from the child ?

personally i don't use the full url, just the relative link,

so instead of

http://www.mydomain.com/path/file.html

i would use (even for a iframe)

/path/file.html

kickstart · July 26, 2011

Hi

Tried top, parent and window.parent and all give the same error.

The form does just use the relative url for the script in the action

The form is :-

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="AjaxFileUpload.php" target="upload_target">
<table style="text-align:left">
<tbody>
<tr class="phoneTable0">
<td colspan="2" style="text-align:right;">
<a href="" onclick="HidePopup();return(false);">
</td>
</tr>
<tr class="phoneTable1">
<td>Select manual</td>
<td>
<input name="file" id="file" size="27" type="file" style="width:20em;"/>
</td>
</tr>
<tr class="phoneTable2">
<td>Description</td>
<td>
<input type="text" name="description" value="" style="width:20em;"/>
</td>
</tr>
<tr class="phoneTable1">
<td/>
<td>
<input type="submit" name="action" value="Upload"/>
<input type="hidden" name="CoolingTowerId" value="1"/>
<input type="hidden" name="LangaugeId" value="1"/>
<input type="hidden" name="ManualTypeId" value="1"/>
<input type="hidden" name="CoolingTowerManualId" value="15"/>
</td>
</tr>
<tr class="phoneTable2">
<td colspa="2">
<span id="PopupErrorLine"/>
</td>
</tr>
</tbody>
</table>
</form>

When it is displayed an onsubmit condition is added:-

document.getElementById('file_upload_form').onsubmit=function() {document.getElementById('file_upload_form').target = 'upload_target';}

The iframe is as follows:-

<iframe id='upload_target' name='upload_target' src='' style='width:0;height:0;border:0px solid #fff;'></iframe>

The doc returned is (chopping out processing in php that works fine):-

<html>
<head>
<script type="text/javascript">
alert (document.domain);
var CellColour = "<?php echo $CellColour; ?>";
var ErrorArray = new Array('<?php echo implode("','",$RetLine); ?>');
var CoolingTowerId = <?php echo $CoolingTowerId; ?>;
var LangaugeId = <?php echo $LangaugeId; ?>;
var ManualTypeId = <?php echo $ManualTypeId; ?>;
var CoolingTowerManualId = <?php echo $CoolingTowerManualId; ?>;
var ErrorFound = false;
var ErrorOut = '';
function init() 
{
alert ("Uploaded*");
alert(CellColour);
for (ErrorArrayKey in ErrorArray)
{
	if (ErrorArray[ErrorArrayKey] != '')
	{
		ErrorOut += ErrorArray[ErrorArrayKey];
		ErrorFound = true;
	}
}
if (ErrorFound)
{
	try
	{
		var PopupErrorLine = window.parent.document.getElementById('PopupErrorLine');
		PopupErrorLine.innerHTML = ErrorOut;
	}
	catch(err)
	{
		if (window.parent.HidePopup)
		{
			window.parent.HidePopup();
		}
	}
}
else
{
	try
	{
		var CellId = window.parent.document.getElementById("cell_"+CoolingTowerId+"_"+LangaugeId+"_"+ManualTypeId);
		if (CellId)
		{
			CellId.style.background = CellColour;
			CellId.innerHTML = CoolingTowerManualId;
		}
		else
		{
			alert("*"+CoolingTowerId+"_"+LangaugeId+"_"+ManualTypeId+"*");
		}
	}
	catch(err)
	{
	}
	if (window.parent.HidePopup)
	{
		window.parent.HidePopup();
	}
}
}
window.onload=init;
</script>
<body>
</body>
</html>

When this doc is returned it should populate the iframe and trigger the javascript in the init function. This it does successfully. However despite coming from the same domain (indeed, the same directory of the same domain) Opera is blocking it.

Now not sure if this is a Javascript issue, or if it is the server having a setting which is triggering Opera into believing it to be a different domain.

All the best

Keith

MadTechie · July 26, 2011

I have created this (messy) script, i know it looks bad but it may help,

I have also emailed you a live link.. for a quick test

<?php
/**
* todo: A LOT
*/
session_start();
if(!empty($_GET['uploadFrame'])){
  ?>
<html><head><body style="background-color: red;">
  <form name="iform" id="iForm" action="?upload=true" method="post" enctype="multipart/form-data">
      <input id="file" type="file" name="upload" onChange="window.parent.upload(this);" />
  </form>
</body></head></html>
  <?php
  exit();
}
if(!empty($_GET['upload'])){
  //handle file
  $_SESSION['thefile'] = $_FILES['upload']['name'];
  move_uploaded_file($_FILES['upload']["tmp_name"], dirname(__FILE__)."/test/" . $_FILES['upload']["name"]);
  ?>
  <html><head>
   <?php
    if((isset($_SESSION['thefile']))){
      $msg = "uploaded ".$_SESSION['thefile'];
    ?>
      <script language="javascript">
window.parent.recieved('uploaded: <?php echo $_FILES['upload']["name"];?>');
      </script>
    <body style="background-color: green;">Thank you </body></head></html>
<?php
    unset($_SESSION['thefile']);
    exit();
  }
}
?>
  <html>
    <script>
      var par = window.document;
      var new_iframe = par.createElement('iframe');
      function init(){
new_iframe.src = '?uploadFrame=true';
new_iframe.id = 'uploader';
new_iframe.frameBorder = '0';
new_iframe.style.height = '100px';
par.getElementById('iframe_container').appendChild(new_iframe);
      }
      function upload(fileObj){
fileObj.form.submit(); //send file
par.getElementById('uploader').style.display="none";

//display animation (if desired) (DONT change the iframe)
      }
      function recieved(msg){
alert(msg);
new_iframe.src = '?uploadFrame=true';
par.getElementById('uploader').style.display="block";
      }
    </script>
    <body onload="init();" style="background-color: blue;">
      <div id="iframe_container"></div>
    </body>
  </html>

kickstart · July 26, 2011

Hi

Cheers, will have a full play later.

Looking at that you have a basic page that contains an iframe, with the iframe having the same basic source (but a different parameter) to put out different contents.

That might force the same source. I will try it in a bit (when I have stopped wanting to strange Opera).

I have managed a way round the problem for now using messages.

All the best

Keith

Sign In

Javascript iFrame accessing parent variables

Recommended Posts

kickstart

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

kickstart

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

kickstart

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information