window.opener跨域调用使用javascript [英] window.opener cross domain call using javascript

问题描述

我有一个子网域网址像123.example.com，因为我在使用Google或Facebook进行Oauth登录。现在的过程就像当我使用google或Facebook点击登录时，弹出一个窗口，将获得详细信息，在获得详细信息后，我想在父窗口中显示详细信息。所以我使用window.opener。$（＃first_name）。val（firstName）;我得到这样的错误错误：权限被拒绝访问属性'$'。
如果它不是子域它的工作罚款。如何获取值到主窗口。

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.

推荐答案

两种选择：

如果这两个窗口位于同一个根域，并且问题是子域，您可以 >可以使用 文档解决问题.domain 属性，例如在 123.example.com 上的窗口中，您可以执行此操作：

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

...允许它与 example.com上的窗口进行交谈。

更通用的解决方案href =http://www.w3.org/TR/webmessaging/ =nofollow> Web消息传递，其允许在SOP通常会阻止直接通信的地方进行协作的跨源通信。因此，我们有 http：//parent-origin/parent.html ，并且想要打开并与 http：// child-origin / child .html 。 http：//parent-origin/parent.html ：

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

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

最初，网络邮件只允许通过，但是 字符串，但现代浏览器允许传递克隆的对象。还要注意，如果你有 canvas 对象或类似的，你可以在 postMessage 的第三个参数传递他们， ：发件人无法再访问他们，只有接收者。这使我们避免复制大的东西（如果可能的话），同时也避免了多个线程同时访问相同数据的问题。

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.

这篇关于window.opener跨域调用使用javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！