document.getElementById stopped working after adding an iframe

A

AC

I had a page that does some event setup on window.onload:

function prepEvents()
{
document.getElementById("menumap_sales").onmouseover =
swapMenuSales;
// etc
}

window.onload = prepEvents;


worked great, until the page where this javascript src is loaded now
contains an iframe. It seems that the document.getElementById() call
is returning null now. If I remove the iframe, it all works again.

Presumably it's something to do with having multiple documents now,
but how do I access the one I want?

Thanks for your help!

Andy C
 
S

SAM

AC a écrit :
I had a page that does some event setup on window.onload:

function prepEvents()
{
document.getElementById("menumap_sales").onmouseover =
swapMenuSales;
// etc
}

window.onload = prepEvents;


worked great, until the page where this javascript src is loaded now
contains an iframe. It seems that the document.getElementById() call
is returning null now. If I remove the iframe, it all works again.

Presumably it's something to do with having multiple documents now,
but how do I access the one I want?

only one ID of same name in a page !

you can't acces file loaded in iframes if this file is from another
domain that the main file.
 
A

AC

only one ID of same name in a page !

yep there are no repeated ids.
you can't acces file loaded in iframes if this file is from another
domain that the main file.

agreed. Both are in the root of my site. HTML goes like this:
<html>
<script language="JavaScript" type="text/javascript" src="script/
menu.js"></script>
<body>
<form>
<div id="pagebody">
<div id="loginlinks">
<iframe src="chat.html" frameborder="0" scrolling="no"
id="chatFrame" name="chatFrame" />
</div>
</div>
</body>
</html>

Could it be something to do with timing? i.e. the onload event is
being called before the DOM object is ready???

I'm completely at a loss at the moment; adding an iframe should be the
easy bit...

Help!
TIA,
AC
 
S

SAM

AC a écrit :
yep there are no repeated ids.


agreed. Both are in the root of my site. HTML goes like this:
<html>
<script language="JavaScript" type="text/javascript" src="script/
menu.js"></script>
<body>
<form>

what is this opening form tag ?
(with nowhere a closing one)
<div id="pagebody">
<div id="loginlinks">
<iframe src="chat.html" frameborder="0" scrolling="no"
id="chatFrame" name="chatFrame" />
</div>
</div>
</body>
</html>

Could it be something to do with timing? i.e. the onload event is
being called before the DOM object is ready???

I'm completely at a loss at the moment; adding an iframe should be the
easy bit...


is it the main page which gets the onload function ?

I see nowhere the element 'menumap_sales' ... !
 
D

dhtml

AC a écrit :

[snip]
agreed.  Both are in the root of my site.  HTML goes like this:
<html>

Where is the head tag?

what is this opening form tag ?
(with nowhere a closing one)

Good question.

Validate the HTML first.

My friend who works at Yahoo came to me for help last week. All of a
sudden things "stopped working" so she asked for my help.

It turned out that there was another developer who "owned" the
autocomplete part of the app. Yahoo does everything in a totally
retarded way status reports, no testing, and isolated cowboy coding.
They call this "Scrum" and balance it out with lots of middle
management.

The autocomplete code had something along the lines of:

document.body.innerHTML = "<div id='wrapper'>" +
document.body.innerHTML +
"</div>";

This caused the problem of all nodes refs being wiped out, so where
she had:-

