Nous avons eu ce type de problème, mais légèrement à l'inverse de votre situation - nous fournissions le contenu iframed à des sites sur d'autres domaines, donc la même politique d'origine était également un problème. Après de nombreuses heures passées à naviguer sur Google, nous avons finalement trouvé une solution (quelque peu ..) réalisable, que vous pourrez peut-être adapter à vos besoins.
Il existe un moyen de contourner la même politique d'origine, mais cela nécessite des modifications à la fois sur le contenu iframé et sur la page de cadrage. Si vous n'avez pas la possibilité de demander des modifications des deux côtés, cette méthode ne vous sera pas très utile, J'ai peur.
Il y a une bizarrerie du navigateur qui nous permet de contourner la même politique d'origine - javascript peut communiquer soit avec des pages sur son propre domaine, soit avec des pages qu'il a encadrées, mais jamais des pages dans lesquelles il est encadré, par exemple si vous avez:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
home.html
peut alors communiquer avec framed.html
(iframed) et helper.html
(même domaine).
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
peut envoyer des messages à helper.html
(iframed) mais pas home.html
(l'enfant ne peut pas communiquer entre domaines avec le parent).
La clé ici est de helper.html
pouvoir recevoir des messages de framed.html
, et peut également communiquer avec home.html
.
Donc, essentiellement, lors du framed.html
chargement, il calcule sa propre hauteur, indique helper.html
, qui transmet le message home.html
, qui peut ensuite redimensionner l'iframe dans laquelle se framed.html
trouve.
Le moyen le plus simple que nous avons trouvé pour passer des messages de framed.html
à helper.html
était d'utiliser un argument URL. Pour ce faire, framed.html
a un iframe avec src=''
spécifié. Lorsqu'il se onload
déclenche, il évalue sa propre hauteur et définit le src de l'iframe à ce stade surhelper.html?height=N
Il y a une explication ici de la façon dont Facebook le gère, qui peut être légèrement plus claire que la mienne ci-dessus!
Code
Dans www.foo.com/home.html
, le code javascript suivant est requis (il peut être chargé à partir d'un fichier .js sur n'importe quel domaine, incidemment ..):
<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>
Dans 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>
Contenu de 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>