Problems using window.opener

Question

I have a simple ajax application

From this, a popup is launched, with a form.

Both the form resultpage, and the ajax application hava a javascript file in common.

From the popup window, in the form resultpage, I am trying to call a method from the common javascript file, to apply to the parent window.

My javascript file contains an updateLayer method, which when caleld from the parent window, works fine. I get nothing when trying to call it from the popup window.

The resultpage in the popup window has

<script type="text/javascript" src="x.js">window.opener.updateLayer("Layer3", "380118179930"); </script>

before any html.

Nothing happens in the parentwindow. I have also tried window.parent.

What is the reason and solution for/to this?

Answer 1

Create a new updateLayer fucntion in you parent html file. Rename it different and call the original updateLayer from it. e.g.

function updateLayerPage(arg1, arg2)
{
    updateLayer(arg1, arg2);
}

and then call this new function from the child page

window.opener.updateLayerPage("Layer3", "380118179930");

Answer 2

Since you have given the script element a src attribute, the results of x.js will be parsed as JS and the text content of the element will be ignored.

<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">
    window.opener.updateLayer("Layer3", "380118179930");
</script>

Answer 3

Your problem can be that you have two JavaScript files with the same content, while no namespaces are applied.

First, your parent includes the file.js where your updateLayer() is defined. Then the parent opens the child window, which also includes that file.js. If you do that, you have two threads running, where each of them may have it's own functions and objects without bothering the other. I assume that your function is global. This can cause problems, if no namespaces are used. Also it can happen that your big ajax library creates iframes and things like that, and you won't see anything from that because it happens under the hood.

So try: top.window.opener.updateLayer("Layer3", "380118179930");

If that doesn't help, try to open a blank window with no included file.js and call that function from the opener. If that works, wrap the contents of that file.js in a namespace like myNamespace = {....big file content inbetween....}, make two versions of that (or better dynamically include the content) and make sure you have two different namespace. JavaScript is most often not working the way you think it should.

Also, make very sure that the url for your opened window has exactly the same domain. It can cause security issues so that the browser disallows access from a child window to it's parent.

Answer 4

Josh,

Can you determine if the function is triggered at all, like annakata suggests? E.g. by putting an alert box on the first line of the function?

Otherwise: how is the function updateLayer defined in x.js?

If it's defined like this:

function updateLayer(layer, result) {
  // ...
}

...then it should work fine.

If it's defined as follows:

var updateLayer = function(layer, result) {
  // ...
}

then it will not be available as property of the window object (and thus not available as property of window.opener either). In Firefox, at least; I haven't tested this in IE or other browsers.

Edit: why is this question tagged 'ajax'? AFAICS, all of the problem resides on the client side of the application; no ajax is involved.

Answer 5

I assume this is related to this question, asked by another user that also happens to be named Josh.

In my answer to that question, I tried to explain that the functions from a Javascript file included in your parent window would be attached to the window object, so you use window.opener to get access to that window object to call them.

It looks like you've almost got this solved, but the problem here is that by including src="x.js" in the script tag from your form response, you're effectively overwriting any code placed inside the script. Plus, since x.js is included in the parent window, there's no need to have it in the popup at all, anyway.

The code for your form response should look like this:

<script type="text/javascript">
window.opener.updateLayer("Layer3", "380118179930");
</script>

I've removed the src="x.js" attribute, which would otherwise prevent code between the <script></script> tags from being executed.

Answer 6

Try following:

parent.window.updateLayer();

in a separate <script> tag.

I'm not quite sure whether it works with both src=some.js and inline script at the same time.