var button = document.getElementById('button'),
title = document.getElementById('title');
bar.onclick = function() {
// Error: title is null or not an object
title.style.display = "";

</script>

<script src="autocomplete.js"></script>

An IFRAME is perfectly capable of adding such scripts to the page, and
it's entirely possible that your iframe has a script that does that.

Garrett
is it the main page which gets the onload function ?

I see nowhere the element 'menumap_sales' ... !

Yeah. Post the real code.
 
T

Thomas 'PointedEars' Lahn

dhtml said:
Where is the head tag?

The `<head>' start tag of the `head' _element type_ is optional, as is the
`</head>' end tag of the same.

<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.4.1>
Good question.

It is not Valid, the required `action' attribute is missing.

<http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#edef-FORM>

But in this case both appear to be unnecessary.
My friend who works at Yahoo came to me for help last week. All of a
sudden things "stopped working" so she asked for my help.

It turned out that there was another developer who "owned" the
autocomplete part of the app. Yahoo does everything in a totally
retarded way status reports, no testing, and isolated cowboy coding.
They call this "Scrum" and balance it out with lots of middle
management.

If true, this would shed some serious doubt about the code quality of YUI.
(I should probably peer-review it soon.)


PointedEars
 
A

AC

OK here's all the code (I'd omitted repetitions and the obvious bits
for brevity). It's come from an ASP.net page so you'll have to work
around the asp bits I'm afraid...

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page title</title>
<link href="ActiveStyle.css" rel="stylesheet" type="text/css" />
<link href="MenuStyle.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="script/
menu.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="pagebody">
<div id="logo">
<asp:Image ID="imgLogo" runat="server"
EnableTheming="False"
EnableViewState="False" ImageUrl="~/images/
BITS_200x123.png" />
</div>
<div id="loginlinks">
<asp:Literal ID="litDate" runat="server"
EnableViewState="False" Mode="PassThrough"></asp:Literal><br />
<!--
* * * * * * * * * * * * * * * * * * * * * *
*
*  this is the iframe that breaks the javascript....
*
<iframe src="chat.html" frameborder="0" scrolling="no"
id="chatFrame" name="chatFrame" /> -->
*
* * * * * * * * * * * * * * * * * * * * * *
</div>
<div id="navmenu">
<img src="images/menu.png" id="navmenuimg"
usemap="#menumap" alt="Main menu" />
<map name="menumap" id="menumap" >
<area shape="rect" coords="0,0,140,20" href="#"
id="menumap_item1" alt="1" />
<area shape="rect" coords="0,21,140,40" href="#"
id="menumap_item2" alt="2" />
<area shape="rect" coords="0,41,140,60" href="#"
id="menumap_item3" alt="3" />
<area shape="rect" coords="0,61,140,80" href="#"
id="menumap_item4" alt="4" />
<area shape="rect" coords="0,101,140,120" href="#"
id="menumap_item5" alt="5" />
</map>
</div>
<div class="navmenu_spacer_top">
</div>
<div id="navmenu_item1" class="navmenu_sub1">
<a href="#" name="navmenu_item1_0_link"
id="navmenu_item1_0_link" onmouseover="swapMenu('navmenu_item1_0_img',
item1Images[0][1].src);" onmouseout="swapMenu('navmenu_item1_0_img',
item1Images[0][0].src);"><img src="images/menu_item1_0.png"
id="navmenu_item1_0_img" alt="1.1" title="1.1" /></a><a href="#"></a>
<a href="#" name="navmenu_item1_1_link"
id="navmenu_item1_1_link" onmouseover="swapMenu('navmenu_item1_1_img',
item1Images[1][1].src);" onmouseout="swapMenu('navmenu_item1_1_img',
item1Images[1][0].src);"><img src="images/menu_item1_1.png"
id="navmenu_item1_1_img" alt="1.2" title="1.2" /></a><a href="#"></a>
<a href="#" name="navmenu_item1_2_link"
id="navmenu_item1_2_link" onmouseover="swapMenu('navmenu_item1_2_img',
item1Images[2][1].src);" onmouseout="swapMenu('navmenu_item1_2_img',
item1Images[2][0].src);"><img src="images/menu_item1_2.png"
id="navmenu_item1_2_img" alt="1.3" title="1.3" /></a><a href="#"></a>
</div>
<div class="navmenu_spacer">
</div>
<div id="navmenu_item2" class="navmenu_sub1">
<a href="#" name="navmenu_item2_0_link"
id="navmenu_item2_0_link" onmouseover="swapMenu('navmenu_item2_0_img',
item2Images[0][1].src);" onmouseout="swapMenu('navmenu_item2_0_img',
item2Images[0][0].src);"><img src="images/menu_item2_0.png"
id="navmenu_item2_0_img" alt="2.1" title="2.1" /></a><a href="#"></a>
<a href="#" name="navmenu_item2_1_link"
id="navmenu_item2_1_link" onmouseover="swapMenu('navmenu_item2_1_img',
item2Images[1][1].src);" onmouseout="swapMenu('navmenu_item2_1_img',
item2Images[1][0].src);"><img src="images/menu_item2_1.png"
id="navmenu_item2_1_img" alt="2.2" title="2.2" /></a><a href="#"></a>
<a href="#" name="navmenu_item2_2_link"
id="navmenu_item2_2_link" onmouseover="swapMenu('navmenu_item2_2_img',
item2Images[2][1].src);" onmouseout="swapMenu('navmenu_item2_2_img',
item2Images[2][0].src);"><img src="images/menu_item2_2.png"
id="navmenu_item2_2_img" alt="2.3" title="2.3" /></a><a href="#"></a>
<a href="#" name="navmenu_item2_3_link"
id="navmenu_item2_3_link" onmouseover="swapMenu('navmenu_item2_3_img',
item2Images[3][1].src);" onmouseout="swapMenu('navmenu_item2_3_img',
item2Images[3][0].src);"><img src="images/menu_item2_3.png"
id="navmenu_item2_3_img" alt="2.4" title="2.4" /></a><a href="#"></a>
</div>
<div class="navmenu_spacer">
</div>
<div id="navmenu_item3" class="navmenu_sub1">
<a href="#" name="navmenu_item3_0_link"
id="navmenu_item3_0_link" onmouseover="swapMenu('navmenu_item3_0_img',
item3Images[0][1].src);" onmouseout="swapMenu('navmenu_item3_0_img',
item3Images[0][0].src);"><img src="images/menu_item3_0.png"
id="navmenu_item3_0_img" alt="3.1" title="3.1" /></a><a href="#"></a>
<a href="#" name="navmenu_item3_1_link"
id="navmenu_item3_1_link" onmouseover="swapMenu('navmenu_item3_1_img',
item3Images[1][1].src);" onmouseout="swapMenu('navmenu_item3_1_img',
item3Images[1][0].src);"><img src="images/menu_item3_1.png"
id="navmenu_item3_1_img" alt="3.2" title="3.2" /></a><a href="#"></a>
<a href="#" name="navmenu_item3_2_link"
id="navmenu_item3_2_link" onmouseover="swapMenu('navmenu_item3_2_img',
item3Images[2][1].src);" onmouseout="swapMenu('navmenu_item3_2_img',
item3Images[2][0].src);"><img src="images/menu_item3_2.png"
id="navmenu_item3_2_img" alt="3.3" title="3.3" /></a><a href="#"></a>
<a href="#" name="navmenu_item3_3_link"
id="navmenu_item3_3_link" onmouseover="swapMenu('navmenu_item3_3_img',
item3Images[3][1].src);" onmouseout="swapMenu('navmenu_item3_3_img',
item3Images[3][0].src);"><img src="images/menu_item3_3.png"
id="navmenu_item3_3_img" alt="3.4" title="3.4" /></a><a href="#"></a>
</div>
<div class="navmenu_spacer">
</div>
<div id="navmenu_item4" class="navmenu_sub1">
<a href="#" name="navmenu_item4_0_link"
id="navmenu_item4_0_link" onmouseover="swapMenu('navmenu_item4_0_img',
item4Images[0][1].src);" onmouseout="swapMenu('navmenu_item4_0_img',
item4Images[0][0].src);"><img src="images/menu_item4_0.png"
id="navmenu_item4_0_img" alt="4.1" title="4.1" /></a><a href="#"></a>
<a href="#" name="navmenu_item4_1_link"
id="navmenu_item4_1_link" onmouseover="swapMenu('navmenu_item4_1_img',
item4Images[1][1].src);" onmouseout="swapMenu('navmenu_item4_1_img',
item4Images[1][0].src);"><img src="images/menu_item4_1.png"
id="navmenu_item4_1_img" alt="4.2" title="4.2" /></a><a href="#"></a>
<a href="#" name="navmenu_item4_2_link"
id="navmenu_item4_2_link" onmouseover="swapMenu('navmenu_item4_2_img',
item4Images[2][1].src);" onmouseout="swapMenu('navmenu_item4_2_img',
item4Images[2][0].src);"><img src="images/menu_item4_2.png"
id="navmenu_item4_2_img" alt="4.3" title="4.3" /></a><a href="#"></a>
<a href="#" name="navmenu_item4_3_link"
id="navmenu_item4_3_link" onmouseover="swapMenu('navmenu_item4_3_img',
item4Images[3][1].src);" onmouseout="swapMenu('navmenu_item4_3_img',
item4Images[3][0].src);"><img src="images/menu_item4_3.png"
id="navmenu_item4_3_img" alt="4.4" title="4.4" /></a><a href="#"></a>
<a href="#" name="navmenu_item4_4_link"
id="navmenu_item4_4_link" onmouseover="swapMenu('navmenu_item4_4_img',
item4Images[4][1].src);" onmouseout="swapMenu('navmenu_item4_4_img',
item4Images[4][0].src);"><img src="images/menu_item4_4.png"
id="navmenu_item4_4_img" alt="4.5" title="4.5" /></a><a href="#"></a>
</div>
<div class="navmenu_spacer">
</div>
<div id="navmenu_blank" class="navmenu_sub1">
</div>
<div class="navmenu_spacer">
</div>
<div id="navmenu_item5" class="navmenu_sub1">
<img src="images/menu_item5_0.png"
id="navmenu_item5_0_img" alt="Main contact phone number" title="Main
contact phone number" /><a href="#"></a>
<img src="images/menu_item5_1.png"
id="navmenu_item5_1_img" alt="Main fax number" title="Main fax
number" /><a href="#"></a>
<a href="#" name="navmenu_item5_2_link"
id="navmenu_item5_2_link" onmouseover="swapMenu('navmenu_item5_2_img',
item5Images[2][1].src);" onmouseout="swapMenu('navmenu_item5_2_img',
item5Images[2][0].src);"><img src="images/menu_item5_2.png"
id="navmenu_item5_2_img" alt="Enquiries email address"
title="Enquiries email address" /></a><a href="#"></a>
<img src="images/menu_item5_3.png"
id="navmenu_item5_3_img" alt="Out of hours mobile" title="Out of hours
mobile" /><a href="#"></a>
</div>
<div id="pagecontent">
<asp:ContentPlaceHolder id="PageContentPlaceHolder"
runat="server" >
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>

