...

View Full Version : Problem with newWindow.document.getElementById()



CoderInTraining
09-17-2011, 07:03 PM
Hello, I am having a problem with javascript 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:


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.

DaveyErwin
09-17-2011, 09:56 PM
This will not work ...


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.

CoderInTraining
09-17-2011, 10:02 PM
This will not work ...


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?

DaveyErwin
09-18-2011, 05:02 AM
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.





<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 ...





<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>

CoderInTraining
09-18-2011, 10:53 PM
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.





<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 ...





<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.

DaveyErwin
09-18-2011, 11:26 PM
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





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.





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.




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.

CoderInTraining
09-18-2011, 11:53 PM
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?

DaveyErwin
09-19-2011, 12:33 AM
Hmm...
Ok, so you're suggesting that I place the call to newWindow.document.getElementById() inside fullscreenMode.html
?
No! I am not.



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 ?

CoderInTraining
09-19-2011, 01:21 AM
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). :thumbsup:

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. :D

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

DaveyErwin
09-19-2011, 02:01 AM
<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 ...



<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>

CoderInTraining
09-19-2011, 02:19 AM
<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 ...



<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! :D

Thanks a lot. I really appreciate the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum