اضبط عرض وارتفاع iFrame لتناسب المحتوى فيه

Question

أنا بحاجة إلى حل ل ضبط تلقائي ال width و height من iframe لتناسب محتواها. النقطة المهمة هي أن العرض والارتفاع يمكن تغييرهما بعد iframe تم تحميله. أعتقد أنني بحاجة إلى إجراء حدث للتعامل مع التغيير في أبعاد الجسم الواردة في iframe.

Answer 1

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Answer 2

عبر المتصفح jQuery المكون الإضافي.

المتقاطع ، النطاق عبر مكتبة الذي يستخدم mutationObserver للحفاظ على الحجم الإطاعي للمحتوى و postMessage للتواصل بين iFrame والصفحة المضيفة. يعمل مع أو بدون jQuery.

Answer 3

جميع الحلول المقدمة حتى الآن تمثل فقط مرة واحدة تغيير الحجم. ذكرت أنك تريد أن تكون قادرًا على تغيير حجم IFRAME بعد تعديل المحتويات. من أجل القيام بذلك ، تحتاج إلى تنفيذ وظيفة داخل iframe (بمجرد تغيير المحتويات ، تحتاج إلى إطلاق حدث ليقول إن المحتويات قد تغيرت).

لقد تعثرت مع هذا لفترة من الوقت ، حيث بدا رمزًا داخل iframe مقصورًا على DOM داخل iframe (ولم أتمكن من تحرير IFRAME) ، وتم تنفيذ التعليمات البرمجية خارج IFRAME مع DOM خارج IFRAME (ولم يكن بإمكانه " T التقاط حدث قادم من داخل iFrame).

جاء الحل من اكتشاف (من خلال المساعدة من أحد الزملاء) يمكن إخبار jQuery بما يجب استخدامه. في هذه الحالة ، DOM من النافذة الأصل.

على هذا النحو ، فإن كود مثل هذا يفعل ما تحتاجه (عند تشغيله داخل iframe):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

Answer 4

إذا كان محتوى iframe من نفس المجال ، فيجب أن يعمل هذا بشكل رائع. لا يتطلب jQuery رغم ذلك.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

لتغيير حجمها ديناميكيًا ، يمكنك القيام بذلك:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

ثم على الصفحة التي يتم تحميلها لإطارات iframe إضافة هذا:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Answer 5

حل واحد للمتضمنات: يبدأ بحجم دقيقة ويزيد إلى حجم المحتوى. لا حاجة لعلامات البرنامج النصي.

<iframe src="http://URL_HERE.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>

Answer 6

إليك حل متصفح متقاطع إذا كنت لا ترغب في استخدام jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

Answer 7

أنا أستخدم هذا الرمز لارتفاع تحويل التلقائي لجميع الإطارات (مع فئة AutoHeight) عندما يتم تحميلها على الصفحة. تم اختباره ويعمل في IE و FF و Chrome و Safari و Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

Answer 8

بعد أن جربت كل شيء على الأرض ، يعمل هذا حقًا بالنسبة لي.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

Answer 9

هذا حل دليل قوي

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

HTML

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

Answer 10

لقد قمت بتعديل حل Garnaph الرائع قليلاً أعلاه. بدا أن حله عدل حجم iframe بناءً على الحجم قبل الحدث مباشرة. بالنسبة لموقفي (إرسال البريد الإلكتروني عبر iframe) ، كنت بحاجة إلى ارتفاع IFRAME لتتغير مباشرة بعد التقديم. على سبيل المثال ، أظهر أخطاء التحقق من الصحة أو رسالة "شكرًا لك" بعد التقديم.

لقد ألغت للتو وظيفة Click () المتداخلة ووضعها في Iframe HTML:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

عملت بالنسبة لي ، ولكن لست متأكدا من وظائف المتصفح عبر.

Answer 11

فيما يلي عدة طرق:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

وبديل آخر

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

لإخفاء التمرير مع 2 بدائل كما هو موضح أعلاه

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

اختراق بالرمز الثاني

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

لإخفاء أشرطة التمرير في iframe ، يتم تصنيع الوالد "فائض: مخفي" لإخفاء أشرطة التمرير ، ويتم تصنيع iFrame حتى يصل إلى 150 ٪ من العرض والارتفاع الذي يفرض على أشرطة التمرير خارج الصفحة وبما أن الجسم لا يفعل ذلك T لديك Scroll Bars قد لا يتوقع أن يتجاوز Iframe حدود الصفحة. هذا يخفي أشرطة التمرير من iframe بعرض كامل!

المصدر: مجموعة IFRAME AUTO ارتفاع

Answer 12

لا يمكن للجميع العمل باستخدام الأساليب أعلاه.

JavaScript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

لغة البرمجة:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

ENV: IE 10 ، Windows 7 X64

Answer 13

إذا كنت تستطيع التحكم في كل من محتوى iframe ونافذة الأصل ، فأنت بحاجة إلى ريزير iframe.

تتيح هذه المكتبة تغيير حجم الارتفاع التلقائي لعرض وعرض كل من IFRAMES المتقاطع في المجال لتناسب المحتوى المحتوى. إنه يوفر مجموعة من الميزات لمعالجة أكثر المشكلات شيوعًا في استخدام Iframes ، وتشمل هذه:

• ارتفاع وعرض تغيير حجم IFRAME إلى حجم المحتوى.
• يعمل مع Iframes متعددة ومتداخلة.
• مصادقة المجال لإطارات النطاق المتقاطع.
• يوفر مجموعة من طرق حساب حجم الصفحة لدعم تخطيطات CSS المعقدة.
• يكتشف التغييرات على DOM التي يمكن أن تتسبب في تغيير حجم الصفحة باستخدام MutationObserver.
• يكتشف الأحداث التي يمكن أن تتسبب في تغيير حجم الصفحة (تغيير حجم النافذة ، والرسوم المتحركة CSS والانتقال ، وتغيير الاتجاه وأحداث الماوس).
• رسائل مبسطة بين iFrame والصفحة المضيفة عبر postmessage.
• إصلاحات في صلات الصفحات في iframe ويدعم الروابط بين iframe والصفحة الأصل.
• يوفر طرق التحجيم والتمرير المخصص.
• يعرض موقف الوالدين وحجم المنفذ إلى iframe.
• يعمل مع ViewerJs لدعم وثائق PDF و ODF.
• دعم احتياطي وصولاً إلى IE8.

Answer 14

في حالة وصول شخص ما إلى هنا: واجهت مشكلة في الحلول عندما أزلت divs من iframe - لم يصبح iFrame أقصر.

يوجد مكون إضافي jQuery يقوم بالمهمة:

http://www.jqueryscript.net/layout/jquery-plugin-for-auto-redizing-iframe-iframe-resizer.html

Answer 15

اكتشفت حل آخر بعد بعض التجارب. لقد جربت في الأصل الرمز الذي تم وضع علامة عليه على أنه "أفضل إجابة" على هذا السؤال ولم ينجح. تخميني هو أن iframe في برنامجي في ذلك الوقت تم إنشاؤه ديناميكيًا. إليكم الكود الذي استخدمته (لقد عملت بالنسبة لي):

JavaScript داخل iframe يتم تحميله:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

من الضروري إضافة 4 بكسل أو أكثر إلى الارتفاع لإزالة أشرطة التمرير (بعض الأخطاء/التأثير الغريبة للإطارات). العرض غريب ، فأنت آمن لإضافة 18 بكسل إلى عرض الجسم. تأكد أيضًا من أن لديك CSS لجسم iframe المطبق (أدناه).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

إليكم HTML لـ IFRAME:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

فيما يلي كل الرمز داخل Iframe الخاص بي:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

لقد أجريت اختبارًا في Chrome وقليلًا في Firefox (في Windows XP). لا يزال لدي المزيد من الاختبارات للقيام بها ، لذا من فضلك أخبرني كيف يعمل هذا من أجلك.

Answer 16

لقد وجدت هذا المجاز للعمل بشكل أفضل:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

لاحظ أن كائن النمط تتم إزالة.

Answer 17

في jQuery ، هذا هو الخيار الأفضل بالنسبة لي ، وهذا يساعدني حقًا !! أنتظر هذا يساعدك!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

Answer 18

من الممكن صنع iFrame "يشبه الأشباح" الذي يتصرف كما لو لم يكن هناك.

نرى http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

في الأساس تستخدم نظام الأحداث parent.postMessage(..) موضح فيhttps://developer.mozilla.org/en-us/docs/dom/window.postmessage

هذا يعمل جميع المتصفحات الحديثة!

Answer 19

هكذا سأفعل ذلك (تم اختباره في FF/Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Answer 20

أعلم أن المنشور قديم ، لكنني أعتقد أن هذه طريقة أخرى للقيام بذلك. لقد قمت للتو بتنفيذ على الكود الخاص بي. يعمل بشكل مثالي على تحميل الصفحة وتغيير حجم الصفحة:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

Answer 21

JavaScript ليتم وضعها في الرأس:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

هنا يذهب رمز Iframe HTML:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

ورقة الأنماط CSS

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Answer 22

لـ AngularJS توجيه السمة:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

لاحظت النسبة المئوية ، لقد أدخلتها حتى تتمكن من مواجهة التحجيم عادةً من أجل iframe والنص والإعلانات وما إلى ذلك ، ما عليك سوى وضع 0 إذا لم يكن هناك أي تنفيذ

Answer 23

إذا كان المحتوى مجرد HTML بسيط للغاية ، فإن أبسط طريقة هي إزالة iFrame مع JavaScript

لغة البرمجة:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

JavaScript:

function removeIframe(obj)(
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

Answer 24

هكذا فعلت ذلك أو عندما تتغير الأمور.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Answer 25

سياق

اضطررت إلى القيام بذلك بنفسي في سياق تمدد الويب. هذا التمديد على شبكة الإنترنت يضخ بعضًا من واجهة المستخدم في كل صفحة ، ويعيش واجهة المستخدم هذه داخل iframe. المحتوى داخل iframe هو ديناميكي ، لذلك اضطررت إلى إعادة ضبط عرض وارتفاع iframe بحد ذاتها.

أنا أستعمل تتفاعل لكن المفهوم ينطبق على كل مكتبة.

الحل الخاص بي (هذا يفترض أنك تتحكم في كل من الصفحة والإيفران)

داخل iframe لقد تغيرت body أنماط أن يكون لها أبعاد كبيرة حقًا. سيسمح هذا للعناصر بالداخل باستخدام جميع المساحة اللازمة. تحضير width و height 100 ٪ لم ينجح بالنسبة لي (أعتقد أن iframe لديه افتراضي width = 300px و height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

ثم قمت بحقن جميع واجهة المستخدم Iframe داخل Div وأعطيتها بعض الأساليب

#ui-root {
  display: 'inline-block';     
}

بعد تقديم تطبيقي داخل هذا #ui-root (في تتفاعل أفعل هذا في الداخل componentDidMount) أقوم بحساب أبعاد هذا div مثلها ومزامنتها مع الصفحة الأصل باستخدام window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

في الإطار الأصل أفعل شيئًا كهذا:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Answer 26

من الواضح أن هناك الكثير من السيناريوهات ، ومع ذلك ، كان لدي نفس المجال للوثيقة والإطارات IFRAME ، وكنت قادراً على تحويل هذا إلى نهاية محتوى iFrame الخاص بي:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

هذا "يجد" الحاوية الأصل ثم يعين الطول إضافة على عامل الهراء من 50 بكسل لإزالة شريط التمرير.

لا يوجد شيء هناك "لمراقبة" ارتفاع مستندات المستند ، وهذا لم أكن بحاجة إلى حالة الاستخدام الخاصة بي. في إجابتي ، أحضر وسيلة للإشارة إلى الحاوية الأصل دون استخدام IDS المخبوز في محتوى الوالد/iframe.

Answer 27

البساطة:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

Answer 28

هذا يستخدم CSS المضمن فقط:

<iframe src="http://example.com" style="resize: both;"               
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';"
        onresize="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';">
</iframe>