Wie Sie JavaScript verwenden, um Zugriff auf cross-domain-iFrame-Inhalte?

Ich würde gerne diesen code verwenden

window.parent.document.getElementById('message').value  += "\r\n\r\n[img]"+response+"[/img]";

Es funktioniert gut für die Seiten kommen aus der gleichen Domäne, aber nicht für die Seiten von einer anderen domain geladen, die in den iFrame. Wie kann ich es tun?

möglich, Duplikat der Cross-Domain URL-Zugriff aus dem Iframe mit Javascript

InformationsquelleAutor monkey_boys | 2011-02-06

Können Sie implementieren, Fenster.postMessage, um die Kommunikation zwischen iframes/windows über Domänen.

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

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


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

    <link  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  href="/favicon.ico">


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

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

InformationsquelleAutor Stefan Steiger

2

Werfen Sie einen Blick auf easyXDM, es ist eine einfach zu bedienende Bibliothek, die eine einheitliche API für verschiedene tricks verwendet, um ermöglichen cross-domain-messaging, angefangen von postMessage an die FIM-trick, als eine Letzte resort.

Dies ist, was verwendet wird, indem die wichtigsten Dienste wie Twitter und Disqus.
- Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert. - Nach Bewertung
- dies ist eine sehr komplizierte Angelegenheit, und die Frage ist zu offen, um der Lage sein, um eine prägnante Antwort.
InformationsquelleAutor Sean Kinsey
1

Aufgrund same-origin-policy Einschränkungen ist dies nicht erlaubt.

InformationsquelleAutor Darin Dimitrov
1

Können Sie nicht. Dies wird als der same-origin-policy, und verhindert, dass javascript auf Inhalte zugreifen, die über mehrere domains hinweg.

InformationsquelleAutor tw39124
1

Wie gesagt, das fällt unter die same-origin-policy, aber es gibt einige tricks, die es ermöglichen, beschränkt sich die Kommunikation mit dem iframe. Werfen Sie einen Blick auf http://ajaxify.com/run/crossframe/
- Das fragment hack benutzt, in dieser ist extrem langsam und hat jede Menge Probleme - easyXDM ist ein Weg, der bessere Ansatz ist.
InformationsquelleAutor leebriggs
-1

Können Sie, wenn Sie Ihren browser deaktiviert haben Sicherheit, für chrome ist es
```
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security
```
Update: ich bin überrascht, dass Menschen widmen, die es, weil Sie halte es für schädlich, so hier füge ich einige zusätzliche details für Völker, die nicht wissen, - Grundlagen der web-Sicherheit und immer noch versuchen, zu entwickeln ist es.

NICHT diese Lösung verwenden, wenn
- sind Sie mit chrome plugins oder apps, die nicht vertrauenswürdig sind, indem Sie, oder
- die Sie geöffnet haben auf anderen Seiten im chrome, oder
- haben Sie einige bösartige chrome-Prozesse
- Ihre Website mit beliebigen externen Ressourcen.
Ist diese Lösung nicht ganz sicher ist, konfigurieren Sie Ihre firewall blockiert alle verbindungen, außer einer, zu dem Sie machen CORS-Verbindung.

Auch nicht diese Lösung verwenden, wenn Ihre Verbindungs-Endpunkt ist nicht vertrauenswürdig.
- Ich würde dies sehr schädlich und empfehlen nicht diese Methode verwenden.
- es ist nicht schädlich, wenn Sie wissen was Sie tun. Aber danke für den Hinweis, ich habe ein Haftungsausschluss für diejenigen, die versuchen cluelessly diese Lösung verwenden.
InformationsquelleAutor setec

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.