JavaScript：从弹出窗口（外部网站）获取值

Question

我正在使用此代码从弹出窗口中的字段中获取值。

http://myotherwebsitename.com/parent.html

<input type="text" id="output"/>
<button id="show">Open</button>

<script>
    document.getElementById('show').addEventListener('click', function(){
        window['output'] = document.getElementById('output');
        window.open('http://mywebsite.com/map.html')
    });
</script>  

http://mywebsite.com/map.html

<input type="text" id="user_text"/>
<input id="send" type='button' value'send'/>

<script>
    document.getElementById('send').addEventListener('click', function(){
    window.opener['output'].value = document.getElementById('user_text').value;
})
</script>

如果两者都托管在同一个网站上，效果很好，但如果我将其中一个放在其他网站上，它就不起作用了。

如何让它适用于不同的网站？

谢谢！

Answer 1

由于同源政策，您无法从其他网站获取信息。这里有一个更好的解释为什么......

在计算领域，同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略允许在源自同一站点的页面上运行的脚本（方案、主机名和端口号的组合[1]）不受特定限制地访问彼此的 DOM，但阻止访问不同站点上的 DOM。[1]同源策略也适用于 XMLHttpRequest 和 robots.txt。

http://en.wikipedia.org/wiki/Same-origin_policy.

希望这会有所帮助。我会看看我是否能找到解决方法并让你知道。

Answer 2

是的，同源政策...

如果您有权访问外部站点，则可以通过在请求选项上设置 Access-Control-Allow-Origin 标头来授予对您的第一个域的访问权限。这里是 PHP 示例：

    if (isset($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], $allowedList))
    {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 1000');
        header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
        exit;
    }

但您应该知道，HTTP_ORIGIN 包含架构，并且您应该在 $allowedList 中同时指定 http 和 https 域。