Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Problem with newWindow.document.getElementById()

    Hello, I am having a problem with javascript code:

    Code:
    newWindow.document.getElementByID()
    where "newWindow" is a new "window" object opened up with an existing file in the same directory as the current file.

    The complete function looks like this:

    Code:
     function showStreamInFullScreenMode(stream_id) {
    
    		   var params = "width=" + screen.width + ", height=" + screen.height + ", top=0, left=0" + "location=no, menubar=no, scrollbars=no," +
    		                "resizable=no, toolbar=no, directories=no, fullscreen=yes";
    		   var newWindow = window.open("fullscreenMode.html", "Fullscreen Mode", params, false);
    		   var customScript = "initOpenTokSession(\"" + stream_id + "\");";
    		   var scriptElement = newWindow.document.getElementById("customScript");
    		   scriptElement.innerHTML = customScript;
    		   if (window.focus) {
    		      newWindow.focus();
    		   }
                       
    	   }
    The bolded line of code is what is producing the error:

    scriptElement is null
    Note that the file that is opened (fullscreenMode.html) does indeed have a <script> html element with the id "customScript" so there is no reason why scriptElement should be null.

    I would appreciate any help anyone could offer.

    Thanks in advance.
    Last edited by CoderInTraining; 09-17-2011 at 07:07 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    This will not work ...

    Code:
    var newWindow = window.open("fullscreenMode.html", "Fullscreen Mode", params, false);
    var customScript = "initOpenTokSession(\"" + stream_id + "\");";
    var scriptElement = newWindow.document.getElementById("customScript");
    You are trying to access newWindow
    before it is loaded and ready.

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    This will not work ...

    Code:
    var newWindow = window.open("fullscreenMode.html", "Fullscreen Mode", params, false);
    var customScript = "initOpenTokSession(\"" + stream_id + "\");";
    var scriptElement = newWindow.document.getElementById("customScript");
    You are trying to access newWindow
    before it is loaded and ready.
    So how do I tell when it is loaded and ready?

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    CoderInTraining
    what you are trying to
    do here is possible but it
    just isn't that simple.
    Look at this code and
    try to apply it to
    your situation.


    Code:
    <html>
    <script>
    var scr = "function codeFromParent(){alert('I came from parent page')}";
    var params = "width=200,height=200,top=0,left=0";
    var newWindow = window.open("fullscreenMode.html", "myWindow", params, false);
    </script>
    <body>
    I am the parent page
    </body>
    </html>

    fullscreenMode.html ...


    Code:
    <html>
    <head>
    <script>
    function codeFromParent(){alert("I have no parent")}
    if(opener)
       eval(opener.scr);
    </script>
    </head>
    <body onload="codeFromParent()">
    I am a child page.
    </body>
    </html>
    Last edited by DaveyErwin; 09-18-2011 at 07:22 AM.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    CoderInTraining
    what you are trying to
    do here is possible but it
    just isn't that simple.
    Look at this code and
    try to apply it to
    your situation.


    Code:
    <html>
    <script>
    var scr = "function codeFromParent(){alert('I came from parent page')}";
    var params = "width=200,height=200,top=0,left=0";
    var newWindow = window.open("fullscreenMode.html", "myWindow", params, false);
    </script>
    <body>
    I am the parent page
    </body>
    </html>

    fullscreenMode.html ...


    Code:
    <html>
    <head>
    <script>
    function codeFromParent(){alert("I have no parent")}
    if(opener)
       eval(opener.scr);
    </script>
    </head>
    <body onload="codeFromParent()">
    I am a child page.
    </body>
    </html>
    Ok, I have both looked at your code and tested it, and have noted that when the second file is opened in a new window object of the first file, it ends up executing the codeFromParent() function version stored inside the string variable "scr" of the parent window. Note that I'm a bit unfamiliar with the behavior of the eval() function, and dont quite understand what's happening in that code. Is the end result of eval being executed upon opener.scr replacing the function definition of codeFromParent() above so the parent window version gets called by the child window version's body "onload" event, or is eval() calling the codeFromParent() function itself? But if the second is true, why don't I see both alerts, instead of just the one from the parent window version of the codeFromParent() function?

    Incidentally, I don't see how this relates at all to the original problem described in this thread (i.e. why the newWindow.document.getElementById() function is not working on an existing element of the new window's document)...

    Thanks for the reply though.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by CoderInTraining View Post

    Ok, I have both looked at your code and tested it, and have noted that when the second file is opened in a new window object of the first file, it ends up executing the codeFromParent() function version stored inside the string variable "scr" of the parent window. Note that I'm a bit unfamiliar with the behavior of the eval() function, and dont quite understand what's happening in that code.
    opener.scr
    actuall brings the string to
    fullscreenMode.html document
    eval(opener.scr);
    causes the sring to
    become actual script
    in the fullscreenMode.html document

    Quote Originally Posted by CoderInTraining View Post


    Is the end result of eval being executed upon opener.scr replacing the function definition of codeFromParent() above so the parent window version gets called by the child window version's body "onload" event, or is eval() calling the codeFromParent() function itself?
    The eval causes the function codeFromParent
    to become part of fullscreenMode.html document
    replacing the function of the same name already there.

    Quote Originally Posted by CoderInTraining View Post


    But if the second is true, why don't I see both alerts, instead of just the one from the parent window version of the codeFromParent() function?
    there is no call to the function in
    the parent window so it is mot executed there.

    Quote Originally Posted by CoderInTraining View Post

    Incidentally, I don't see how this relates at all to the original problem described in this thread (i.e. why the newWindow.document.getElementById() function is not working on an existing element of the new window's document)...

    Thanks for the reply though.
    Because you are trying to access it before
    the child window (fullscreenMode.html )
    is loaded and ready. It literalyy does not
    exist at the time you try to access it.

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Because you are trying to access it before
    the child window (fullscreenMode.html )
    is loaded and ready. It literalyy does not
    exist at the time you try to access it.
    Hmm...
    Ok, so you're suggesting that I place the call to newWindow.document.getElementById() inside fullscreenMode.html (though obviously, the call would be reduced to just document.getElementById)?
    The problem with that is, the whole point of that call in my showStreamInFullScreenMode() function is to add a call to the initOpenTokSession() function to the fullscreenMode.html code. Since that function requires a stream_id which only the parent window object is aware of, how would you suggest I put the stream_id into fullscreenMode.html then?

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by CoderInTraining View Post
    Hmm...
    Ok, so you're suggesting that I place the call to newWindow.document.getElementById() inside fullscreenMode.html
    ?
    No! I am not.
    Quote Originally Posted by CoderInTraining View Post

    the whole point of that call in my showStreamInFullScreenMode() function is to add a call to the initOpenTokSession() function to the fullscreenMode.html code.
    yes that is exactly what the code I showes you does.

    It adds the function "codeFromParent" to "fullscreenMode.html" .
    The code originates in the parent, it is transferred to
    the child then executed in the child.(fullscreenMode.html)
    Maybe? unless I am confused ?
    Where exactly is the function initOpenTokSession, I have been
    assuming it to be in fullscreenMode.html, is it ?

  • Users who have thanked DaveyErwin for this post:

    CoderInTraining (09-19-2011)

  • #9
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    No! I am not.


    yes that is exactly what the code I showes you does.

    It adds the function "codeFromParent" to "fullscreenMode.html" .
    The code originates in the parent, it is transferred to
    the child then executed in the child.(fullscreenMode.html)
    Maybe? unless I am confused ?
    Where exactly is the function initOpenTokSession, I have been
    assuming it to be in fullscreenMode.html, is it ?
    Ahh...I see.
    You're right, your method may work. I was in the process of going to all the trouble of putting the stream id into a file using a php script executed through ajax's XMLHttpRequest in the showStreamInFullScreenMode() function of the parent window, and then retrieving the stream id from a file using another php script (though this one with the use of sending .html files to the .php engine, so statements in javascript like this can work: "var streamId = <?php require_once 'getStreamIdFromFile.php'; ?>;"), but I can see your method is definitely a lot easier (if it works).

    I'm going to go reboot now into my XP OS to test your idea, since I'm in Ubuntu right now typing this up (I have a multiboot). I'll let you know how it goes.

    Cheers.

    EDIT: And yes, initOpenTokSession() is in fullscreenMode.html.

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <html>
    <script>
    var scr = "initOpenTokSession('hiyas')";
    var params = "width=200,height=200,top=0,left=0";
    var newWindow = window.open("fullscreenMode.html", "myWindow", params, false);
    </script>
    <body>
    I am the parent page
    </body>
    </html>
    fullscreenMode.html ...
    Code:
    <html>
    <head>
    <script>
    function initOpenTokSession(arg) {
    alert("you have called the function\n initOpenTokSession wit the arg "+arg )}
    if(opener)
       eval(opener.scr);
    </script>
    </head>
    <body>
    I am a child page.
    </body>
    </html>

  • #11
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Code:
    <html>
    <script>
    var scr = "initOpenTokSession('hiyas')";
    var params = "width=200,height=200,top=0,left=0";
    var newWindow = window.open("fullscreenMode.html", "myWindow", params, false);
    </script>
    <body>
    I am the parent page
    </body>
    </html>
    fullscreenMode.html ...
    Code:
    <html>
    <head>
    <script>
    function initOpenTokSession(arg) {
    alert("you have called the function\n initOpenTokSession wit the arg "+arg )}
    if(opener)
       eval(opener.scr);
    </script>
    </head>
    <body>
    I am a child page.
    </body>
    </html>
    Right. I understood as much from your last post, and went ahead, rebooted into XP, made the necessary changes, and sure enough, it works!

    Thanks a lot. I really appreciate the help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •