Я загружаю веб-страницу aspx в iframe. Содержимое в Iframe может иметь большую высоту, чем высота iframe. У iframe не должно быть полос прокрутки.
У меня есть тег оболочки div
внутри iframe, который в основном представляет собой весь контент. Я написал несколько jQuery, чтобы изменить размер:
$("#TB_window", window.parent.document).height($("body").height() + 50);
где
TB_window
- это div, в котором содержится Iframe
.
body
- тег тела осины в iframe.
Этот скрипт прикреплен к содержимому iframe. Я получаю элемент TB_window
с родительской страницы. Хотя это отлично работает на Chrome, но TB_window падает в Firefox. Я действительно смущен / потерян, почему это происходит.
Вы можете получить высоту содержимого IFRAME
, используя:
contentWindow.document.body.scrollHeight
После загрузки IFRAME
вы можете изменить высоту, выполнив следующие действия:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Затем на теге IFRAME
вы подключаете обработчик следующим образом:
<iframe id="idIframe" onload="iframeLoaded()" ...
Некоторое время назад у меня была ситуация, когда мне дополнительно нужно было вызвать «iframeLoaded» из самого «IFRAME» после того, как в нем произошла подача формы. Вы можете сделать это, выполнив следующие действия в скриптах содержимого IFRAME
:
parent.iframeLoaded();
Немного улучшенный ответ Аристосу...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Затем объявите в своем iframe следующее:
<iframe onload="resizeIframe(this)" ...
Есть два незначительных улучшения:
iframe.height = ""
, если вы собираетесь переназначить его в следующем утверждении. Это на самом деле влечет за собой накладные расходы, поскольку вы имеете дело с элементом DOM.Редактировать: Если содержимое в кадре постоянно меняется, тогда вызовите:
parent.resizeIframe(this.frameElement);
из iframe после обновления. Работает для того же происхождения.
Или для автоматического обнаружения:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
Я обнаружил, что принятого ответа недостаточно, поскольку X-FRAME-OPTIONS: Allow-From [не поддерживается в сафари или хроме](https://developer.mozilla.org/en-US/docs/HTTP / X-Frame-Options). Вместо этого пошли с другим подходом, найденным в презентации, предоставленной Беном Уксусом из Disqus. Идея состоит в том, чтобы добавить слушателя событий в родительское окно, а затем внутри iframe использовать vindow.postMessage для отправки события родителю, говорящему ему что-то делать (изменить iframe).
Итак, в родительском документе добавьте слушателя событий:
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);
А внутри iframe напишите функцию для публикации сообщения:
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
Наконец, внутри iframe добавьте onLoad к тегу тела, чтобы запустить функцию изменения размера:
<body onLoad="resize();">
Добавьте это к iframe, это сработало для меня:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
И если вы используете jQuery, попробуйте этот код:
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
Есть четыре различных свойства, на которые вы можете посмотреть, чтобы получить высоту содержимого в iFrame.
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
К сожалению, все они могут дать разные ответы, и они безутешны между браузерами. Если вы установите поле тела равным 0, то document.body.offsetHeight
даст лучший ответ. Чтобы получить правильное значение, попробуйте эту функцию; который взят из библиотеки iframe-resizer , которая также заботится о сохранении iFrame правильного размера при изменении содержимого или изменении размера браузера.
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
Другие ответы не работали на меня, поэтому я внес некоторые изменения. Надеюсь, это поможет
$('#iframe').on("load", function() {
var iframe = $(window.top.document).find("#iframe");
iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
На всякий случай это кому-нибудь поможет. Я вырывал волосы, пытаясь заставить это работать, затем заметил, что у iframe был классный вход с ростом: 100%. Когда я удалил это, все работало, как ожидалось. Поэтому, пожалуйста, проверьте наличие конфликтов CSS.
Вы также можете добавить повторяющийся запросAnimationFrame в ваш resizeIframe (например,. из ответа @BlueFish), который всегда будет вызываться до того, как браузер раскрасит макет, и вы сможете обновить высоту iframe, когда его содержание изменит свою высоту. например. формы ввода, ленивый загруженный контент и т. д.
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
ваш обратный звонок должен быть достаточно быстрым, чтобы не оказывать большого влияния на вашу общую производительность
Вы можете обратиться к соответствующему вопросу здесь - https://stackoverflow.com/questions/18765762/how-to-make-width-and-height-of-iframe-same-as-it-parent-div/38917939#38917939 ,
Чтобы установить динамическую высоту -
И коды - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
Вместо того, чтобы использовать javscript / jquery, самый простой способ, который я нашел, это:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
& Лт;!- конец фрагмента - >
Здесь 1vh = 1% высоты окна браузера. Таким образом, теоретическая ценность высоты, которая должна быть установлена, составляет 100 Вч, но практически 98 Вч сделали магию.
Образец с использованием PHP htmlspecialchars () + проверьте, существует ли высота и есть > 0:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
& Лт;!- конец фрагмента - >
Я обнаружил, что ответ Троя не сработал. Это тот же код, переработанный для ajax:
$.ajax({
url: 'data.php',
dataType: 'json',
success: function(data)
{
// Put the data onto the page
// Resize the iframe
var iframe = $(window.top.document).find("#iframe");
iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
}
});
Чтобы добавить к фрагменту окна, который, кажется, отрезан внизу, особенно когда у вас нет прокрутки, я использовал:
function resizeIframe(iframe) {
var addHeight = 20; //or whatever size is being cut off
iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
}
Этот полезен, когда вам требуется решение без jquery. В этом случае вы должны попробовать добавить контейнер и установить к нему заполнение в процентах
HTML пример кода:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
Пример кода CSS:
.iframeclass{
position: absolute;
top: 0;
width: 100%;
}
.iframecontainer{
position: relative;
width: 100%;
height: auto;
padding-top: 61%;
}
Простое решение состоит в том, чтобы измерить ширину и высоту области содержимого, а затем использовать эти измерения для расчета процента нижнего заполнения.
В этом случае измерения составляют 1680 x 720 px, поэтому прокладка снизу составляет 720/1680 = 0,43 * 100, что составляет 43%.
.canvas-container {
position: relative;
padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
height: 0;
overflow: hidden;
}
.canvas-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Немного улучшенный ответ BlueFish...
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
Это учитывает высоту экрана окон (браузер, телефон), которая подходит для адаптивного дизайна, и рамы, которые имеют огромную высоту. Заполнение представляет желаемую прокладку выше и ниже iframe в случае, если она проходит через весь экран.
jQuery('.home_vidio_img1 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery(this).replaceWith(video);
});
jQuery('.home_vidio_img2 img').click(function(){
video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img3 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img4 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
$(document).height() // - $('body').offset().top
и / или
$(window).height()
См. Вопрос переполнения стека https://stackoverflow.com/questions/806402.
Попробуйте это, чтобы найти высоту тела в jQuery:
if $("body").height()
Он не имеет значения, если Firebug. Возможно, в этом проблема.