跨域访问JavaScript的DOM父？(<iframe> javascript acc

2019-06-18 13:38发布

站内文章 / 后端开发

54 0

够拽才男人

女 | 书童

私信

我控制被嵌入在页面从另一个域的iframe的内容。有没有办法在我的iframe的JavaScript进行更改父的DOM？

例如，我想有我的iframe脚本一串HTML元素添加到父DOM。这似乎是一个相当艰巨的任务 - 想法？

编辑：存在一个称为“技术片段ID消息 ”，其可能是交叉网域iframe之间进行通信的一种方式。

编辑：另外，火狐3.5，歌剧，铬（等）似乎是采用HTML5 “postMessage的” API ，允许帧，内置页框和弹出之间的安全，跨域数据传输。它的工作原理类似于事件系统。 IE8支持此功能，显然，这也许是有点令人惊讶。

总结：不，你不能直接访问/从另一个域编辑页面的DOM。但是你可以用它沟通，可以共同合作，让你想要的变化。

Answer 1:

讨厌这样说，但我肯定不直接发生，因为安全很喜欢99％。

你可以尝试一下这里。

BHH

Answer 2:

有可能的。

你说的没错提的postMessage在您的编辑。对于那些希望有一个伟大的向后兼容，JavaScript的唯一方法跨域通信。短，易代码。完美的解决方案？只要你可以要求修改家长和孩子：

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

Answer 3:

是的你可以。
您可以实现window.postMessage跨域I帧和/或Windows沟通翻过。
但是，你需要做的是异步方式。
如果你需要同步，需要实现围绕这些异步方法的包装。

<!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>

在这里，你会改变孩子送postmessages父。例如，在child.htm，你做

window.parent.postMessage("alert(document.location.href); document.location.href = 'http://www.google.com/ncr'", "*");

在父母，你（在receiveMessage）做eval(evt.data); 这并不是说使用eval是不安全的，所以你会，而不是通过一个枚举，并调用你需要把父页面上相应的功能。

Answer 4:

我猜你会运行到安全问题，不使用代理。代理可以是非常使用。你可以尝尝其中：

（1）基于PHP的代理（小心的原因有很多有用的链接之间的广告）

（2）的Apache的.htaccess代理-只需创建一个子目录proxy在您的域名，并把那里.htaccess文件包含：

RewriteEngine on
RewriteRule ^(.*)$ http://picasaweb.google.com/$1 [P,L]

把其他域名到位picasaweb.google.com的

我个人更喜欢使用Apache代理

Answer 5:

对于AJAX，服务器可能会返回头Access-Control-Allow-Origin: *允许跨域访问。也许它的工作原理也为的IFRAME。

文章来源: