Изменение размера iframe в зависимости от содержимого
https://stackoverflow.com/questions/153152
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я работаю над приложением, подобным iGoogle.Контент из других приложений (на других доменах) отображается с помощью iframe.
Как изменить размер iframe, чтобы он соответствовал высоте содержимого iframe?
Я пытался расшифровать код JavaScript, который использует Google, но он запутан, и поиск в Интернете пока не увенчался успехом.
Обновлять: Обратите внимание, что контент загружается с других доменов, поэтому политика одного и того же происхождения применяется.
Решение
У нас была проблема такого типа, но немного противоположная вашей ситуации: мы предоставляли iframe-контент сайтам на других доменах, поэтому та же политика происхождения тоже была проблема.После многих часов, потраченных на поиск в Google, мы в конце концов нашли (в некоторой степени...) работоспособное решение, которое вы, возможно, сможете адаптировать к своим потребностям.
Существует способ обойти ту же политику происхождения, но он требует изменений как в iframe-содержимом, так и на странице фрейма, поэтому, если у вас нет возможности запрашивать изменения с обеих сторон, этот метод не будет вам очень полезен. Боюсь.
Существует особенность браузера, которая позволяет нам обойти одну и ту же политику происхождения: javascript может взаимодействовать либо со страницами в своем собственном домене, либо со страницами, которые он создал в iframe, но никогда со страницами, в которых он находится в фрейме, напримересли у вас есть:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
затем home.html может общаться с framed.html (iframe) и 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 (iframe), но нет 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>
Другие советы
Если вам не нужно обрабатывать содержимое 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>
https://developer.mozilla.org/en/DOM/window.postMessage
окно.postMessage()
window.postMessage — это метод безопасного включения связи между источниками.Обычно сценариям на разных страницах разрешен доступ друг к другу только тогда и только тогда, когда страницы, которые их выполнили, находятся в местоположениях с одним и тем же протоколом (обычно оба http), номером порта (80 — значение по умолчанию для http) и хостом (по модулю document.domain присваивается обеими страницами одинаковому значению).window.postMessage предоставляет контролируемый механизм для обхода этого ограничения безопасным способом при правильном использовании.
Краткое содержание
window.postMessage при вызове вызывает отправку MessageEvent в целевом окне, когда любой ожидающий сценарий, который должен быть выполнен, завершается (например,оставшиеся обработчики событий, если window.postMessage вызывается из обработчика событий, ранее установленные тайм-ауты ожидания и т. д.).MessageEvent имеет сообщение типа, свойство данных, которому присвоено строковое значение первого аргумента, предоставленного window.postMessage, свойство происхождения, соответствующее источнику основного документа в окне, вызывающем window.postMessage во временном окне. postMessage был вызван, а также исходное свойство, которое представляет собой окно, из которого вызывается window.postMessage.(Присутствуют другие стандартные свойства событий с их ожидаемыми значениями.)
А iFrame-Resizer библиотека использует postMessage для сохранения размера iFrame в соответствии с его содержимым, а также МутацияОбсервер для обнаружения изменений в содержимом и не зависит от 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...Плюс содержит много полезной информации и ссылок на другие решения.
http://www.onlineaspect.com/2010/01/15/backwards-совместимый-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:ххх».Возможно, это не то, что вы хотите.
может быть немного поздно, так как все остальные ответы старше :-) но...вот мое решение.Протестировано в реальных FF, Chrome и Safari 5.0.
CSS:
iframe {border:0; overflow:hidden;}
яваскрипт:
$(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);.Здесь я объясняю, как я это сделал.
Сайт А = http://foo.com Сайт Б = http://бар.com
SiteB загружается на сайте siteA.
На сайте SiteB есть эта строка
window.parent.postMessage("Hello From IFrame", "*");
или
window.parent.postMessage("Hello From IFrame", "http://foo.com");
Тогда на сайтеA есть следующий код
// 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);
Если вы хотите добавить безопасное соединение, вы можете использовать это условие if в 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.
}
Для ИЕ
Внутри 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.8grades.co.nz/2010/06/09/dynamically-resize-an-iframe-dependent-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() — это функция обнаружения браузера, «вдохновленная» Ext Core. http://docs.sencha.com/core/source/Ext.html#method-Ext-apply
Это хорошо сработало для FF и IE, но с Chrome возникли проблемы.Одной из проблем была проблема со временем: очевидно, Chrome требуется некоторое время, чтобы установить/определить высоту iframe.Кроме того, 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 должны активно реализовывать изменение размера, поэтому я предполагаю, что в междоменной модели вы не сможете сделать это без какого-либо участия удаленного контента.Если ваш контент может отправлять сообщение нового размера на страницу контейнера, используя типичные методы междоменной связи, тогда все остальное просто.
Если вы хотите уменьшить масштаб веб-страницы, чтобы она соответствовала размеру iframe:
- Вам следует изменить размер iframe чтобы оно соответствовало содержанию
- Затем вам следует уменьшить масштаб всего iframe с загруженным содержимым веб-страницы.
Вот пример:
<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/#{docHeight: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);
получить высоту содержимого iframe, а затем передать ее этому iframe
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:
родительский.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>