[chat.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whatever</title>
<link href="ActiveStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Whatever</h1>
</body>
</html>

[/chat.html]

[menu.js]
function getElementsByClass(searchClass, node, tag)
{
var classElements = new Array();

if (node == null)
node = document;

if (tag == null)
tag = '*';

var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++)
{
if (pattern.test(els.className) )
{
classElements[j] = els;
j++;
}
}

return classElements;
}



function showGeneric(targetClass, targetId)
{
var i;
var classElements = getElementsByClass(targetClass,
document.form1);

// hide all of these
for (i = 0; i < classElements.length; i++)
classElements.style.visibility = "hidden";

if (targetId)
{
// find the one we're interested in showing
var targetElem = document.getElementById(targetId);
if (targetElem)
targetElem.style.visibility = "visible";
}
}

function swapMenu(targetId, srcUrl)
{
var targetObj = document.getElementById(targetId);
if (targetObj)
targetObj.src = srcUrl;
}

function swapMenuImage(menuImageUrl, menuId, subMenuId, subMenuClass)
{
swapMenu(menuId, menuImageUrl);
showGeneric(subMenuClass, subMenuId);
}

function createMenuArray(normalUrl, hoverUrl)
{
var arrayOut = new Array(2);

arrayOut[0] = new Image();
arrayOut[1] = new Image();
arrayOut[0].src = normalUrl;
arrayOut[1].src = hoverUrl;

return arrayOut;
}

