Changing iFrame src

pahiker · Sep 28, 2012

I am having problems changing the src attribute on iFrames, is/was this not a supported attribute in IE7? Because of the number of people still using XP, and IE7, I need this to work. The error message I am getting out of IE7 is:

Code:

Line 24, Char 4, error: 'document.getElementById(...)' is null or not an object

Line 23 & 24 (23 works and does not throw an error) state:

Code:

document.getElementById("Chapter").innerHTML = "Southwest Pennsylvania Chapter";
document.getElementById("leftFrame").src = "SwPa/AboutUs.html";

Here are the definitions of the two elements:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
.
.
.
<h2 id="Chapter">We are an organization bringing disabled and non-disabled people together through sports.</h2>
.
.
.
<div class="main">
<div id="divObject" class="left">
<iframe id="leftFrame" src="Home/Prayer.html" style="border:0px; overflow:hidden; width:100%;" allowtransparency=true onload="iFrameHeight('leftFrame')"></iFrame>

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

vacunita · Sep 28, 2012

Based on what you show, it should be working as is, the only guess I could make is maybe unless the frame hasn't loaded yet when you try to target it.

So the question would be: When exactly is the [tt]document.getElementById("leftFrame").src = "SwPa/AboutUs.html";[/tt] running?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

pahiker · Sep 28, 2012

Not a heck of a lot, and it works everywhere but IE7:

Link

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

vacunita · Sep 28, 2012

I did not ask what it was running.

I asked when the src changing was being executed. In other words show me your JS code where that line is.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

pahiker · Sep 28, 2012

Mea culpa - misunderstood.

Code:

function setButton(chapter) {
	var ary = new Array();

	switch (chapter) {
		case "Home": 
			document.getElementById("Chapter").innerHTML = "We are an organization bringing disabled and<br>non-disabled people together through sports.";
			document.getElementById("leftFrame").src = "Home/Prayer.html";

			var btn = "HomeButton";
			ary[0] = new Array("About Us", "Home/AboutUs.html");
			ary[1] = new Array("Latest News", "Home/News.html");
			ary[2] = new Array("Sponsor Friends to Friends!", "Home/Sponsor.html");
			ary[3] = new Array("George O'Donnell receives the Jefferson Award", "Home/JeffersonAward.html");
			ary[4] = new Array("Miracle Field Calendar", "Home/MiracleField.html");
			ary[5] = new Array("Contact Us", "Home/Contact.html");
			ary[6] = new Array("Our Sponsors", "Home/Sponsors.html");
			ary[7] = new Array("Start a Chapter", "Home/StartChapter.html");
			break;


		case "SwPa": 
			document.getElementById("Chapter").innerHTML = "Southwest Pennsylvania Chapter<br><br>";
			var frm = document.getElementById("leftFrame");
			frm.src = "SwPa/AboutUs.html";

			var btn = "SwPaButton";
			ary[0] = new Array("About Us", "SwPa/AboutUs.html");
			ary[1] = new Array("Calendar", "SwPa/Calendar.html");
			ary[2] = new Array("Photo Albums", "SwPa/PhotoAlbum.html");
			ary[3] = new Array("Contact Us", "SwPa/Contact.html");
			break;


		case "NwPa": 
			document.getElementById("Chapter").innerHTML = "Northwest Pennsylvania Chapter<br><br>";
			document.getElementById("leftFrame").src = "NwPa/AboutUs.html";

			var btn = "NwPaButton";
			ary[0] = new Array("About Us", "NwPa/AboutUs.html");
			ary[1] = new Array("Contact Us", "NwPa/Contact.html");
			break;
	}


	var allTags = document.getElementsByTagName("*");
	var i=0, l=0;
	var e;
	while(e=allTags[i++]){
		if(e.id.substring(0,4) == "link") {
			if (l < ary.length) {
				e.className = btn;
				e.innerHTML = ary[l][0];
				e.onclick = new Function ("setContent(" + l + ",'" + ary[l][1] + "')");
				e.style.visibility = 'visible';
				l++;
			}
			else {
				e.style.visibility = 'hidden';
			}
		}
	}
	return;
}

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

pahiker · Sep 28, 2012

Missed something, I was testing changes, here is how the SwPa line read when I got the error message from IE7:

document.getElementById("leftFrame").src = "SwPa/AboutUs.html";

Sorry.

What I don't understand is that it is exactly the same as the line before it, as far as the document.getElementById is concerned, so I'm not sure why IE7 is saying the reference is null.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

