如何实现从使用Javascript的iframe跨域URL访问？(How do I implemen

我需要从我的iFrame这是另一个域中访问父域URL。

例如，“example.com”是我的网站，从另一个父域有一个I帧，如“google.com”。在这里，我需要从我的example.com访问父域URL。也就是说，我需要得到的URL“google.com”在我的“example.com”域。此外，父域不能硬编码。

我试着用下面的代码是：

window.parent.location.href()

但是这会导致拒绝访问错误。如何正确为了实现这一目标实现这一点？

Answer 1:

你可以尝试并检查引荐，这应该是父站点，如果你是一个iframe

你可以是这样做的：

var href = document.referrer;

Answer 2:

你可能想看一看这些问题/答案; 他们可以给你关于你的问题的一些信息：

在iframe中跨域访问从孩子父母
<iframe>跨域的javascript访问父DOM？
如何使用JavaScript访问父的iFrame

为了使事情短：从另一个域访问iframe是不可能的，出于安全原因 - 这也解释了你所得到的错误消息。

该同源策略上的维基百科页面带来有关安全措施一些信息：

概括地说，政策允许在来自同一站点发起的互相访问的方法和属性有没有特殊的限制网页中运行的脚本 - 但阻止访问跨不同网站上的网页大多数方法和属性。
由不相关的网站提供的内容之间的严格分离，必须在客户端予以保持，以防止数据的机密性或完整性的损失。

Answer 3:

除了使用引荐的，可以实现window.postMessage跨域通信翻过I帧/窗口。
您张贴到window.parent，然后返回父母的URL。
这工作，但它需要异步通信。
你将不得不编写一个同步封装周围的异步方法，如果你需要它同步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

    <!--
    <link rel="shortcut icon" href="/favicon.ico">


    <link rel="start" href="http://benalman.com/" title="Home">

    <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">

    <script type="text/javascript" src="/js/mt.js"></script>
    -->
    <script type="text/javascript">
        // What browsers support the window.postMessage call now?
        // IE8 does not allow postMessage across windows/tabs
        // FF3+, IE8+, Chrome, Safari(5?), Opera10+

        function SendMessage()
        {
            var win = document.getElementById("ifrmChild").contentWindow;

            // http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/


            // http://stackoverflow.com/questions/16072902/dom-exception-12-for-window-postmessage
            // Specify origin. Should be a domain or a wildcard "*"

            if (win == null || !window['postMessage'])
                alert("oh crap");
            else
                win.postMessage("hello", "*");
            //alert("lol");
        }



        function ReceiveMessage(evt) {
            var message;
            //if (evt.origin !== "http://robertnyman.com")
            if (false) {
                message = 'You ("' + evt.origin + '") are not worthy';
            }
            else {
                message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
            }

            var ta = document.getElementById("taRecvMessage");
            if (ta == null)
                alert(message);
            else
                document.getElementById("taRecvMessage").innerHTML = message;

            //evt.source.postMessage("thanks, got it ;)", event.origin);
        } // End Function ReceiveMessage




        if (!window['postMessage'])
            alert("oh crap");
        else {
            if (window.addEventListener) {
                //alert("standards-compliant");
                // For standards-compliant web browsers (ie9+)
                window.addEventListener("message", ReceiveMessage, false);
            }
            else {
                //alert("not standards-compliant (ie8)");
                window.attachEvent("onmessage", ReceiveMessage);
            }
        }
    </script>


</head>
<body>

    <iframe id="ifrmChild" src="child.htm" frameborder="0" width="500" height="200" ></iframe>
    <br />


    <input type="button" value="Test" onclick="SendMessage();" />

</body>
</html>

Child.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

    <!--
    <link rel="shortcut icon" href="/favicon.ico">


    <link rel="start" href="http://benalman.com/" title="Home">

    <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">

    <script type="text/javascript" src="/js/mt.js"></script>
    -->

    <script type="text/javascript">
        /*
        // Opera 9 supports document.postMessage() 
        // document is wrong
        window.addEventListener("message", function (e) {
            //document.getElementById("test").textContent = ;
            alert(
                e.domain + " said: " + e.data
                );
        }, false);
        */

        // https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
        // http://ejohn.org/blog/cross-window-messaging/
        // http://benalman.com/projects/jquery-postmessage-plugin/
        // http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

        // .data – A string holding the message passed from the other window.
        // .domain (origin?) – The domain name of the window that sent the message.
        // .uri – The full URI for the window that sent the message.
        // .source – A reference to the window object of the window that sent the message.
        function ReceiveMessage(evt) {
            var message;
            //if (evt.origin !== "http://robertnyman.com")
            if(false)
            {
                message = 'You ("' + evt.origin + '") are not worthy';
            }
            else
            {
                message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
            }

            //alert(evt.source.location.href)

            var ta = document.getElementById("taRecvMessage");
            if(ta == null)
                alert(message);
            else
                document.getElementById("taRecvMessage").innerHTML = message;

            // http://javascript.info/tutorial/cross-window-messaging-with-postmessage
            //evt.source.postMessage("thanks, got it", evt.origin);
            evt.source.postMessage("thanks, got it", "*");
        } // End Function ReceiveMessage




        if (!window['postMessage'])
            alert("oh crap");
        else {
            if (window.addEventListener) {
                //alert("standards-compliant");
                // For standards-compliant web browsers (ie9+)
                window.addEventListener("message", ReceiveMessage, false);
            }
            else {
                //alert("not standards-compliant (ie8)");
                window.attachEvent("onmessage", ReceiveMessage);
            }
        }
    </script>


</head>
<body style="background-color: gray;">
    <h1>Test</h1>

    <textarea id="taRecvMessage" rows="20" cols="20" ></textarea>

</body>
</html>

Answer 4:

你有两个选择：

范围域下来（见document.domain的）中均包含页面和iframe以同样的事情。然后，他们将不会受到“同根同源”的限制的约束。
这是由所有的HTML5支持使用postMessage的浏览器对于cross-domain通信。

Answer 5:

好文章在这里：借助iframe跨域通信

您也可以直接设置document.domain的相同的两个框架（甚至

document.domain = document.domain;

代码具有意义，因为重置端口为空），但这一招并不通用。

Answer 6:

尝试

window.frameElement.ownerDocument.domain