Я работаю над iGoogle-подобным приложением. Контент из других приложений (в других доменах) показывается с помощью iframes.
Как изменить размеры фреймов, чтобы они соответствовали высоте содержимого фреймов?
Я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.
Обновление: обратите внимание, что контент загружается из других доменов, поэтому применяется та же политика происхождения .
Ответы:
У нас была проблема такого типа, но немного обратная вашей ситуации - мы предоставляли контент 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(в рамке), но нет home.html (ребенок не может общаться между доменами с родителем).
Ключевым моментом здесь является то, что вы helper.htmlможете получать сообщения framed.htmlи общаться с ними home.html.
Таким образом, по существу, когда framed.htmlзагружается, он helper.htmlопределяет свою собственную высоту, говорит , что передает сообщение home.html, которое может затем изменить размер iframe, в котором framed.htmlнаходится.
Самый простой способ мы нашли для передачи сообщений от framed.htmlдоhelper.html был найден через аргумент URL. Для этого framed.htmlесть iframe с src=''указанным. Когда он onloadстреляет, он оценивает собственную высоту и устанавливает в этом месте src для 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>parentIframeResize() загрузку , я использовал JQuery для отслеживания загрузки страницы и любых событий изменения размера: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);это позволяет мне устанавливать iframe width="100%"и, если ширина окна изменяется, чтобы сделать перенос текста или что-то еще, внутренняя рамка распознает, что ее нужно изменить.
Если вам не нужно обрабатывать содержимое iframe из другого домена, попробуйте этот код, он полностью решит проблему и прост:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>document.getElementById(id)вас есть, и упростить код.
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage - это метод безопасного включения связи между источниками. Как правило, скрипты на разных страницах могут получать доступ друг к другу только тогда и только тогда, когда страницы, которые их выполняли, находятся в местах с одинаковым протоколом (обычно с http), номером порта (по умолчанию для http используется 80) и хостом (по модулю). document.domain устанавливается обеими страницами на одно и то же значение). window.postMessage предоставляет управляемый механизм, позволяющий обойти это ограничение безопасным способом при правильном использовании.
Резюме
window.postMessage, когда вызывается, вызывает отправку MessageEvent в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если window.postMessage вызывается из обработчика событий, предварительно установленные ожидания ожидания и т. д. ). MessageEvent имеет тип сообщения, свойство data, для которого задано строковое значение первого аргумента, предоставленного window.postMessage, свойство origin, соответствующее источнику основного документа в окне, вызывающем window.postMessage во временном окне. Был вызван postMessage и свойство источника, которое является окном, из которого вызывается window.postMessage. (Другие стандартные свойства событий присутствуют с их ожидаемыми значениями.)
Библиотека iFrame-Resizer использует postMessage для сохранения размера iFrame в соответствии с его содержимым вместе с MutationObserver для обнаружения изменений в контенте и не зависит от jQuery.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: совершенство междоменных сценариев
http://benalman.com/projects/jquery-postmessage-plugin/
Имеет демонстрацию изменения размера окна iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
В этой статье показано, как убрать зависимость от jQuery ... Plus содержит много полезной информации и ссылок на другие решения.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Пример Barebones ...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5 рабочий проект для window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
Джон Резиг по обмену сообщениями между окнами
Самый простой способ использования jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});Решение на http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html прекрасно работает (использует jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>Я не знаю, что вам нужно добавить 30 к длине ... 1 работал для меня.
К вашему сведению : если у вас уже есть атрибут «высота» в вашем iFrame, это просто добавляет style = "height: xxx". Это может быть не то, что вы хотите.
может быть немного поздно, так как все остальные ответы старше :-) но ... вот мое решение. Проверено в реальных FF, Chrome и Safari 5.0.
CSS:
iframe {border:0; overflow:hidden;}JavaScript:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});Надеюсь, это кому-нибудь поможет.
Наконец, я нашел другое решение для отправки данных на родительский сайт из iframe window.postMessage(message, targetOrigin);. Здесь я объясняю, как я это сделал.
Сайт A = http://foo.com Сайт B = http://bar.com
Сайт B загружается внутри сайта. Сайт
Сайт SiteB имеет эту строку
window.parent.postMessage("Hello From IFrame", "*"); или
window.parent.postMessage("Hello From IFrame", "http://foo.com");Тогда сайт А имеет следующий код
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}, false); Если вы хотите добавить безопасное соединение, вы можете использовать это, если условие в eventer(messageEvent, function (e) {})
if (e.origin == 'http://iframe.example.com') {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}Для IE
Внутри IFrame:
window.parent.postMessage('{"key":"value"}','*');За пределами:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);Вот простое решение с использованием динамически генерируемой таблицы стилей, обслуживаемой тем же сервером, что и содержимое iframe. Проще говоря, таблица стилей «знает», что находится в iframe, и знает размеры, используемые для стилизации iframe. Это обходит те же ограничения политики происхождения.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Таким образом, поставляемый код iframe будет иметь сопровождающую таблицу стилей, например, так ...
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
<iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
Это требует, чтобы логика на стороне сервера была способна рассчитать размеры визуализированного содержимого iframe.
Этот ответ применим только для сайтов, которые используют Bootstrap. Функция адаптивного встраивания Bootstrap делает свою работу. Он основан на ширине (а не высоте) содержимого.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>jsfiddle: http://jsfiddle.net/00qggsjj/2/
Я внедряю решение ConroyP для фреймов в кадре, чтобы заменить решение, основанное на настройке document.domain, но мне было довольно сложно правильно определить высоту содержимого iframe в разных браузерах (тестирование с FF11, Ch17 и IE9 сейчас ).
ConroyP использует:
var height = document.body.scrollHeight;Но это работает только при начальной загрузке страницы. Мой iframe имеет динамическое содержимое, и мне нужно изменить размер iframe для определенных событий.
В итоге я использовал разные свойства JS для разных браузеров.
function getDim () {
var body = document.body,
html = document.documentElement;
var bc = body.clientHeight;
var bo = body.offsetHeight;
var bs = body.scrollHeight;
var hc = html.clientHeight;
var ho = html.offsetHeight;
var hs = html.scrollHeight;
var h = Math.max(bc, bo, bs, hc, hs, ho);
var bd = getBrowserData();
// Select height property to use depending on browser
if (bd.isGecko) {
// FF 11
h = hc;
} else if (bd.isChrome) {
// CH 17
h = hc;
} else if (bd.isIE) {
// IE 9
h = bs;
}
return h;
}getBrowserData () - функция обнаружения браузера, «вдохновленная» http://docs.sencha.com/core/source/Ext.html#method-Ext-apply функцией Ext Core.
Это хорошо работает для FF и IE, но затем возникли проблемы с Chrome. Одной из них была проблема синхронизации, очевидно, что Chrome требуется некоторое время, чтобы установить / определить высоту фрейма. Кроме того, Chrome также никогда не возвращает правильную высоту содержимого в iframe, если iframe был выше содержимого. Это не будет работать с динамическим контентом, когда высота уменьшается.
Чтобы решить эту проблему, я всегда устанавливаю значение iframe на низкую высоту, прежде чем определять высоту содержимого, а затем устанавливаю правильное значение высоты iframe.
function resize () {
// Reset the iframes height to a low value.
// Otherwise Chrome won't detect the content height of the iframe.
setIframeHeight(150);
// Delay getting the dimensions because Chrome needs
// a few moments to get the correct height.
setTimeout("getDimAndResize()", 100);
}Код не оптимизирован, это из моего тестирования на уровне :)
Надеюсь, кто-то найдет это полезным!
<html>
<head>
<script>
function frameSize(id){
var frameHeight;
document.getElementById(id).height=0 + "px";
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>
<body>
<iframe id="frame" src="startframe.html" frameborder="0" marginheight="0" hspace=20 width="100%"
onload="javascript:frameSize('frame');">
<p>This will work, but you need to host it on an http server, you can do it locally. </p>
</body>
</html>Гаджеты iGoogle должны активно реализовывать изменение размера, поэтому я полагаю, что в междоменной модели вы не сможете сделать это без участия удаленного контента. Если ваш контент может отправить сообщение с новым размером на страницу контейнера с использованием типичных междоменных методов связи, то все остальное просто.
Если вы хотите уменьшить веб-страницу, чтобы она соответствовала размеру фрейма:
Вот пример:
<div id="wrap">
<IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div><style type="text/css">
#wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
#frame { width: 900px; height: 600px; border: 1px solid black; }
#frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>Вот подход jQuery, который добавляет информацию в json через атрибут src iframe. Вот демонстрация, измените размер и прокрутите это окно ... Полученный URL с json выглядит следующим образом ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/# enjdocHeight:5124,windowHeight:1019,scrollHeight: 571} #
Вот скрипта исходного кода http://jsfiddle.net/zippyskippy/RJN3G/
function updateLocation(){
var loc = window.location.href;
window.location.href = loc.replace(/#{.*}#/,"")
+ "#{docHeight:"+$(document).height()
+ ",windowHeight:"+$(window).height()
+ ",scrollHeight:"+$(window).scrollTop()
+"}#";
};
//setInterval(updateLocation,500);
$(window).resize(updateLocation);
$(window).scroll(updateLocation); var iframes = document.getElementsByTagName("iframe");
for(var i = 0, len = iframes.length; i<len; i++){
window.frames[i].onload = function(_i){
return function(){
iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
}
}(i);
}Работа с jquery под нагрузкой (кросс-браузер):
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
} при изменении размера на адаптивной странице:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});Используя jQuery:
parent.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
width: 100%;
border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
$("iframe").css({width: w, height: h});
return true; // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>child.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var w = $("#container").css("width");
var h = $("#container").css("height");
var req = parent.foo(w, h);
console.log(req); // for debug purposes
});
</script>
<style>
body, html {
margin: 0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="container"></div>
</body>Это немного сложнее, поскольку вы должны знать, когда страница iframe загрузилась, что затруднительно, когда вы не контролируете ее содержимое. Можно добавить обработчик загрузки в iframe, но я пробовал это в прошлом, и в браузерах он ведет себя совершенно по-разному (не думаю, кто самый раздражающий ...). Возможно, вам придется добавить на страницу iframe функцию, которая выполняет изменение размера, и внедрить некоторый сценарий в контент, который либо прослушивает события загрузки, либо изменяет размер события, который затем вызывает предыдущую функцию. Я думаю добавить функцию на страницу, так как вы хотите убедиться, что она безопасна, но я понятия не имею, насколько легко это будет сделать.
Что-то на линии этого, я верю, должно работать.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Загрузите это с нагрузкой тела на содержание iframe.
У меня есть простое решение, и вы должны определить ширину и высоту в ссылке, попробуйте (это работает с большинством браузеров):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>