Изменение размера iframe в соответствии с высотой содержимого в нем.

Я открываю страницу своего блога на своем веб-сайте. Проблема в том, что я могу дать ширину iframe, но высота должна быть динамической, чтобы в iframe не было полосы прокрутки, и она выглядит как одна страница...

Я пробовал различный JavaScript-код для вычисления высоты содержимого, но все они дают доступ к разрешенной ошибке разрешения и бесполезны.

<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>

Можно ли использовать Ajax для вычисления высоты или, возможно, с помощью PHP?

Ответ 1

Чтобы напрямую ответить на ваши два подзапроса: Нет, вы не можете сделать это с помощью Ajax и не можете рассчитать его с помощью PHP.

То, что я делал в прошлом, это использовать триггер с страницы iframe'd в window.onload (NOT domready, так как может потребоваться некоторое время для загрузки изображений), чтобы передать высоту страницы страницы родительскому.

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

Затем parent.resizeIframe выглядит следующим образом:

function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Et voila, у вас есть надежный resizer, который запускается после полной рендеринга страницы без противного contentdocument vs contentWindow fiddling:)

Конечно, теперь люди сначала видят ваш iframe на высоте по умолчанию, но это можно легко обработать, сначала спрятав ваш iframe и просто показывая изображение загрузки. Затем, когда функция resizeIframe запускается, добавьте две дополнительные строки, которые будут скрывать загружаемое изображение, и покажите iframe для этого ложного вида Ajax.

Конечно, это работает только из одного домена, поэтому вы можете захотеть создать прокси-сервер PHP script, чтобы вставить этот материал, и как только вы отправитесь туда, вы можете просто вставить свой блог RSS-канал прямо в свой сайт с PHP.

Ответ 2

Вы можете сделать это с помощью JavaScript.

document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";

Ответ 3

Подбор содержимого IFRAME - это легкая вещь для найти в Google. Здесь одно решение:

<script type="text/javascript">
    function autoIframe(frameId) {
       try {
          frame = document.getElementById(frameId);
          innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
          objToResize = (frame.style) ? frame.style : frame;
          objToResize.height = innerDoc.body.scrollHeight + 10;
       }
       catch(err) {
          window.status = err.message;
       }
    }
</script>

Это, конечно, не решает проблему междоменной проблемы, которую вы имеете... Настройка document.domain может помочь, если эти сайты находятся в одном месте. Я не думаю, что есть решение, если вы производите случайные сайты iframe.

Ответ 4

Здесь мое решение проблемы с использованием MooTools, которое работает в Firefox 3.6, Safari 4.0.4 и Internet Explorer 7:

var iframe_container = $('iframe_container_id');
var iframe_style = {
    height: 300,
    width: '100%'
};
if (!Browser.Engine.trident) {
    // IE has hasLayout issues if iframe display is none, so don't use the loading class
    iframe_container.addClass('loading');
    iframe_style.display = 'none';
}
this.iframe = new IFrame({
    frameBorder: 0,
    src: "http://www.youriframeurl.com/",
    styles: iframe_style,
    events: {
        'load': function() {
            var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
            var h = this.measure(function(){
                return innerDoc.body.scrollHeight;
            });            
            this.setStyles({
                height: h.toInt(),
                display: 'block'
            });
            if (!Browser.Engine.trident) {
                iframe_container.removeClass('loading');
            }
        }
    }
}).inject(iframe_container);

Настройте класс загрузки, чтобы показать графику загрузки Ajax в середине контейнера iframe. Затем для браузеров, отличных от Internet Explorer, он отобразит полноразмерный IFRAME, как только загрузка его содержимого будет завершена, и снимет графику загрузки.

Ответ 5

Ниже приведен мой обработчик событий onload.

