window getElementByID works in IE but not in FireFox --- Help!

Discussion in 'Javascript' started by Derek Erb, Apr 13, 2005.

  1. Derek Erb

    Derek Erb Guest

    I am banging my head against the wall with this one. The following
    code snippets work perfectly fine in MSIE6. But produce an error in
    Firefox and do not work at all.

    BROWSER.HTM
    <HTML>
    ....
    <div class="Abb">
    <h2 id="ABTit">BROWSER</h2>
    </div>
    ....
    </HTML>

    function MyFun() {
    var aWin = window.open(strURL, 'BROWSERWIN',
    "dependent=yes,menubar=no,resizable=yes,scrallbars=yes,toolbar=no,left=100,top=100,width=500,height=400");

    aWin.document.getElementById('ABTit').innerHTML='MYTEXT';
    }

    My INDEX.HTM file calls the MyFun function which opens the BROWSER.HTM
    file. The MyFun function is trying to modify the BROWSER.HTM window
    contents and style.

    In FireFox this produces the following error in the JavaScript Console
    "aWin.document.getElementById("ABTit") has no properties".

    I've seen that one before and normally it means I made a spelling error
    somewhere... But this time it works fine in MSIE 6 and not in Firefox.

    aWin.document.writeln("TESTING") works fine in both browsers.

    I've tried various combinations and various web sites. I'm stumped...

    Help!
     
    Derek Erb, Apr 13, 2005
    #1
    1. Advertising

  2. Derek Erb

    Fred Oz Guest

    Derek Erb wrote:
    > I am banging my head against the wall with this one. The following
    > code snippets work perfectly fine in MSIE6. But produce an error in
    > Firefox and do not work at all.
    >
    > BROWSER.HTM
    > <HTML>
    > ...
    > <div class="Abb">
    > <h2 id="ABTit">BROWSER</h2>
    > </div>
    > ...
    > </HTML>
    >
    > function MyFun() {
    > var aWin = window.open(strURL, 'BROWSERWIN',
    > "dependent=yes,menubar=no,resizable=yes,scrallbars=yes,toolbar=no,left=100,top=100,width=500,height=400");
    >
    > aWin.document.getElementById('ABTit').innerHTML='MYTEXT';
    > }
    >
    > My INDEX.HTM file calls the MyFun function which opens the BROWSER.HTM
    > file. The MyFun function is trying to modify the BROWSER.HTM window
    > contents and style.
    >
    > In FireFox this produces the following error in the JavaScript Console
    > "aWin.document.getElementById("ABTit") has no properties".
    >
    > I've seen that one before and normally it means I made a spelling error
    > somewhere... But this time it works fine in MSIE 6 and not in Firefox.
    >
    > aWin.document.writeln("TESTING") works fine in both browsers.
    >
    > I've tried various combinations and various web sites. I'm stumped...


    The most likely reason is that ABTit does not exist when
    document.getElementById() tries to get it - the new window is still
    creating the document.

    --
    Fred
     
    Fred Oz, Apr 14, 2005
    #2
    1. Advertising

  3. Derek Erb

    RobB Guest

    Derek Erb wrote:
    > I am banging my head against the wall with this one. The following
    > code snippets work perfectly fine in MSIE6. But produce an error in
    > Firefox and do not work at all.
    >
    > BROWSER.HTM
    > <HTML>
    > ...
    > <div class="Abb">
    > <h2 id="ABTit">BROWSER</h2>
    > </div>
    > ...
    > </HTML>
    >
    > function MyFun() {
    > var aWin = window.open(strURL, 'BROWSERWIN',
    >

    "dependent=yes,menubar=no,resizable=yes,scrallbars=yes,toolbar=no,left=100,top=100,width=500,height=400");
    >
    > aWin.document.getElementById('ABTit').innerHTML='MYTEXT';
    > }
    >
    > My INDEX.HTM file calls the MyFun function which opens the

    BROWSER.HTM
    > file. The MyFun function is trying to modify the BROWSER.HTM window
    > contents and style.
    >
    > In FireFox this produces the following error in the JavaScript

    Console
    > "aWin.document.getElementById("ABTit") has no properties".
    >
    > I've seen that one before and normally it means I made a spelling

    error
    > somewhere... But this time it works fine in MSIE 6 and not in

    Firefox.
    >
    > aWin.document.writeln("TESTING") works fine in both browsers.
    >
    > I've tried various combinations and various web sites. I'm

    stumped...
    >
    > Help!


    All window.open() does is 1) open a new window, 2) set its location to
    the specified url, and 3) return the new window object. The last -
    which allows any subsequent code to run - is not necessarily
    synchronous with the new document loading and being available for
    scripting. One way to avoid this is to load the new document as a
    javascript: url (favelet): as this is loaded into window.location, like
    a file, it always works. Depends on how elaborate the document is, and
    whether there needs to be any preprocessing of it back at the server.
    Here's a sample:

    Put something like this in the opener window:

    function getDoc(myText)
    {
    return [

    '<html><head><title>Yo!</title></head>' ,
    '<body style="background:.........' ,
    '<div class="Abb"><h2 id="ABTit">' ,
    myText ,
    '</h2></div>........etc..........'

    ].join('');
    }

    Then:

    var aWin = null;
    function MyFun(myText)
    {
    aWin = window.open(
    'javascript:eek:pener.getDoc("' + myText + '")',
    'BROWSERWIN',

    'menubar=no,resizable=yes,scrollbars=yes,toolbar=no,left=100,top=100,width=500,height=400'
    );
    }

    ..........

    MyFun('MYTEXT');
     
    RobB, Apr 14, 2005
    #3
  4. Derek Erb

    Derek Erb Guest

    Thank you for your reply.

    I don't understand why the window would be open in MSIE but still be
    creating the document in Firefox.

    However, regardless, is there some way to make my code wait until the
    window is created and the document is ready so that I am certain I can
    modify it?

    Thank you in advance for your assistance.
     
    Derek Erb, Apr 14, 2005
    #4
  5. Derek Erb

    Fred Oz Guest

    Derek Erb wrote:
    > Thank you for your reply.
    >
    > I don't understand why the window would be open in MSIE but still be
    > creating the document in Firefox.


    Because once the script has created the window, it has finished its
    job and moves on. The window then proceeds to load the document at
    its own pace.

    As for why one browser has finished creating the document and the
    other hasn't - browser inconsistency is one of the fundamental
    attractions of web programming.

    >
    > However, regardless, is there some way to make my code wait until the
    > window is created and the document is ready so that I am certain I can
    > modify it?
    >


    Read RobB's post below.



    --
    Fred
     
    Fred Oz, Apr 14, 2005
    #5
  6. Derek Erb

    DU Guest

    Derek Erb wrote:
    > I am banging my head against the wall with this one. The following
    > code snippets work perfectly fine in MSIE6. But produce an error in
    > Firefox and do not work at all.
    >
    > BROWSER.HTM
    > <HTML>
    > ...
    > <div class="Abb">
    > <h2 id="ABTit">BROWSER</h2>
    > </div>
    > ...
    > </HTML>
    >
    > function MyFun() {
    > var aWin = window.open(strURL, 'BROWSERWIN',
    > "dependent=yes,menubar=no,resizable=yes,scrallbars=yes,toolbar=no,left=100,top=100,width=500,height=400");


    var aWin:
    Creating a local reference to the window object is not recommendable. As
    soon as you're outside the scope of the function, that reference is
    useless. The only way you can overcome the asynchronous problem of
    window creating and document loaded and functional is to use a global
    variable to store the window reference and then use it from the opener
    to modify your node.

    dependent=yes: will not work in MSIE 6
    scrallbars=yes: will not render scrollbars if needed, if content
    overflows window dimensions in all browsers

    >
    > aWin.document.getElementById('ABTit').innerHTML='MYTEXT';


    Poor usage of innerHTML: you have no node to insert, just a text node.
    It's much better to use DOM 2 CharacterData attribute or just setting
    the nodeValue directly. It's not only using web standards, it's not only
    supported by MSIE 5+, Mozilla-based browsers, Safari 1.x, Opera 7.x,
    Konqueror 3.x,etc. but it is also more efficient than innerHTML and it
    is not a W3C DOM attribute.

    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.7 :)
     
    DU, Apr 17, 2005
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. lawrence
    Replies:
    3
    Views:
    221
  2. Dave Hammond
    Replies:
    9
    Views:
    118
    Evertjan.
    Feb 16, 2005
  3. wk
    Replies:
    5
    Views:
    199
    Dietmar Meier
    Apr 22, 2005
  4. DamonChong
    Replies:
    4
    Views:
    95
    Damon Chong
    Dec 29, 2005
  5. Replies:
    8
    Views:
    258
    Randy Webb
    Jan 13, 2006
Loading...

Share This Page