Wir hatten diese Art von Problem, allerdings in umgekehrter Form zu Ihrer Situation - wir stellten die iframed-Inhalte für Websites auf anderen Domänen bereit, so dass die Politik des gleichen Ursprungs war auch ein Thema. Nach vielen Stunden, die wir mit Google verbracht haben, haben wir schließlich eine (einigermaßen ) praktikable Lösung gefunden, die Sie vielleicht an Ihre Bedürfnisse anpassen können.
Es gibt einen Weg, um die gleiche Herkunftsrichtlinie zu umgehen, aber das erfordert Änderungen sowohl an den eingerahmten Inhalten als auch an der Framing-Seite. Wenn Sie also nicht die Möglichkeit haben, Änderungen auf beiden Seiten anzufordern, ist diese Methode leider nicht sehr nützlich für Sie.
Es gibt eine Browser-Merkwürdigkeit, die es uns erlaubt, dieselbe Herkunftspolitik zu umgehen - Javascript kann entweder mit Seiten auf seiner eigenen Domain oder mit Seiten, die es eingerahmt hat, kommunizieren, aber niemals mit Seiten, in denen es eingerahmt ist, z.B. wenn Sie es haben:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
entonces home.html kann kommunizieren mit framed.html (iframed) und helper.html (gleiche Domäne).
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+
framed.html kann Nachrichten senden an helper.html (iframed) aber no home.html (das Kind kann nicht domänenübergreifend mit dem Elternteil kommunizieren).
Der Schlüssel dazu ist, dass helper.html kann Nachrichten empfangen von framed.html et kann auch kommunizieren con home.html .
Im Wesentlichen also, wenn framed.html lädt, errechnet er seine eigene Höhe, sagt helper.html der die Nachricht weiterleitet an home.html die dann die Größe des iframe ändern kann, in dem framed.html sits.
Der einfachste Weg, der gefunden wurde, um Nachrichten von framed.html a helper.html war durch ein URL-Argument. Um dies zu tun, framed.html hat einen iframe mit src='' festgelegt. Wenn seine onload ausgelöst wird, wertet er seine eigene Höhe aus und setzt die src des iframe an diesem Punkt auf helper.html?height=N
Hier finden Sie eine Erklärung wie Facebook es handhabt, die vielleicht etwas klarer ist als meine oben!
Code
En www.foo.com/home.html wird der folgende Javascript-Code benötigt (dieser kann übrigens von einer .js-Datei auf einer beliebigen Domain geladen werden):
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
En www.bar.net/framed.html :
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
Inhalt von www.foo.com/helper.html :
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>