function preLoadImages()
{
imgItem1 = new Image();
imgItem2 = new Image();
imgItem3 = new Image();
imgItem4 = new Image();
imgItem5 = new Image();

// main menu
imgItem1.src = "images/menu_item1.png";
imgItem2.src = "images/menu_item2.png";
imgItem3.src = "images/menu_item3.png";
imgItem4.src = "images/menu_item4.png";
imgItem5.src = "images/menu_item5.png";

// first menu
item1Images = new Array();
item1Images[0] = createMenuArray("images/menu_item1_0.png",
"images/menu_item1_0_hover.png");
item1Images[1] = createMenuArray("images/menu_item1_1.png",
"images/menu_item1_1_hover.png");
item1Images[2] = createMenuArray("images/menu_item1_2.png",
"images/menu_item1_2_hover.png");

// second menu
item2Images = new Array();
item2Images[0] = createMenuArray("images/menu_item2_0.png",
"images/menu_item2_0_hover.png");
item2Images[1] = createMenuArray("images/menu_item2_1.png",
"images/menu_item2_1_hover.png");
item2Images[2] = createMenuArray("images/menu_item2_2.png",
"images/menu_item2_2_hover.png");
item2Images[3] = createMenuArray("images/menu_item2_3.png",
"images/menu_item2_3_hover.png");

// third menu
item3Images = new Array();
item3Images[0] = createMenuArray("images/menu_item3_0.png",
"images/menu_item3_0_hover.png");
item3Images[1] = createMenuArray("images/menu_item3_1.png",
"images/menu_item3_1_hover.png");
item3Images[2] = createMenuArray("images/menu_item3_2.png",
"images/menu_item3_2_hover.png");
item3Images[3] = createMenuArray("images/menu_item3_3.png",
"images/menu_item3_3_hover.png");

// forth menu
item4Images = new Array();
item4Images[0] = createMenuArray("images/menu_item4_0.png",
"images/menu_item4_0_hover.png");
item4Images[1] = createMenuArray("images/menu_item4_1.png",
"images/menu_item4_1_hover.png");
item4Images[2] = createMenuArray("images/menu_item4_2.png",
"images/menu_item4_2_hover.png");
item4Images[3] = createMenuArray("images/menu_item4_3.png",
"images/menu_item4_3_hover.png");
item4Images[4] = createMenuArray("images/menu_item4_4.png",
"images/menu_item4_4_hover.png");

// fifth menu
item5Images = new Array();
item5Images[0] = new Image();
item5Images[0].src = "images/menu_item5_0.png";
item5Images[1] = new Image();
item5Images[1].src = "images/menu_item5_0.png";
item5Images[2] = createMenuArray("images/menu_item5_2.png",
"images/menu_item5_2_hover.png");
item5Images[3] = new Image();
item5Images[3].src = "images/menu_item5_0.png";
item5Images[4] = new Image();
item5Images[4].src = "images/menu_item5_0.png";

}

