Высота документа IFrame возвращает высоту IFrame, а не реальную высоту - PullRequest
1 голос
/ 07 июля 2010

У меня есть некоторый javascript внутри iframe, который отправляет высоту тела iframe на родительскую страницу с использованием техники трех кадров в Изменение размера iframe на основе содержимого

Высота тела iframes всегда кажется равной 900, высота окна просмотра iframe. Это согласованно для всех браузеров.

iframe:

<iframe id="printiq" src="http://myurl.com" height="900px" width="980px">Your browser does not support iframes.</iframe>

Скрипт внутри iframe:

$(window).load(function() {
    var height = document.body.scrollHeight + 60;
    alert('Height: ' + height); //Always returns 900, the height of the iframe
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper';
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>';
    $('body').append(iframe_html);

});

Странная вещь, когда я проверяю DOM с помощью firebug, ни одна из переменных высоты (scrollHeight, offsetHeight и т. Д.) Не устанавливается в 900.

1 Ответ

0 голосов
/ 07 июля 2010

Проблема заключалась в том, что div на странице iframed расширялся до высоты области просмотра.Я исправил это, изменив css.

Вот код, которым я закончил.

Родительское окно.

function resizeIframe(height) {
    height = parseInt(height) + 60;
    $('iframe#printiq').attr('height', height); 
}

Скрипт для внешнего сайта iframed.

 $(window).load(function() {
    var height = $('#container').height() + $('#header').height();
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper';
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>';
    $('body').append(iframe_html);

});

Помощник iframe, встроенный в iframe.Внук окна браузера, если хотите.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <!--
    This page is on the same domain as the parent, so can
    communicate with it to order the iframe window resizing
    to fit the content
    -->
    <body onload="parentIframeResize()">
        <style type="text/css">
            body{
                border:none;
                display:none;
            }
        </style>
        <script>
            // Tell the parent iframe what height the iframe needs to be
            function parentIframeResize()
            {
                var height = getParam('height');
                // This works as our parent's parent is on our domain..
                parent.parent.resizeIframe(height);
            }

            function getUrlVars()
            {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }

            // Helper function, parse param from request string
            function getParam( name )
            {

                var results = getUrlVars();
                if( results == null )
                    return "";
                else
                    return results['height'];
            }
        </script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...