У нас была проблема такого типа, но немного обратная вашей ситуации - мы предоставляли контент iframed для сайтов в других доменах, поэтому такая же политика происхождения также была проблемой. После долгих часов траления в Google мы нашли (несколько ..) работоспособное решение, которое вы можете адаптировать к вашим потребностям.
Существует способ обойти одну и ту же политику происхождения, но она требует изменений как для содержимого iframed, так и для страницы с кадрами, поэтому, если у вас нет возможности запрашивать изменения с обеих сторон, этот метод не будет очень полезен боюсь тебе.
Существует особенность браузера, которая позволяет нам обходить ту же политику происхождения - javascript может взаимодействовать либо со страницами в своем собственном домене, либо со страницами, на которые он встроен, но никогда со страницами, в которых он создан, например, если у вас есть:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
затем home.html
может связываться с framed.html
(iframed) и helper.html
(тот же домен).
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
может отправлять сообщения на helper.html
(iframed), но не home.html
(дочерний элемент не может общаться между доменами с родителем).
Ключ в том, что helper.html
может получать сообщения от framed.html
, а также может связывать с home.html
.
Таким образом, по существу, когда framed.html
загружается, он вырабатывает собственную высоту, сообщает helper.html
, который передает сообщение в home.html
, который может затем изменить размер фрейма, в котором находится framed.html
.
Самый простой способ передачи сообщений от framed.html
до helper.html
был через URL-аргумент. Для этого framed.html
имеет iframe с указанным src=''
. Когда стреляет onload
, он оценивает свою собственную высоту и устанавливает в этом месте источник iframe равным helper.html?height=N
Здесь есть объяснение того, как Facebook справляется с этим, что может быть немного яснее, чем мое выше!
<ч />
Код
В www.foo.com/home.html
требуется следующий код JavaScript (его можно загрузить из файла .js в любом домене, между прочим ..):
<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>
В 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>
Содержимое 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>