динамическое изменение ширины высоты iframe в зависимости от внутреннего содержимого

Question

У меня есть iframe с содержанием, как показано ниже,

    <iframe  frameborder="no" src="http:localhost/com" id="iframe">
     <div style="height:850px;width:700px;">div text </div>
   </iframe>

Это показывает iframe с хори. и вертикальная прокрутка, но не высота внутреннего содержимого 850 пикселей.

как я могу динамически изменять высоту iframe, основываясь на внутренней высоте содержимого n width. Я использую JQuery внутри контента.

Это междоменный js-виджет, поэтому большинство из приведенных ниже ответов выдает ошибку "Отказано в разрешении" Thanxs, Nithish

Answer 1

var newHeight = $("iframe[id='iframeAutenticador']").contents().find("html").height();
$("iframe[id='iframeAutenticador']").height(newHeight);

используйте это.

Answer 2

Nithish,

, если вы используете jquery, тогда вы можете легко найти (и установить) высоту любого div (в вашем домене - не на внешнем контенте) как таковое:

// get the height - in case we want to factor it into the equation below!!
var myDivHeight = $('iframe').css('height');

// set the height
var docHeight = $(document).css('height');
$('iframe').css('height', docHeight);

надеюсь, это поможет ...

Answer 3

Вы должны создать функцию для измерения высоты содержимого, установить высоту IFrame и затем вызвать функцию изменения размера при загрузке содержимого.

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id]
                    .document.body.scrollHeight;
}
</SCRIPT>

Answer 4

Я нашел это здесь: stackoverflow.com / questions / 1145850 /

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

    <script type="text/javascript">
        function getDocHeight(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var height = Math.max( body.scrollHeight, body.offsetHeight, 
                html.clientHeight, html.scrollHeight, html.offsetHeight );
            return height;
        }
        function getDocWidth(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var width = Math.max( body.scrollWidth, body.offsetWidth,
                html.clientWidth, html.scrollWidth, html.offsetWidth );
            return width;
        }
        function setIframeSize(id) {
            var ifrm = document.getElementById(id);
            var doc = ifrm.contentDocument? ifrm.contentDocument: 
                ifrm.contentWindow.document;
            ifrm.style.visibility = 'hidden';
            ifrm.style.height = "10px"; // reset to minimal height ...
            ifrm.style.width = "10px"; // reset to minimal width ...
            // IE opt. for bing/msn needs a bit added or scrollbar appears
            ifrm.style.height = getDocHeight( doc ) + 4 + "px";
            ifrm.style.width = getDocWidth( doc ) + 4 + "px";
            ifrm.style.visibility = 'visible';
        }
    </script>

Затем убедитесь, что у вас есть уникальный идентификатор в вашем iframe и вызовите SetIframeSize:

<iframe src="source.html" id="uniqueid" onload="setIframeSize(this.id)"></iframe>

Answer 5

Если домены одинаковы для обеих страниц:

parent.document.getElementById("iframe").style.height = $(document).height()+"px";

Вы также можете использовать jQuery на родительской странице (если она там есть).