Calling Function Effects iFrame Identity

chesterthebear · Nov 5, 2009

I have a problem so weird I'm not sure I know where to turn.

I have a page with an iframe. Click on a menu item on that page and the item opens in that iframe.

Each page assigns a unique name/id to the iframe, so that multiple instances of the page may exist in the browser.

However, when I execute javascript in the target script in the iframe, and then click on another menu item in the top page, the target script opens in a new window or tab instead of in the targeted iframe. After hours of experimentation, it appears that the page works as intended until a javascript function is called within the iframe.

I don't even need to submit the form for things to go wrong. All I need to do is call the javascript function.

Here's an extract...

On the top page....

HTML Code:

Code:

<div name='menu'>
<p><a href='/edition.php' target='content123456'>Edit Editions</a></p>
</div>
<div>
<iframe name="content123456" id="content123456" frameborder="0" scrolling="auto" width="810" height="1000"></div>

And in edition.php...

Code:

<head>
<script language='javascript'>
function setmonth()
{
	var d = document.getElementById('date').value; //expects the format yyyy-mm-dd
	var dx = d.split("-");
	switch(dx[1])
	{
		case "01": m = "January"; break;
		case "02": m = "February"; break;
		case "03": m = "March"; break;
		case "04": m = "April"; break;
		case "05": m = "May"; break;
		case "06": m = "June"; break;
		case "07": m = "July"; break;
		case "08": m = "August"; break;
		case "09": m = "September"; break;
		case "10": m = "October"; break;
		case "11": m = "November"; break;
		case "12": m = "December"; break;
	}
	document.getElementById('month').value = m;
	var mx = dx[1] - 1;
	var edate = new Date(dx[0], mx, dx[2]);
	var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]

	var day = days[edate.getDay()]
	var dn = dx[2];
	var n = dn.substring(0,1);
	if(n=="0")
	{
		dn = "x" + dn;
		dn = dn.replace("x0","");
	}
	var title = day+" "+m+" "+dn;

	neame = document.getElementById('name').value;
	if(ename=="")
	{
		document.getElementById('name').value = title;
	}
}
</script>
</head>
<body>
<h1>Edition Management</h1>
<form name='ed' id='ed' method='POST' action='/edition.php' target='_self'>
	<table>
	<tr>
		<td align='right'>Edition Name</td>
		<td><input style='font-size:8pt; width: 200px' type='text' name='name' id='name' size='20' ></td>
	</tr>
	<tr>
		<td align='right'>Date</td>
		<td>
			<input type='text' style='font-size:8pt; width: 200px' name='date' id='date' size='20' onchange="setmonth()">
		</td>
	</tr>
	</table>
</form>

It's not just this specific function either. There are other scripts with different functions, all causing the same result, that is, that the top page iframe appears to lose its identity when the function in the target iframe is called.

Finally, and this is perhaps the weirdest part of all, the problem happens in IE, Chrome, Iron, Safari and Opera, but not in Firefox.

I've just about exhausted ideas on this, and I hope the gurus here can point me in the right direction.

Any thoughts?

CTB

BillyRayPreachersSon · Nov 5, 2009

If this is the actual code, then there's loads of things wrong that might be causing problems:

- What happens if you correctly close your "iframe" tag? Right now, it isn't closed.

- Does your code validate (both the main page and the code loaded in the iframe)?

- Do you have an HTML element in the code loaded in the iframe?

The following works fine for me in IE8 and Fx 3.5:

I created a "main" file, "test_main.html":

Code:

<html>
<head>
</head>

<body>
   <div name="menu">
      <p><a href="test_iframe.html" target="content123456">Edit Editions</a></p>
   </div>
   <div>
      <iframe name="content123456" id="content123456" frameborder="0" scrolling="auto" width="810" height="1000"></iframe>
   </div>
</body>
</html>

And also an "iframe" file, "test_iframe.html":

Code:

<html>
<head>
   <script type="text/javascript">
      function doSomething() {
         document.getElementById('name').value = 'You called me at ' + new Date();
      }
   </script>
</head>

<body>
   <form name="ed" id="ed" method="POST" action="test_iframe.html" target="_self">
      <input type="text" name="name" id="name" size="80" value="blank" />
      <input type="button" onclick="doSomething();" value="Run JS" />
   </form>
</body>
</html>

When I click the "Edit Editions" link, the iframe code loads as expected. Clicking the button runs a JS function, which sets the value of the "name" input. Clicking the "Edit editions" link again at that point reloads the content of the iframe as expected.

So, does my code work for you?

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

chesterthebear · Nov 5, 2009

Hi Dan,
Thanks for trying this out. I appreciate the time you've spent.
No, this isn't the actual code... it's just a snapshot example.

Both pages (the top page and any page loaded into the iframe
have this...

Code:

     <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
     '[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd'>[/URL]
     <html>
     <!--Copyright 2004-2009 Wroof!, Australia-->
     <head>

...at their head, generated from a common php include statement.

An actual iframe looks like this...

Code:

<iframe name="content984481" id="content984481" src="/contents-magazine.php" frameborder="0" scrolling="auto" width="590" height="4000"></iframe>

(yes... </iframe> closing tag is there.

And thanks for going to the trouble of trying to replicate. I did the same thing, searching for the answer, and had the same result as you... it worked flawlessly.

...which makes this all the more baffling.

chesterthebear · Nov 5, 2009

Actually, Dan, I think you solved it, in a round-about sort of way.

The problem seems to have been in the doctype statement, and specifically in .../loose.dtd.

I changed it to

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/frameset.dtd">[/URL]

and so far (fingers crossed) it appears resolved.
(It's the same as "Transitional", but "Transitional" with "loose.dtd" doesn't allow for frames.

Doh!

Thanks again for taking the time to assist.

CTB

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Calling Function Effects iFrame Identity

chesterthebear

Programmer

BillyRayPreachersSon

Programmer

chesterthebear

Programmer

chesterthebear

Programmer

Similar threads

Part and Inventory Search

Sponsor