У меня есть страница справки help.php, которую я загружаю в iframe в main.php. Как я могу получить высоту этой страницы после ее загрузки в iframe?
Я спрашиваю об этом, потому что я не могу установить высоту iframe до 100% или автоматически. Вот почему я думаю, что мне нужно использовать javascript .. Я использую jQuery
CSS:
body {
margin: 0;
padding: 0;
}
.container {
width: 900px;
height: 100%;
margin: 0 auto;
background: silver;
}
.help-div {
display: none;
width: 850px;
height: 100%;
position: absolute;
top: 100px;
background: orange;
}
#help-frame {
width: 100%;
height: auto;
margin:0;
padding:0;
}
JS:
$(document).ready(function () {
$("a.open-help").click(function () {
$(".help-div").show();
return false;
})
})
HTML:
<div class='container'>
<!-- -->
<div class='help-div'>
<p>This is a div with an iframe loading the help page</p>
<iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
</div> <a class="open-help" href="#">open Help in iFrame</a>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
Ответы:
хорошо, я наконец нашел хорошее решение:
$('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; });
Поскольку некоторые браузеры (более старые Safari и Opera) сообщают, что загрузка завершена до рендеринга CSS, вам необходимо установить тайм-аут, очистить и переназначить src iframe.
$('iframe').load(function() { setTimeout(iResize, 50); // Safari and Opera need a kick-start. var iSource = document.getElementById('your-iframe-id').src; document.getElementById('your-iframe-id').src = ''; document.getElementById('your-iframe-id').src = iSource; }); function iResize() { document.getElementById('your-iframe-id').style.height = document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px'; }
источник
real
размерdocument
высота, а неbody
высота. Используя jQuery, вы можете получить его$(this.contentWindow.document).height()
.Менее сложный ответ - использовать
.contents()
iframe. Интересно, однако, что он возвращает значение, отличное от того, которое я получил, используя код в моем исходном ответе, из-за заполнения, я полагаю, на теле.$('iframe').contents().height() + 'is the height'
Вот как я это сделал для междоменного общения, поэтому я боюсь, что это может быть излишне сложно. Во-первых, я бы поместил jQuery в документ iFrame; это потребует больше памяти, но не должно увеличивать время загрузки, поскольку скрипт необходимо загрузить только один раз.
Используйте jQuery iFrame, чтобы как можно раньше измерить высоту тела iframe (onDOMReady), а затем установите для хэша URL эту высоту. А в родительском документе добавьте
onload
событие к тегу iFrame, которое будет смотреть на расположение iframe и извлекать нужное значение. Поскольку onDOMReady всегда будет происходить до события загрузки документа, вы можете быть уверены, что значение будет передано правильно, без усложнения состояния гонки.Другими словами:
... в Help.php:
var getDocumentHeight = function() { if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady location.hash = $('body').height(); // at this point the document address will be something like help.php#1552 } }; $(getDocumentHeight);
... и в родительском документе:
var getIFrameHeight = function() { var iFrame = $('iframe')[0]; // this will return the DOM element var strHash = iFrame.contentDocument.location.hash; alert(strHash); // will return something like '#1552' }; $('iframe').bind('load', getIFrameHeight );
источник
<iframe src="../Help.php#introduction" />
)sleep(5)
файла в Help.php также должно быть хорошим способом тестирования любых условий гонки. ЕслиonLoad
раньше iframe каким-то образом сработалonDOMReady
, он должен появиться здесь.Я обнаружил, что в Chrome, Firefox и IE11 работает следующее:
$('iframe').load(function () { $('iframe').height($('iframe').contents().height()); });
Когда загрузка содержимого iframes завершится, событие сработает, и оно установит высоту IFrames на высоту его содержимого. Это будет работать только для страниц в том же домене, что и IFrame.
источник
Код для этого без jQuery в настоящее время тривиален:
const frame = document.querySelector('iframe') function syncHeight() { this.style.height = `${this.contentWindow.document.body.offsetHeight}px` } frame.addEventListener('load', syncHeight)
Чтобы отцепить событие:
frame.removeEventListener('load', syncHeight)
источник
Для этого вам не нужен jquery внутри iframe, но я использую его, потому что код намного проще ...
Поместите это в документ внутри вашего iframe.
$(document).ready(function() { parent.set_size(this.body.offsetHeight + 5 + "px"); });
добавлено пять выше, чтобы убрать полосу прокрутки в маленьких окнах, она никогда не бывает идеальной по размеру.
И это внутри вашего родительского документа.
function set_size(ht) { $("#iframeId").css('height',ht); }
источник
это правильный ответ, который сработал для меня
$(document).ready(function () { function resizeIframe() { if ($('iframe').contents().find('html').height() > 100) { $('iframe').height(($('iframe').contents().find('html').height()) + 'px') } else { setTimeout(function (e) { resizeIframe(); }, 50); } } resizeIframe(); });
источник
простой однострочник начинается с минимальной высоты по умолчанию и увеличивается до размера содержимого.
<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
источник
Принятый ответ
$('iframe').load
теперь приведет кa.indexOf is not a function
ошибке. Может быть обновлен до:$('iframe').on('load', function() { // ... });
Несколько других, похожих на
.load
устаревшие, начиная с jQuery 1.8: ошибка «Uncaught TypeError: a.indexOf не является функцией» при открытии нового основного проекта.источник
Это бесплатное решение jQuery, которое может работать со SPA внутри iframe.
document.getElementById('iframe-id').addEventListener('load', function () { let that = this; setTimeout(function () { that.style.height = that.contentWindow.document.body.offsetHeight + 'px'; }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate });
источник
Это мой дружественный к ES6 вариант без jquery.
document.querySelector('iframe').addEventListener('load', function() { const iframeBody = this.contentWindow.document.body; const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight); this.style.height = `${height}px`; });
источник