Я использую IFRAME в диалоговом окне jQuery UI. Различные способы использования потребуют определенных корректировок. Кажется, это делает трюк для меня (пока) в Internet Explorer 8 и Firefox 3.5. Возможно, потребуется дополнительная настройка, но общая идея должна быть ясной.

    function onLoadDialog(frame) {
    try {
        var body = frame.contentDocument.body;
        var $body = $(body);
        var $frame = $(frame);
        var contentDiv = frame.parentNode;
        var $contentDiv = $(contentDiv);

        var savedShow = $contentDiv.dialog('option', 'show');
        var position = $contentDiv.dialog('option', 'position');
        // disable show effect to enable re-positioning (UI bug?)
        $contentDiv.dialog('option', 'show', null);
        // show dialog, otherwise sizing won't work
        $contentDiv.dialog('open');

        // Maximize frame width in order to determine minimal scrollHeight
        $frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
                contentDiv.offsetWidth + frame.offsetWidth);

        var minScrollHeight = body.scrollHeight;
        var maxWidth = body.offsetWidth;
        var minWidth = 0;
        // decrease frame width until scrollHeight starts to grow (wrapping)
        while (Math.abs(maxWidth - minWidth) > 10) {
            var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
            $body.css('width', width);
            if (body.scrollHeight > minScrollHeight) {
                minWidth = width;
            } else {
                maxWidth = width;
            }
        }
        $frame.css('width', maxWidth);
        // use maximum height to avoid vertical scrollbar (if possible)
        var maxHeight = $contentDiv.dialog('option', 'maxHeight')
        $frame.css('height', maxHeight);
        $body.css('width', '');
        // correct for vertical scrollbar (if necessary)
        while (body.clientWidth < maxWidth) {
            $frame.css('width', maxWidth + (maxWidth - body.clientWidth));
        }

        var minScrollWidth = body.scrollWidth;
        var minHeight = Math.min(minScrollHeight, maxHeight);
        // descrease frame height until scrollWidth decreases (wrapping)
        while (Math.abs(maxHeight - minHeight) > 10) {
            var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
            $body.css('height', height);
            if (body.scrollWidth < minScrollWidth) {
                minHeight = height;
            } else {
                maxHeight = height;
            }
        }
        $frame.css('height', maxHeight);
        $body.css('height', '');

        // reset widths to 'auto' where possible
        $contentDiv.css('width', 'auto');
        $contentDiv.css('height', 'auto');
        $contentDiv.dialog('option', 'width', 'auto');

        // re-position the dialog
        $contentDiv.dialog('option', 'position', position);

        // hide dialog
        $contentDiv.dialog('close');
        // restore show effect
        $contentDiv.dialog('option', 'show', savedShow);
        // open using show effect
        $contentDiv.dialog('open');
        // remove show effect for consecutive requests
        $contentDiv.dialog('option', 'show', null);

        return;
    }

    //An error is raised if the IFrame domain != its container domain
    catch (e) {
        window.status = 'Error: ' + e.number + '; ' + e.description;
        alert('Error: ' + e.number + '; ' + e.description);
    }
};

Ответ 6

Трюк состоит в том, чтобы получить все необходимые события iframe из внешнего script. Например, у вас есть script, который создает iFrame с помощью document.createElement; в этом же script вы временно имеете доступ к содержимому iFrame.

var dFrame = document.createElement("iframe");
dFrame.src = "http://www.example.com";
// Acquire onload and resize the iframe
dFrame.onload = function()
{
    // Setting the content window resize function tells us when we've changed the height of the internal document
    // It also only needs to do what onload does, so just have it call onload
    dFrame.contentWindow.onresize = function() { dFrame.onload() };
    dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px";
}
window.onresize = function() {
    dFrame.onload();
}

Это работает, потому что dFrame остается в области этих функций, предоставляя вам доступ к внешнему элементу iFrame из рамки фрейма, позволяя видеть фактическую высоту документа и при необходимости расширять его. Этот пример будет работать в firefox, но нигде больше; Я мог бы дать вам обходные пути, но вы можете выяснить остальные;)

Ответ 7

Как динамически настраивать высоту iframes действительно прост и проверен мной.

Ответ 8

@SchizoDuckie ответ очень изящный и легкий, но из-за отсутствия Webkit реализации для scrollHeight (см. здесь), не работает на Webkit (Safari, Chrome, различные и разные мобильные платформы).

Для этой базовой идеи работы с Webkit наряду с браузерами Gecko и Trident, нужно только заменить

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

<body onload='parent.resizeIframe(document.body.offsetHeight)'>

Пока все находится в одном домене, это работает очень хорошо.

Ответ 9

Попробуйте это, вы можете изменить его, даже если хотите. в этом примере используйте jQuery.

$('#iframe').live('mousemove', function (event) {   
    var theFrame = $(this, parent.document.body);
    this.height($(document.body).height() - 350);           
});

Ответ 10

Я просто провел большую часть 3-х дневной борьбы с этим. Я работаю над приложением, которое загружает другие приложения в себя, сохраняя фиксированный заголовок и фиксированный нижний колонтитул. Вот что я придумал. (Я также использовал EasyXDM с успехом, но позже вытащил его для использования этого решения.)

Обязательно запустите этот код ПОСЛЕ <iframe> в DOM. Поместите его на страницу, которая вставляет iframe (родительский).

// get the iframe
var theFrame = $("#myIframe");
// set its height to the height of the window minus the combined height of fixed header and footer
theFrame.height(Number($(window).height()) - 80);

function resizeIframe() {
    theFrame.height(Number($(window).height()) - 80);
}

// setup a resize method to fire off resizeIframe.
// use timeout to filter out unnecessary firing.
var TO = false;
$(window).resize(function() {
    if (TO !== false) clearTimeout(TO);
    TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds
});

Ответ 11

Попробуйте использовать атрибут scrolling=no в теге iframe. Mozilla также имеет свойство CSS overflow-x и overflow-y, которое вы можете изучить.

В терминах высоты вы также можете попробовать height=100% в теге iframe.