jquery отримує висоту вмісту iframe при завантаженні

У мене є сторінка довідки, 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';
}

Менш складна відповідь - використовувати, .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 );

Я виявив, що в 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 is not a function" під час відкриття нового фундаментального проекту

Це безкоштовне рішення 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
});

Це мій дружній прийом без використання j6

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`;
});