Javascript function call across HTML windows

Question

According to this page I should be able to call parameters and functions of child windows, but it is not working for me.

var w = window.open("index.html");
console.log(w);
console.log(w.foo);

console.log(w) shows that there is a function named foo but console.log(w.foo) outputs undefined. Is this a security issue?

EDIT Here is some more functionality:

child.html (omitting the body):

<head>
 <script type="text/javascript"> 
  test = 123 ;
  function foo(arg){
   //do something
  }
 </script>
</head>

parent.html:

var w = window.open("child.html");
console.log(w);
//outputs all the methods and parameters
console.log(w.foo);
//outputs 'undefined'
console.log(w.test);
//outputs 'undefined'

EDIT 2 Also I should explain why I need to pass arguments as someone will inevitably ask me why I can't 'just hard code it'. I have an HTML canvas element, and every time the user right clicks, there is a right click menu with the option 'list shapes underneath'.

When the user clicks this menu item, I want to pass a list of all the shapes underneath that click and to display it in a new window. Here are the problems I am facing:

I can't pass it as an argument b/c I don't know whether the window has been loaded (I can't seem to change the onload function either)
I can't have the child window query the parent window b/c the right click menu disappears after clicking it.

Do you mean a jsfiddle example or just a self contained script? — puk
– puk, Commented Jul 24, 2011 at 23:47
I believe they have a usage FAQ. Either way, we can't help without knowing what your code looks like. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jul 24, 2011 at 23:49
There shouldn't be a security issue if the parent and child window both contain pages from the same domain. Has the child page (index.html) finished loading at the point that you try to access its function(s)? I generally find it easiest to either have the child page request values it needs from the parent, like x = window.opener.parentFunction();, or tell the parent that it is ready (at the end of child's onload:) window.opener.childLoaded(); and have the parent wait for that function call before it tries to manipulate the child. — nnnnnn
– nnnnnn, Commented Jul 24, 2011 at 23:54

Community · Accepted Answer · 2017-05-23 09:58:53Z

3

The problem is that you are not giving the DOM of the child window a chance to load before trying to inspect its contents.

console.log(w) appeared to work by displaying Window or similar immediately, but in fact it's just that by the time your human fingers got around to expanding the item details in the console, the properties and methods were present.

When I inject a delay with help from a Firebug breakpoint, I can see the child window's properties like this just fine.

This question talks about adding onLoad event listeners for children. Using its accepted answer, how about:

<script type="text/javascript">
// parent.html
var w;

function lol() {
    console.log(w.foo);
    console.log(w.test);
}

w = window.open("child.html");
console.log(w);
w.addEventListener('load', lol, true);
</script>

(I was also able to achieve success with a 1s setTimeout delay.)

edited May 23, 2017 at 9:58

CommunityBot

11 silver badge

answered Jul 25, 2011 at 1:30

Lightness Races in Orbit

387k77 gold badges671 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

puk Over a year ago

I'll give it a shot, although I doubt it will work since a 10s timeout delay didn't work for me... WOW it actually worked

Lightness Races in Orbit Over a year ago

@puk: Whatever you did to implement the 10s timeout was wrong. Again, you haven't shown us, so we can't tell you what that was.

puk Over a year ago

Well it worked somewhat. It works for foo and test because they are hard coded. But if, for example, I do function lol(){ w.xyz = 123; console.log(w.xyz)} the output is still undefined.

Lightness Races in Orbit Over a year ago

@puk: I'm not sure whether you're allowed to inject new properties into a child window.

puk Over a year ago

Is there any way to 'ask' the child to inject new properties into itself? ie. w.addEventListener('load', lol, true, args)? I have to step out, will check again in a few hours.

|

eaglestorm · Accepted Answer · 2011-07-25 00:14:09Z

-2

The answer is rather simple if you look at your code logically

The following two calls will only work inside the window you open.

console.log(w.foo);
//outputs 'undefined'
console.log(w.test);
//outputs 'undefined'

i.e.

console.log(foo);

in the parent window javascript, and

console.log(window.parent.foo);

in the child window javascript.

answered Jul 25, 2011 at 0:14

eaglestorm

1,1821 gold badge13 silver badges33 bronze badges

4 Comments

puk Over a year ago

I am not familiar with window.parent. Do you mean window.opener?

puk Over a year ago

I'm really sorry eaglstorem but I am not following your logic. foo is defined in the child window, why would the parent call console.log(foo) and the child call console.log(window.opener.foo)

Lightness Races in Orbit Over a year ago

@eaglestorm: He wants to access the properties of the child window from the parent window. And I think you have it backward as to where foo is declared.

eaglestorm Over a year ago

My bad I did get it backwards

Collectives™ on Stack Overflow

Javascript function call across HTML windows

2 Answers 2

11 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related