Solved

Javascript Frames navigation has stopped working for some -- not all (IE6)

Posted on 2004-10-26
242 Views
Last Modified: 2008-02-01
My website has a members area with some nested framesets like this:

A webpage (toolbar.html) creates a header frame across the top (headerFr), and then the bottom frame (mainFr)
The source of mainFr is another frameset: a left panel (panelFr) and a main content window (botFr).

I can include the frameset HTML if it is necessary... but I dont think that this is the problem.

The links in the headerFr call javascript code to change both of the other frames. Further, there is some javascript code in the panel frame that actually changes the color of some pieces in the header frame. I tested and re-tested all of this and it works great.

Just in the last few weeks, I am getting complaints from some that the javascript links in the headerFr are not working. The common thread is that the users are using Windows XP with IE6.

-----------------------------------------------
HTML from headerFr:

<HTML>
<HEAD>
<META Http-Equiv="Cache-Control" Content="no-cache">
<META Http-Equiv="Pragma" Content="no-cache">
<META Http-Equiv="Expires" Content="0">
<!--
-->
<script type="text/javascript" language="JavaScript">
<!--
if (top.location == self.location) { top.location.href="toolbar.html" }
//-->
      function selectNavTab(name) {
            var element,i,classNm;
            navElement = new Array("NAV1","NAV2","NAV3","NAVlogout")
            for (i=0;i<navElement.length;i++) {
                        
                  if (document.getElementById(navElement[i])) {
                        element = document.getElementById(navElement[i]);
                        classNm = (name == navElement[i]) ? "select" : "";
                        element.className=classNm;
                  }
            }
      }      
</script>
<SCRIPT type="text/javascript" language = "JavaScript">
<!--
      function changeNAV(whichPage) {
            switch (whichPage) {
                  case "NAV1" :
                        selectNavTab("NAV1");
                        parent.mainFr.panelFr.location.href="**loc**";
                        parent.mainFr.botFr.location.href="**loc**";
                  break;
                  case "NAV2" :
                        selectNavTab("NAV2");
                        parent.mainFr.panelFr.location.href="**loc**";
                        parent.mainFr.botFr.location.href="**loc**";
                  break;
                  case "NAV3" :
                        selectNavTab("NAV3");
                        parent.mainFr.panelFr.location.href="**loc**";
                        parent.mainFr.botFr.location.href="**loc**";
                  break;
                  case "NAVlogout" :
                        selectNavTab("NAVlogout");
                        parent.mainFr.botFr.location.href="logout.cgi";
                  break;
            }            
      }
//-->
</SCRIPT>
</HEAD>

<STYLE>
BODY {margin-left:0px;}
#navigation {
      font-family:verdana;
      font-size: 11px;
      font-weight: bold;
}

#navigation A {
      color: #000;
      background: #fc0 url("/images/members/tab-FFCC00-left.gif") left top no-repeat;
      text-decoration: none;
      padding-left:10px;
}

#navigation A span {
      background: url("/images/members/tab-FFCC00-right.gif") right top no-repeat;
      padding-right: 10px;
}      

#navigation A:hover {
      color: #fff;
      background: #000040 url("/images/members/tab-000040-left.gif") left top no-repeat;
      text-decoration: none;
      padding-left: 10px
}

#navigation A:hover span {
      background: url("/images/members/tab-000040-right.gif") right top no-repeat;
      padding-right: 10px
}

#navigation A.select {
      color: #fff;
      background: #000040 url("/images/members/tab-000040-left.gif") left top no-repeat;
      text-decoration: none;
      padding-left:10px;
}

#navigation A.select span {
      background: url("/images/members/tab-000040-right.gif") right top no-repeat;
      padding-right: 10px;
}

#navigation A.select:hover {
      color: #fff;
      background: #000040 url("/images/members/tab-000040-left.gif") left top no-repeat;
      text-decoration: none;
      padding-left: 10px
}



#navigation ul {
      list-style: none;
      padding: 0;
      margin: 0;
}
#navigation li {
      float: left;
      display: block;
      margin: 0;
      padding: 0;      
}

.headline {
      font-family:Tahoma,verdana;
      font-size:16px;
      color: #000040;
      font-weight:bold;
}

</STYLE>


<BODY>

<table bgcolor="#FFFFFF" width="100%" height="60" border="0" cellspacing="0" cellpadding="0">
<TR valign=top><TD align="left">

      <TABLE border=0 cellpadding=0 cellspacing=0>
      <tr valign=top><td style='padding-left:15px;padding-bottom:3px;'><img src="/images/logo/logo_small.gif"></TD>
      <TD style='padding-left:5px;padding-bottom:3px;' nowrap><span class='headline'>Members Area</span></TD>
      </TR>
      </TABLE>


      <table border="0" cellpadding="0" cellspacing="0" width="750">
      <TR>
      <TD>
            <ul id="navigation">
            <li><a href="javascript:changeNAV('NAV1');" id="NAV1" class="select"><span>Home</span></a></li>
            <li><a href="javascript:changeNAV('NAV2');" id="NAV2" ><span>Area1</span></a></li>
            <li><a href="javascript:changeNAV('NAV3');" id="NAV3" ><span>Area2</span></a></li>
            <li><a href="javascript:changeNAV('NAVlogout');" id="NAVlogout" ><span>Log Out</span></a></li>
            <li><a href="**loc**" target="_top"><span>Having Trouble?</span></a></li>
            </ul>            
      </TD>
      </TR>
      <TR><TD bgcolor="#000040">&nbsp;</TD></TR>
      </table>

</TD>
</TR>
</table>

</BODY>
</HTML>


------------------------------------------------
------------------------------------------------
sample HTML from panelFr:

<HTML>
<HEAD>
<META Http-Equiv="Cache-Control" Content="no-cache">
<META Http-Equiv="Pragma" Content="no-cache">
<META Http-Equiv="Expires" Content="0">
<link href="/stylesht/members_only/NEWmenu.css" rel="stylesheet" type="text/css">

<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT" SRC="/javascript/members_only.js">
</SCRIPT>
      <TITLE>Nav Bar</TITLE>
<!-- CHANGE Select Tab in Header Frame -->
<script type="text/javascript" language="JavaScript">
      if (top.location == self.location) { top.location.href="toolbar.html" }
      parent.parent.headerFr.selectNavTab("NAV1");
</script>

</HEAD>
<BODY BGCOLOR="#000040" topmargin="0" leftmargin="0">

<table border=0 width="130" cellpadding="0" cellspacing="0">
      
      <TR><TD></TD><TD><HR color="darkblue"></TD></TR>

<!-- HOME -->
      <TR valign="top"><td valign=top nowrap height="14"><img src="/images/folder.gif" width=14 height=11 border=0></td><td valign=top nowrap><span class="heading">&nbsp;Home</span></td></tr>
      <TR valign="top"><TD></TD><td valign=top nowrap>&nbsp;<a class="subhead" href="member_intropage.html" target="botFr" onMouseover="window.status='Return To Members Area Home';return true" onMouseout="window.status='';return true">Home <span style="font-size:10px;font-family:Arial;">(acct. overview)</span></a></td></tr>

      
      <TR><TD></TD><TD><HR color="darkblue"></TD></TR>


<!-- ADMIN -->
      <TR valign="top"><td valign=top nowrap height="14"><img src="/images/wsr/folder.gif" width=14 height=11 border=0></td><td><span class="heading">&nbsp;Admin</span></td></tr>
      <TR valign="top"><TD></td><td valign=top nowrap><a class="subhead" href="**ACTION**" target="botFr" onMouseover="window.status='Do this action...';return true" onMouseout="window.status='';return true">Action 1</a></td></tr>
      <TR valign="top"><TD></td><td valign=top nowrap><a class="subhead" href=**ACTION**" target="botFr" onMouseover="window.status='Do this action...';return true" onMouseout="window.status='';return true">Action 2</a></td></tr>
      
      <TR><TD></TD><TD><HR color="darkblue"></TD></TR>

</table>

</BODY>
</HTML>


======================================

From those that are complaining, links from the panelFr DO change the content of botFr, but nothing happens when clicking the links in the headerFr.

I cannot duplicate this problem, and have tried using several different browsers on Mac and PC. Very frustrating.

"toolbar.html" calls the opening frameset (headerFr and mainFr), just in case someone tries to open a subframe in a new window.

I have been researching the popup blocker angle, and asking someone with problems to <control>click the links does not help.

Anyone?
0
Question by:shambright
    11 Comments
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    IE6 on XP  With SP2 installed?

    SP2 not only includes popup blocking but also closed some security holes.  Cross frame exploits was one of them, and it may be that something in your code is being interepreted as re-direction in a frame or launch of executable code.  It will probaly takes some trial and error to find the specific code SP@ does not like if that is what it is.


    Cd&
    0
     

    Author Comment

    by:shambright
    From what I am gathering from the complaints, Service Pack 2 is involved.

    My suspicion is the following line from the HTML of 'panelFr':

         parent.parent.headerFr.selectNavTab("NAV1");

    The header frame is nothing more than some navigation tabs that change color when selected. Since it is possible for someone to navigate to a new panel frame (load a new 'panelFr') WITHOUT using the tabs at the top, I added this javascript line to change to the appropriate color in the header frame.

    Trial and error is all that I have been doing. With all due respect, I am hoping for more than "figure it out yourself".
    0
     

    Author Comment

    by:shambright
    From msdn.mirosoft.com:

    Does your site launch a pop-up from a pop-up?
       Wherever possible, do not launch an automatic pop-up window from another pop-up window. The second launch will not be considered a user action in the Pop-up Blocker and will be blocked.

    Does your Web site open a new window if information is requested asynchronously?
       Internet Explorer may block certain windows if the site opens them after requesting information asynchronously even if the user did click a link to open the window. Windows are not blocked if opened directly from a user-initiated action (a mouse-click) before requesting asynchronous information. User-initiated actions are not persisted across navigations.

    Does your Web site launch pop-up windows through ActiveX controls, or other objects on the page?
       As with other pop-up windows, if the window is not launched from a user action, the Pop-up Blocker will block it. One window will be allowed to open in response to a direct user action.

    ------------------------------------------------

    Does this mean that the code from headerFr that changes the two lower frames is no longer valid?
    Example:
                   case "NAV1" :
                        selectNavTab("NAV1");
                        parent.mainFr.panelFr.location.href="**loc**";
                        parent.mainFr.botFr.location.href="**loc**";
                   break;

    Is there another way to write this that SP2 may approve of??
    0
     
    LVL 53

    Accepted Solution

    by:
    I see two possible thing that might be causing the popup blocker a problem.  

    First it is going through the parent object, which is an indirect reference.  Try using top.frames['headerFr'].selectNavTab('NAV1');

    The second possibility is more difficult.  The fact that you are using a variable for the url instead of it being hard coded.  That should not normally be a problem, but it is new stuff for M$ and they may not have gotten it right.


    >>>I am hoping for more than "figure it out yourself".

    I understand the problem is very serious and important for you, and that you are paying EE for ad free access. I am not paid.  I volunteer my time.  At my normal billing rate, what you pay for a month subscription, is about 10 minutes of my time.  The fact that no other experts have posted a comment in the thread, and that it was here over 2 hours without a comment, indicates that there is no cut and dried solution that can just be posted.  All we can do with these type of problems is try and help you work through them.  Sorry if that does not meet your expectations, but I am giving you as much of my time as I can.

    Cd&
    0
     

    Author Comment

    by:shambright

    >>>I am hoping for more than "figure it out yourself".
    This is a comment out of frustration, and nothing more.

    I will try changing the references like you suggested.

    Thanks.


    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    I guarantee you that you are not alone in problems with SP2.  There are dozens of threads on the site right now dealing all sort of strange quirks and thing that have gotten broken.  Let's just work through and see if we can find something that solves this one.

    Cd&
    0
     

    Author Comment

    by:shambright
    I haven't forgotten about this thread. I am waiting for someone with an XP/IE6/SP2 computer to let me experiment.
    <sigh>
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    I'll be here when you need me.

    Cd&
    0
     

    Author Comment

    by:shambright

    It seems that "some can" and "some can't".
    The only way I can get it to break this by severely restricting my security settings.

    Thanks for the suggestions on direct references.
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    >>>The only way I can get it to break this by severely restricting my security settings.

    That makes sense.  One of the security holes that M$ had to fix, was  a cross-frame exploit that allowed hacker sites to steal files from client computers with objects hidden in subframes.  There were supposed to close both the cross-frame and cross-zone holes; which they did, but they have not done a very good job of cummunicating to user and developers what the impact is.

    Have you narrowed it down to a single security setting that breaks it, or is it a combination of settings?

    Cd&

    0
     

    Author Comment

    by:shambright

    Setting the Internet Options->Security to "High" disables javascript altogether.
    Setting Internet Options->Security to "Medium" lets everything work just fine (on the computer I was using, anyway...)
    Honestly, I did not go into detail on the specific security settings, because I figured the average user wouldn't either. Since the generic "Medium" setting worked, I stopped here.

    Setting the new Popup Blocker to "High" disables any links with " target='_blank' " Worse, a user can specify "Don't tell me you blocked this" - so any webistes using a link to a new window for legitimate reasons (like a help screen) could be blocked with no explanation and user will simply think "This does not work".

    So, folks with "Medium" security and "High" pop-up blocking only get part of the picture.

    Also, if you change any security settings AFTER you have loaded the page, the javascript on that page still will not work. You must reload the page, and in some cases, clear your cache after changing security settings. This isnt very intuitive for the average user, either, but may answer some of the "It didn't work yesterday, but it works now" people.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    860 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now