vacunita · Sep 28, 2012

Judging by mockup you posted above... I'm leaning more and more towards the loading issue I described above.

Websites load in the order the code is set. Which means the <h2> is going to load before the iframe. It may be that the Js is being run before the entire page has finished loading so the iframe technically doesn't exist yet.

Moving along, where are you calling the setButton function? I would expect if its something that has to happen when the page first loads to be somehow called in the onload even of the body tag.

If its called for instance before the body sort of like this, the loading issue can present itself.

Code:

...
[b][COLOR=#0000FF]<html>[/color][/b]
 [b][COLOR=#0000FF]<head>[/color][/b]
  ...
  [b][COLOR=#0000FF]<script[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/javascript"[/color][b][COLOR=#0000FF]>[/color][/b]
   ...
   function whatever()
   {
[tab] ...
   }
   ...
  whatever();
  [b][COLOR=#0000FF]</script>[/color][/b]
 [b][COLOR=#0000FF]</head>[/color][/b]
 [b][COLOR=#0000FF]<body>[/color][/b]
  ...
  [b][COLOR=#0000FF]<h2>[/color][/b]...[b][COLOR=#0000FF]</h2>[/color][/b]
  ...
  ...
  ...
  [b][COLOR=#0000FF]<iframe[/color][/b] ...[b][COLOR=#0000FF]></iframe>[/color][/b]
  ...
 [b][COLOR=#0000FF]</body>[/color][/b]
[b][COLOR=#0000FF]</html>[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

pahiker · Sep 28, 2012

Initially, everything is set up on the index page as if the Home button was pressed, so no initial call to setButton is required. After that, setButton is called when any of the top three buttons is pressed.

Code:

	<div class="right">
		<button id="Home" class="HomeButton" onclick="setButton('Home'),setContent(0,'Home/Prayer.html')">Home</button> 
		<button id="SwPa" class="SwPaButton" onclick="setButton('SwPa'),setContent(0,'SwPa/AboutUs.html')">Southwest Pa</button>
		<button id="NwPa" class="NwPaButton" onclick="setButton('NwPa'),setContent(0,'NwPa/AboutUs.html')">Northwest Pa</button>
		<br style="clear:both;">
		
		<button id="link1" class="HomeButton" onclick="setContent(0,'Home/AboutUs.html')">About Us</button>
		<button id="link2" class="HomeButton" onclick="setContent(1,'Home/News.html')">Latest News</button>
		<button id="link3" class="HomeButton" onclick="setContent(2,'Home/Sponsor.html')">Sponsor a Friend</button>
		<button id="link4" class="HomeButton" onclick="setContent(3,'Home/JeffersonAward.html')">George O'Donnell receives the Jefferson Award!</button>
		<button id="link5" class="HomeButton" onclick="setContent(4,'Home/MiracleField.html')">Miracle Field Calendar</button>
		<button id="link6" class="HomeButton" onclick="setContent(5,'Home/Contact.html')">Contact Us</button>
		<button id="link7" class="HomeButton" onclick="setContent(6,'Home/Sponsors.html')">Our Sponsors</button>
		<button id="link8" class="HomeButton" onclick="setContent(7,'Home/StartChapter.html')">Start a Chapter</button>
	</div>

The iFrame is loaded with the AboutUs.html for the appropriate button. So, the iFrame should already exist, it is not deleted in the setButton, only the src URL is changed. So, if I understand this correctly, the iFrame should already exist, unless it is being recreated when the <h2 is being changed. If that is the case, is there a way to delay the iFrame change until after the page is redrawn? I had assumed the iFrame would remain until its' src is changed.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

pahiker · Sep 28, 2012

Note: I'm not sure where the stuff came from in links 1,2,3,4,7 and 8, it's not in my code.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

pahiker · Sep 28, 2012

Okay, I think you may be onto something about the speed. I am at home now, vs. work, and the page is working. the only difference is that I am not going through the company firewall.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

pahiker · Oct 1, 2012

Resolved. thanks.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.

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!

Changing iFrame src

pahiker

Programmer

vacunita

Programmer

pahiker

Programmer

vacunita

Programmer

pahiker

Programmer

pahiker

Programmer

vacunita

Programmer

pahiker

Programmer

pahiker

Programmer

pahiker

Programmer

pahiker

Programmer

Similar threads

Part and Inventory Search

Sponsor