CODEWITHSUNDEEP
javascriptcross-domain
user120298
user120298

Reputation: 51

window.opener cross domain call using javascript

I'm having a subdomain url like 123.example.com, in that I'm doing Oauth login using Google or Facebook.Now procedure is like when I click on the login with google or facebook , a window pops up and will get the details, after getting the details I want to show the details in the parent window. so I'm using window.opener.$("#first_name").val(firstName);, I'm getting a error like this Error: Permission denied to access property '$'. If it is not subdomain its working fine. How to get the values to main window.

Upvotes: 4

Views: 10789

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074198

Two options for you:

document.domain

If both windows are in the same root domain and the issue is the subdomain, you may be able to solve it using the document.domain property, e.g. in the window that's on a 123.example.com, you can do this:

document.domain = "example.com";

...to allow it to talk with windows on example.com.

Web Messaging

The more general (and modern) solution is web messaging, which allows cooperative cross-origin communication in places where the SOP would normally prevent direct communication. So we have http://parent-origin/parent.html and it wants to open and communicate with http://child-origin/child.html. In http://parent-origin/parent.html:

// Listen for messages
window.addEventListener("message", function(e) {
    // If we get a message from the child, and the message is asking for
    // us to send the info...
    if (e.origin === "http://child-origin" && e.data === "send-info") {
        // ...send it
        log("Got request from child, sending info");
        e.source.postMessage({command: "info", info: { /*...data goes here...*/ }}, e.origin);
    }
}, false);

In http://child-origin/child.html:

// Listen for messages
window.addEventListener("message", function(e) {
    var info;

    // If the message is from the parent and it says it has the info...
    if (e.origin === "http://parent-origin" && e.data && e.data.command === "info") {
        // Use info
        info = e.data.info;
        log("Info is " + JSON.stringify(info));
    }
}, false);

// Ask the opener to send us the info
opener.postMessage("send-info", "http://parent-origin");

You may be able to eliminate the part where the child asks the parent for the info depending on how you're opening the child (e.g., if the parent window has a means of knowing that the child is fully loaded and ready for messages). Having the child ask is a pretty good way to make sure it's ready to receive the info, though.

Originally, web messaging only allowed passing strings, but modern browsers allow passing objects which get cloned. Also note that if you have canvas objects or similar, you can pass them in the third parameter of postMessage so they get transferred: The sender no longer has access to them, just the receiver. This lets us avoid copying large things (where possible) while also avoiding issues of multiple threads having simultaneous access to the same data.

Upvotes: 6

Related Questions