function swapMenu1()
{
swapMenuImage(imgItem1.src, "navmenuimg", "navmenu_item1",
"navmenu_sub1");
}

function swapMenu2()
{
swapMenuImage(imgItem2.src, "navmenuimg", "navmenu_item2",
"navmenu_sub1")
}

function swapMenu3()
{
swapMenuImage(imgItem3.src, "navmenuimg", "navmenu_item3",
"navmenu_sub1");
}

function swapMenu4()
{
swapMenuImage(imgItem4.src, "navmenuimg", "navmenu_item4",
"navmenu_sub1")
}

function swapMenu5()
{
swapMenuImage(imgItem5.src, "navmenuimg", "navmenu_item5",
"navmenu_sub1")
}

function prepEvents()
{
// main menu
document.getElementById("menumap_item1").onmouseover = swapMenu1;
document.getElementById("menumap_item2").onmouseover = swapMenu2;
document.getElementById("menumap_item3").onmouseover = swapMenu3;
document.getElementById("menumap_item4").onmouseover = swapMenu4;
document.getElementById("menumap_item5").onmouseover = swapMenu5;

}

function windowLoad()
{
preLoadImages();
prepEvents();
}

window.onload = windowLoad;

[/menu.js]


[MenuStyle.css]
#navmenu img
{
border:0px;
}

