Сделать так, чтобы iframe автоматически настраивал высоту в соответствии с содержимым без использования полосы прокрутки?
Например:
<iframe name="Stack" src="http://stackru.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Я хочу, чтобы он мог регулировать высоту в соответствии с содержимым внутри, без использования прокрутки.
17 ответов
Добавьте это к вашему <head> раздел:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
И измените свой iframe на это:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Как нашел на сайте точка обсуждения.
Вы можете использовать эту библиотеку, которая изначально корректно изменяет размер вашего iframe, а также поддерживает его в нужном размере, определяя всякий раз, когда изменяется размер содержимого iframe (либо путем регулярной проверки в setInterval или через MutationObserver) и изменение его размера.
https://github.com/davidjbradshaw/iframe-resizer
Это работает как с перекрестными, так и с одинаковыми доменными фреймами.
Вот компактная версия:
<iframe src="hello.html"
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
Предложение hjpotter92 не работает в сафари! Я внес небольшую корректировку в скрипт, чтобы он теперь работал и в Safari.
Единственное сделанное изменение - сброс высоты на 0 при каждой загрузке, чтобы позволить некоторым браузерам уменьшить высоту.
Добавьте это к <head> тег:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
И добавить следующее onload приписать свой iframe, как так
<iframe onload='resizeIframe(this)'></iframe>
Избегайте встроенного JavaScript; Вы можете использовать класс:
<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>
И сослаться на это с помощью jQuery:
$('.iframe-full-height').on('load', function(){
this.style.height=this.contentDocument.body.scrollHeight +'px';
});
Ответ hjpotter92 в некоторых случаях работает достаточно хорошо, но я обнаружил, что содержание iframe часто обрезается снизу в Firefox и IE, а в Chrome - нормально.
Следующее работает хорошо для меня и исправляет проблему отсечения. Код был найден по адресу http://www.dyn-web.com/tutorials/iframes/height/. Я сделал небольшую модификацию, чтобы убрать атрибут onload из HTML. Поместите следующий код после <iframe> HTML и до закрытия </body> тег:
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackru.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>
Ваш iframe HTML:
<iframe id="ifrm" src="some-iframe-content.html"></iframe>
Обратите внимание, если вы предпочитаете включать Javascript в <head> документа, то вы можете вернуться к использованию встроенного onload атрибут в iframe HTML, как на веб -странице dyn-web.
Метод метода .contents() в jQuery позволяет нам искать непосредственных потомков элемента в дереве DOM.
JQuery:
$('iframe').height( $('iframe').contents().outerHeight() );
Помните, что тело страницы внутри iframe должно иметь высоту
CSS:
body {
height: auto;
overflow: auto
}
Попробуйте это для IE11
<iframe name="Stack" src="http://stackru.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
Это работает для меня (также с несколькими фреймами на одной странице):
$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
Это работает для меня (в основном).
Поместите это внизу вашей страницы.
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="application/javascript" src="/script/jquery.browser.js">
</script>
<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>
<script type="application/javascript">
jQuery('iframe').iframeAutoHeight();
$(window).load(
function() {
jQuery('iframe').iframeAutoHeight();
}
);
// for when content is not html e.g. a PDF
function setIframeHeight() {
$('.iframe_fullHeight').each(
function (i, item) {
item.height = $(document).height();
}
);
};
$(document).ready( function () {
setIframeHeight();
});
$(window).resize( function () {
setIframeHeight();
});
</script>
Первая половина - из???, и работает, когда в iframe есть html. Вторая половина устанавливает для iframe высоту страницы (не высоту содержимого), если класс iframes iframe_fullHeight, Вы можете использовать это, если контент представляет собой PDF или другой подобный, но вы должны установить класс. Также можно использовать только в том случае, если подходит полная высота.
Примечание: по некоторым причинам, когда он пересчитывает после изменения размера окна, он получает неправильную высоту.
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ;
jq2('#stocks_iframe').css('height',iframe_width); });
<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
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";
}
добавьте это в свой iframe: onload="autoResize('youriframeid')"
Я сделал это с AngularJS. Angular не имеет ng-load, но был создан сторонний модуль; установите ниже, либо найдите его здесь: https://github.com/andrefarzat/ng-load
Получите директиву ngLoad: bower install ng-load --save
Настройте свой iframe:
<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>
Функция resizeIframe контроллера:
$scope.resizeIframe = function (event) {
console.log("iframe loaded!");
var iframe = event.target;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
В прошлом у меня были проблемы с вызовом iframe.onload для динамически создаваемых iframe, поэтому я использовал этот подход для установки размера iframe:
iFrame View
var height = $("body").outerHeight();
parent.SetIFrameHeight(height);
Главный вид
SetIFrameHeight = function(height) {
$("#iFrameWrapper").height(height);
}
(это будет работать, только если оба представления находятся в одном домене)
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
это не работает для хрома. Но работает на Firefox.
Я хотел сделать iframe вести себя как обычная страница (мне нужно было сделать полноэкранный баннер внутри iframe элемент), так вот мой сценарий:
(function (window, undefined) {
var frame,
lastKnownFrameHeight = 0,
maxFrameLoadedTries = 5,
maxResizeCheckTries = 20;
//Resize iframe on window resize
addEvent(window, 'resize', resizeFrame);
var iframeCheckInterval = window.setInterval(function () {
maxFrameLoadedTries--;
var frames = document.getElementsByTagName('iframe');
if (maxFrameLoadedTries == 0 || frames.length) {
clearInterval(iframeCheckInterval);
frame = frames[0];
addEvent(frame, 'load', resizeFrame);
var resizeCheckInterval = setInterval(function () {
resizeFrame();
maxResizeCheckTries--;
if (maxResizeCheckTries == 0) {
clearInterval(resizeCheckInterval);
}
}, 1000);
resizeFrame();
}
}, 500);
function resizeFrame() {
if (frame) {
var frameHeight = frame.contentWindow.document.body.scrollHeight;
if (frameHeight !== lastKnownFrameHeight) {
lastKnownFrameHeight = frameHeight;
var viewportWidth = document.documentElement.clientWidth;
if (document.compatMode && document.compatMode === 'BackCompat') {
viewportWidth = document.body.clientWidth;
}
frame.setAttribute('width', viewportWidth);
frame.setAttribute('height', lastKnownFrameHeight);
frame.style.width = viewportWidth + 'px';
frame.style.height = frameHeight + 'px';
}
}
}
//--------------------------------------------------------------
// Cross-browser helpers
//--------------------------------------------------------------
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function () {
return (fn.call(elem, window.event));
});
}
}
})(window);
Функции говорят сами за себя и имеют комментарии для дальнейшего объяснения их цели.
Эта опция будет работать на 100%
<iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>