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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Calling Function Effects iFrame Identity

Status
Not open for further replies.
chesterthebear

chesterthebear

Programmer
Jan 1, 2007
7
AU
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
 
Sort by date Sort by votes
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:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
293
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
267
coldbohemia
coldbohemia
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
96
obtur
obtur
ahmedsa2018
  • Locked
  • Question
How to make function give row that have different value with color red to full row ?
Replies
1
Views
85
feherke
feherke
mrgulic
  • Locked
  • Question
Why doesn't my jQuery extension work? (TypeError: validStatus.arrayContains is not a function) 1
Replies
2
Views
105
mrgulic
mrgulic

Part and Inventory Search

Sponsor

Back
Top