..navmenu_sub1
{
height:17px;
visibility:hidden;
vertical-align:top;
}

..navmenu_sub1 img
{
border:0px;
}

#navmenu_blank
{
}

..navmenu_spacer_top
{
height:8px;
}

..navmenu_spacer
{
height:3px;
visibility:hidden;
}

[/MenuStyle.css]


Phew!

Thanks for the assistance,
AC
 
G

Gregor Kofler

AC meinte:
OK here's all the code (I'd omitted repetitions and the obvious bits
for brevity). It's come from an ASP.net page so you'll have to work
around the asp bits I'm afraid...

[hundreds of lines snipped]

Thanks for shortening. Anyway, I doubt that anybody will look into it.
Reading phone books provides better entertainment.

Gregor
 
T

Thomas 'PointedEars' Lahn

AC said:
OK here's all the code (I'd omitted repetitions and the obvious bits
for brevity).

I don't see anyone asking for it. Especially not me, whose posting
you have nonsensically replied to. Please read and take heed of
It's come from an ASP.net page so you'll have to work
around the asp bits I'm afraid...

You will have to work through it by yourself, I'm afraid. Understand that
there is no point in your posting server-side code if you have a client-side
problem like this one.

And there is no point in serving XHTML to a UA that does not support it,
like MSHTML. (However, I don't know if XHTML is a requirement for ASP .NET.)
[more than 400 lines of almost completely uncommented source code]
Phew!

Yes, indeed. You must be kidding (and badly at that), dumping core here.
Thanks for the assistance,

ISTM you are looking for someone to do your homework, in their
free time, for free. This is definitely the wrong place for that.

<http://catb.org/~esr/faqs/smart-questions.html>


PointedEars
 
A

AC

I don't know if you've read the original post, but it asked how to
reference elements when the page includes an iframe. The original code
was posted to demonstrate how elements were being referenced in the
page without an iframe, that worked. The long code was posted when it
was asked for. Maybe I replied to the wrong person - apologies if
that's the case.

Never mind, thanks anyway.
 
T

Thomas 'PointedEars' Lahn

AC said:
I don't know if you've read the original post,

I don't know if you actually read my post as you are repeating much the same
errors that were pointed out to you already, most notably none-quoting.
but it asked how to reference elements when the page includes an iframe.
The original code was posted to demonstrate how elements were being
referenced in the page without an iframe, that worked. The long code was
posted when it was asked for.

Garrett's request to "Post the real code." does not include the request to
post *all* the code, including the irrelevant parts. And it would _not_
mean the *server-side code*. At least not when using common sense. Think
about it: Would you actually want to spend your free time to dig through
hundreds of irrelevant uncommented lines in order to find the relevant ones
maybe, provided your NetNews user agent could handle that?
Maybe I replied to the wrong person

You replied to the wrong posting as it did not contain such a request.
Learn how threaded discussions work.
- apologies if that's the case.

Accepted, I think.
Never mind, thanks anyway.

You're welcome, I think.


PointedEars
 
S

SAM

AC a écrit :
I don't know if you've read the original post, but it asked how to
reference elements when the page includes an iframe.

Perhaps could you when you post (and answer) copy a part (significative
part) of the previous post.
As we could understand of what i's question, matter, subject ...

The original code
was posted to demonstrate how elements were being referenced in the
page without an iframe, that worked.

No, nothing was worked in previous code : no JS ... !
The long code was posted when it
was asked for. Maybe I replied to the wrong person - apologies if
that's the case.

Never mind, thanks anyway.

Not time by now
I'll try to see it this evening (6 hours)

But if it would have been possible to have the code seen by a browser it
would be much better.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top