इसमें सामग्री के साथ फिट होने के लिए iframe की चौड़ाई और ऊंचाई समायोजित करें

Question

मैं के लिए एक समाधान की जरूरत है ऑटो का समायोजनwidth और heightएक की iframeमुश्किल से अपनी सामग्री फिट करने के लिए। मुद्दा यह है कि iframeलोड होने के बाद चौड़ाई और ऊंचाई को बदला जा सकता है । मुझे लगता है कि आईफ्रेम में निहित शरीर के आयामों में परिवर्तन से निपटने के लिए मुझे एक घटना कार्रवाई की आवश्यकता है।

Comments

कोणीय iFrame ऑटो-ऊंचाई: gitlab.com/reduardo7/angular-iframe-auto-height

— Eduardo Cuomo

स्वीकृत उत्तर काम नहीं करता है। प्रयास करें stackoverflow.com/a/31513163/482382

— स्टीवन शॉ

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>

Comments

@StoneHeart: हाँ, यह क्रॉस ब्राउज़र है। सामग्री के कारण कोड गैर-मानक अनुपालन है, जो DOM युक्ति में परिभाषित नहीं है। DOM कल्पना में contentDocument नामक गुण मौजूद है, लेकिन Internet Explorer 6 (और 7?) इसका समर्थन नहीं करता है। ContentWindow प्रॉपर्टी का उपयोग इसके बजाय किया जा सकता है और इसे सभी सामान्य ब्राउज़रों (गेको, ओपेरा, वेबकिट, IE) में लागू किया जाता है।

— राफेल

अगर (document.getElementById) का क्या उपयोग है?

— सहयोगी

यह भी मत भूलो कि यह डोमेन पार नहीं है। जिसके कारण इसे एक प्रकार की त्रुटि मिल रही है : यदि डोमेन अलग है तो संपत्ति 'दस्तावेज़' तक पहुँचने की अनुमति से इनकार कर दिया गया है। एक समाधान यहाँ

— पियरे डी लेस्पिन

सशर्त न केवल बेकार है, बल्कि दुर्लभ परिस्थितियों में इसका कारण समस्याओं की गारंटी है। आप यह देखने के लिए जाँच कर रहे हैं कि क्या कोई विधि मौजूद है और फिर जाँच के बाहर विधि का उपयोग कर रहे हैं ??

— जेएस

मुझे लगता है कि आप का मतलब है DOMContentLoaded, क्योंकि DOMContentReadyएक बात नहीं लगती है: developer.mozilla.org/en-US/…

— मैक्स हाइबर

Answer 2

क्रॉस-ब्राउज़र jQuery प्लग-इन ।

क्रॉस-बाउज़र, क्रॉस डोमेन लाइब्रेरी जो mutationObserveriFrame को सामग्री के आकार में रखने और postMessageiFrame और होस्ट पृष्ठ के बीच संवाद करने के लिए उपयोग करता है । JQuery के साथ या उसके बिना काम करता है।

Comments

Iframe-resizer लाइब्रेरी सबसे मजबूत समाधान है।

— kwill 13

Answer 3

इस प्रकार दिए गए सभी समाधान केवल एक बार बंद होने वाले आकार के लिए खाते हैं। आप उल्लेख करते हैं कि आप सामग्री को संशोधित करने के बाद iFrame का आकार बदलने में सक्षम होना चाहते हैं। ऐसा करने के लिए, आपको iFrame के अंदर एक फ़ंक्शन को निष्पादित करने की आवश्यकता है (एक बार सामग्री बदल जाने के बाद, आपको यह कहने के लिए एक घटना को आग लगाने की ज़रूरत है कि सामग्री बदल गई है)।

मैं थोड़ी देर के लिए इसके साथ फंस गया था, क्योंकि iFrame के अंदर कोड iFrame (और iFrame को संपादित नहीं कर सकता) के अंदर DOM तक सीमित लगता था, और iFrame के बाहर निष्पादित कोड iFrame (और cann 'के बाहर DOM के साथ अटका हुआ था) टी iFrame के अंदर से आने वाली घटना को उठाएं)।

समाधान खोजने से आया (एक सहयोगी से सहायता के माध्यम से) कि jQuery को बताया जा सकता है कि DOM का क्या उपयोग करना है। इस मामले में, मूल विंडो के 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>

Comments

इसके लिए पूरा कोड क्या होगा? मुझे लगता है कि स्क्रिप्ट iframe html में जाती है?

— एंड्रयू हंड्ट

यह पूर्ण कोड है, और हाँ, यह iFrame के HTML के अंदर चलता है। "Window.parent.document" भाग निर्दिष्ट करता है कि jQuery के चयनकर्ता को मूल दस्तावेज़ के DOM का उपयोग करना चाहिए, न कि उस दस्तावेज़ का जो आप (iFrame के अंदर है) में हैं।

— गार्नाफ

यह खूबसूरती से काम करता है यदि मूल दस्तावेज़ और iframe में दस्तावेज़ दोनों एक ही डोमेन से हैं । यदि वे (या, क्रोम में, यदि वे दोनों स्थानीय फ़ाइलें हैं ) नहीं हैं, तो ब्राउज़र की "एक ही मूल" सुरक्षा नीतियाँ किक करती हैं और यह iframe सामग्री को मूल दस्तावेज़ को संशोधित करने से रोकता है।

— user56reinstatemonica8

इस कार्य को क्रॉस-डोमेन जैसा बनाने की कोशिश करने वाले किसी भी व्यक्ति के लिए, window.postMessage (IE8 +) देखें और ध्यान रखें कि आपको होस्ट (माता-पिता) और स्रोत (iframe के भीतर) दस्तावेज़ों पर कस्टम स्क्रिप्ट की आवश्यकता होगी। jQuery पोस्टमेजेज प्लगइन मदद कर सकता है। चूंकि आपको होस्ट और स्रोत पर स्क्रिप्ट की आवश्यकता होगी, इसलिए यह आसान हो सकता है कि होस्ट ने AJAX द्वारा JSON-P का उपयोग करके सामग्री को लोड किया हो।

— user56reinstatemonica8

इसके बजाय स्वचालित रूप से घटना को कैसे फायर किया जाए jQuery("#IDofControlFiringResizeEvent").click(function ()?

— बेन

Answer 4

एम्बेड के लिए एक-लाइनर समाधान: एक मिनी-आकार से शुरू होता है और सामग्री के आकार तक बढ़ता है। स्क्रिप्ट टैग की कोई आवश्यकता नहीं है।

<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>

Comments

कोड कोड स्निपेट सफारी के साथ काम नहीं करता है। 9.1.1 शायद एसओ समस्या भी शामिल है?

— एलेंसर

यह क्रॉस डोमेन नहीं है। हो सकता है कि सर्वर को फ़्रेम पेज पर कुछ हेडर जोड़ने की आवश्यकता हो?

— चालाकी

यहां सभी उत्तर जो उल्लेख scrollHeight/scrollWidthकरते हैं कि शरीर के मार्जिन को ध्यान में रखने के लिए थोड़ा समायोजित किया जाना चाहिए। दस्तावेज़ों के बॉडी एलिमेंट (और यह फ़्रेम में लोड की गई सामग्री पर भी लागू होता है) के लिए ब्राउज़र डिफ़ॉल्ट नॉनजेरो मार्जिन लागू करते हैं। काम कर समाधान मैंने पाया इस जोड़ने के लिए है: parseInt(window.getComputedStyle(this.contentDocument.body).margin।

— स्टेन

Answer 5

यदि 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>

Comments

क्या ऐसा करने के कोई सरल तरीके हैं जब मूल एक अलग डोमेन से है?

— BruceJohnJennerLawso

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

Comments

वह अजीब है। मेरे लिए यह iframe की बहुत अजीब चौड़ाई की गणना करता है। सामग्री की चौड़ाई 750 है और यह 300 के रूप में गणना करता है। क्या आपके पास विचार हैं क्यों?

— रोब

मैंने इस कोड (ऊंचाई विकल्पों में जोड़कर) के साथ खेला। अगर मैंने iFrame की ऊंचाई 100% निर्धारित की है, तो यह लगभग 200px तक सीमित है। यदि मैं 600 फीट पर iFrame ऊंचाई सेट करता हूं, तो यह उसी के साथ चिपक जाता है। @RobertJagoda क्या आपको इसका हल मिला?

— इयानडेली

Answer 7

जब मैंने पृथ्वी पर सब कुछ करने की कोशिश की, तो यह वास्तव में मेरे लिए काम करता है।

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>

Comments

यह कहता है: अनकैप्ड टाइपर्रर: $ ऑटोइसेज़ ((इंडेक्स): 200) में HTMLIFrameElement.onload ((इंडेक्स): 204) पर एक फ़ंक्शन नहीं है

— माइकल रोजर्स

@ माइकल रोजर्स $ के साथ एक संघर्ष है या आप jQuery.js फ़ाइल को शामिल करना भूल जाते हैं। जेनेरिक फ़ंक्शन स्टैकओवरफ़्लो का उपयोग करें

— एड्रियन पी।

Answer 8

जब वे पृष्ठ पर लोड होते हैं तो मैं इस कोड का उपयोग सभी iframes (वर्ग autoHeight के साथ) की ऑटोडोल ऊंचाई के लिए कर रहा हूं। परीक्षण किया गया और यह IE, FF, क्रोम, सफारी और ओपेरा में काम करता है।

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

Comments

यह जादू 35 क्या आप जोड़ रहे हैं? किस ब्राउज़र और ओएस के लिए आपने इसे मापा था?

— h2stein

अब मुझे वास्तव में नहीं पता कि मैंने 35 पिक्सेल क्यों जोड़े। लेकिन मैं आपको निश्चित रूप से बता सकता हूं कि मैंने इसे एफएफ, आईई (7, 8, 9) और क्रोम पर परीक्षण किया और मैंने अभी ठीक काम किया है।

— पेट्रीक

मुझे लगता है कि 35 केवल स्क्रॉल-बार मोटाई है

— साडेघ

मुझे इसे काम करने के लिए थोड़ा मोड़ना पड़ा - जिसे सेटहाइट (iframe) कहा जाता है; सीधे (इसके चारों ओर $ (iframe) .load () रैपर हटा दिया।

— शाकर

मैजिक 35 पिक्सल जोड़े गए हैं जो आइफ्रेम पैडिंग को ध्यान में रखते हैं। मुझे लगता है कि iframe में iframeshould की सामग्री को शामिल नहीं करना चाहिए, इस बात का ध्यान रखना चाहिए।

— फ़िलिप मेलो

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;

}

एचटीएमएल

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

Answer 10

मैंने ऊपर गारनेफ के महान समाधान को थोड़ा संशोधित किया। ऐसा लगता था कि उसका समाधान घटना से ठीक पहले आकार पर आधारित iframe आकार को संशोधित करता है। मेरी स्थिति के लिए (एक iframe के माध्यम से ईमेल प्रस्तुत) मुझे प्रस्तुत करने के बाद सही बदलने के लिए iframe ऊंचाई की आवश्यकता थी। उदाहरण के लिए, सत्यापन त्रुटियां दिखाएं या सबमिट करने के बाद "धन्यवाद" संदेश।

मैंने केवल नेस्टेड क्लिक () फ़ंक्शन को समाप्त किया और इसे अपने 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

यदि आप IFRAME सामग्री और मूल विंडो दोनों को नियंत्रित कर सकते हैं तो आपको iFrame Resizer की आवश्यकता है ।

यह लाइब्रेरी समान और क्रॉस डोमेन iFrames की ऊंचाई और चौड़ाई दोनों के स्वचालित आकार को उनकी सम्‍मिलित सामग्री को फिट करने में सक्षम बनाती है। यह iFrames का उपयोग करने के साथ सबसे आम मुद्दों को संबोधित करने के लिए कई सुविधाएँ प्रदान करता है, इनमें शामिल हैं:

• सामग्री आकार के लिए iFrame का आकार और चौड़ाई।
• एकाधिक और नेस्टेड iFrames के साथ काम करता है।
• क्रॉस डोमेन iFrames के लिए डोमेन प्रमाणीकरण।
• जटिल सीएसएस लेआउट का समर्थन करने के लिए पृष्ठ आकार गणना विधियों की एक श्रृंखला प्रदान करता है।
• DOM के परिवर्तनों का पता लगाता है जो पृष्ठ को MutationObserver का उपयोग करके आकार देने का कारण बन सकता है।
• उन घटनाओं का पता लगाता है जो पृष्ठ को आकार बदलने का कारण बन सकते हैं (विंडो आकार, सीएसएस एनिमेशन और संक्रमण, ओरिएंटेशन चेंज और माउस ईवेंट)।
• पोस्टमेज के माध्यम से iFrame और होस्ट पेज के बीच सरलीकृत संदेश।
• IFrame में पेज लिंक में फिक्स और iFrame और पैरेंट पेज के बीच लिंक का समर्थन करता है।
• कस्टम आकार और स्क्रॉल करने के तरीके प्रदान करता है।
• IFrame में मूल स्थिति और व्यूपोर्ट आकार का विस्तार करता है।
• PDF और ODF दस्तावेज़ों का समर्थन करने के लिए ViewerJS के साथ काम करता है।
• IE8 के लिए डाउनबैक समर्थन।

Answer 12

सभी उपरोक्त तरीकों का उपयोग करके काम नहीं कर सकते हैं।

जावास्क्रिप्ट:

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, विंडोज 7 x64

Answer 13

मैंने कुछ प्रयोग करने के बाद एक और उपाय निकाला। मैंने मूल रूप से इस प्रश्न के लिए 'सर्वोत्तम उत्तर' के रूप में चिह्नित कोड की कोशिश की और यह काम नहीं किया। मेरा अनुमान है क्योंकि उस समय मेरे कार्यक्रम में मेरा आइफ्रेम गतिशील रूप से उत्पन्न हुआ था। यहाँ वह कोड है जिसका मैंने उपयोग किया (यह मेरे लिए काम किया):

लोड किया जा रहा है कि आइफ्रेम के अंदर जावास्क्रिप्ट:

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 या अधिक पिक्सेल जोड़ना आवश्यक है। चौड़ाई और भी अजनबी है, आप शरीर की चौड़ाई में 18px जोड़ने के लिए सुरक्षित हैं। यह भी सुनिश्चित करें कि आपके पास iframe निकाय के लिए css है (नीचे)।

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

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

यहाँ iframe के लिए html है:

<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>

मैंने क्रोम में परीक्षण किया है और फ़ायरफ़ॉक्स में थोड़ी सी (विंडोज़ एक्सपी में)। मेरे पास अभी और परीक्षण करने के लिए है, इसलिए कृपया मुझे बताएं कि यह आपके लिए कैसे काम करता है।

Comments

धन्यवाद, मैंने जो परीक्षण किया है, उससे मोबाइल ब्राउज़रों में अद्भुत काम करता है और यहीं पर मुझे iframes के आकार बदलने में समस्या हो रही है!

— मिरिकिया सैंडू

खुशी है कि आप इसे पसंद करते हैं :-) मैंने पाया है कि सबसे अधिक भाग के लिए आइफ्रेम कहीं अधिक कुशल है और अजाक्स की तुलना में बेहतर ब्राउज़र समर्थन प्रदान करता है।

— www139

धन्यवाद!!! मुख्य रूप से, क्योंकि आप केवल वही हैं जिन्होंने लोगों को यह मानकर बिना कोड डालने के लिए WHERE निर्दिष्ट किया था। इस सरल समाधान ने मेरे लिए (फ़ायरफ़ॉक्स, क्रोम, एज) पूरी तरह से काम किया, मेरी वर्डप्रेस साइट में उसी डोमेन पर गतिशील सामग्री को तैयार करने के लिए। मेरे पास एक प्रपत्र-चयन है जो विभिन्न लंबाई की गतिशील सामग्री का उत्पादन करेगा। IFrame खूबसूरती से समायोजित करता है। मुझे .clientHeight + 5 + 'px' को ट्विक करना पड़ा; और क्लाइंटवाइट + 18 + 'px'; अधिक पिक्सेल होना। और मुझे यकीन नहीं है कि प्रदर्शन क्यों: तालिका; सीएसएस में जरूरत थी इसलिए मैंने इसे अपने उद्देश्यों के लिए टिप्पणी की। एक बार फिर धन्यवाद।

— Heres2u

Answer 14

यह मैं इसे कैसे करूंगा (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>

Comments

अगर Microsoft उस बारे में परवाह नहीं करता है, तो किसे परवाह करनी चाहिए?

— m3nda

Answer 15

यहाँ कई तरीके हैं:

<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% चौड़ाई और ऊंचाई तक जाने के लिए बनाया जाता है, जो पेज के बाहर स्क्रॉल-बार को मजबूर करता है और जब से बॉडी doesn ' टी में स्क्रॉल-बार होते हैं जो पृष्ठ के सीमा से अधिक होने की उम्मीद नहीं कर सकता है। यह पूरी चौड़ाई के साथ iFrame के स्क्रॉलबार को छुपाता है!

स्रोत: सेट iframe ऑटो ऊंचाई

Comments

आपके द्वारा दिए गए उदाहरण iframe को पूर्ण सामग्री बनाने के लिए हैं, न कि सभी आंतरिक सामग्री को फिट करने के लिए iframe की ऊँचाई को स्वचालित करने के लिए। यह सवालों के जवाब नहीं देता है।

— निकोर्नोटो

Answer 16

किसी के यहाँ होने के मामले में: मुझे समाधान के साथ एक समस्या थी जब मैंने iframe से divs हटा दिया - iframe ने इसे छोटा नहीं किया।

एक Jquery प्लगइन है जो काम करता है:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

Answer 17

मुझे बेहतर काम करने के लिए यह पुनर्विक्रेता मिला:

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;

}

ध्यान दें कि स्टाइल ऑब्जेक्ट हटा दिया गया है।

Comments

Chrome / Win10 पर मेरे लिए काम नहीं करता है - सामग्री को नीचे से आंशिक रूप से काट दिया जाता है।

— ग्लेननरू

Answer 18

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 19

प्रसंग

मुझे वेब-एक्सटेंशन के संदर्भ में स्वयं ऐसा करना पड़ा। यह वेब-एक्सटेंशन प्रत्येक पृष्ठ में UI के कुछ टुकड़े को इंजेक्ट करता है, और यह UI अंदर रहता है iframe। अंदर की सामग्री iframeगतिशील है, इसलिए मुझे इसकी चौड़ाई और ऊंचाई को फिर से पढ़ना पड़ाiframe ।

मैं रिएक्ट का उपयोग करता हूं लेकिन यह अवधारणा हर लाइब्रेरी पर लागू होती है।

मेरा समाधान (यह मानता है कि आप पृष्ठ और iframe दोनों को नियंत्रित करते हैं)

अंदर iframeमैंने bodyवास्तव में बड़े आयामों के लिए शैलियों को बदल दिया । यह अंदर के तत्वों को सभी आवश्यक स्थान का उपयोग करके बिछाने की अनुमति देगा। बनाना widthऔर height100% मेरे लिए काम नहीं किया (मुझे लगता है क्योंकि iframe एक डिफ़ॉल्ट है width = 300pxऔर height = 150px)

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

फिर मैंने एक div के अंदर सभी iframe UI को इंजेक्ट किया और इसे कुछ स्टाइल दिया

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

इसके अंदर अपने ऐप को रेंडर करने के बाद #ui-root( रिएक्ट में मैं ऐसा करता हूं componentDidMount) मैं इस डिव के आयामों की गणना करता हूं और उन्हें मूल पृष्ठ पर 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)

Comments

अच्छा समाधान! धन्यवाद!

— लालचैप 13:13

Answer 20

"घोस्ट-लाइक" आईफ्रेम बनाना संभव है जो ऐसा काम करता है जैसे वह वहां नहीं था।

Http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/ देखें

मूल रूप से आप https://developer.mozilla.org/en-US/docs/DOM/window.postMessageparent.postMessage(..) में वर्णित ईवेंट सिस्टम का उपयोग करते हैं

यह सभी आधुनिक ब्राउज़रों का काम करता है!

Answer 21

मुझे पता है कि पोस्ट पुरानी है, लेकिन मेरा मानना ​​है कि यह अभी तक एक और तरीका है। मैंने सिर्फ अपने कोड पर अमल किया। पेज लोड और पेज आकार दोनों पर पूरी तरह से काम करता है:

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 22

हेडर में रखी जाने वाली जावास्क्रिप्ट:

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>

सीएसएस स्टाइलशीट

>

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

Answer 23

कोणीयज के निर्देशन गुण के लिए:

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 24

इस तरह से मैंने इसे लोड किया या जब चीजें बदलती हैं।

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

Answer 25

स्पष्ट रूप से बहुत सारे परिदृश्य हैं, हालांकि, मेरे पास दस्तावेज़ और iframe के लिए एक ही डोमेन था और मैं अपनी iframe सामग्री के अंत में इससे निपटने में सक्षम था:

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

यह पेरेंट कंटेनर को 'ढूंढता है' और फिर स्क्रॉल बार को हटाने के लिए 50 पिक्सल्स के फ्यूड फैक्टर पर जोड़ने वाली लंबाई निर्धारित करता है।

दस्तावेज़ की ऊँचाई को बदलने के लिए 'निरीक्षण' करने के लिए कुछ भी नहीं है, मुझे इसके उपयोग के मामले की आवश्यकता नहीं थी। अपने उत्तर में मैं माता-पिता / आईफ्रेम सामग्री में पके हुए आईडी का उपयोग किए बिना मूल कंटेनर को संदर्भित करने का एक साधन लाता हूं।

Answer 26

यदि आप एक निश्चित पहलू अनुपात के साथ रह सकते हैं और आप एक उत्तरदायी आइफ्रेम चाहते हैं , तो यह कोड आपके लिए उपयोगी होगा। यह सिर्फ CSS नियम है।

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Iframe कंटेनर के रूप में एक div होना चाहिए।

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

स्रोत कोड इस साइट पर आधारित है और बेन मार्शल की अच्छी व्याख्या है।

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

यदि सामग्री सिर्फ एक बहुत ही सरल HTML है, तो सबसे आसान तरीका है कि आइफ्रेम को जावास्क्रिप्ट के साथ हटा दिया जाए

HTML कोड:

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

जावास्क्रिप्ट कोड:

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

Comments

इससे मूल दस्तावेज़ की रूपरेखा बदल जाती है। यदि आप अंजीर के साथ एक और दस्तावेज रखना चाहते हैं, तो यह दस्तावेज़ को संक्षिप्त रूप में नहीं रखता है। विभिन्न उपयोग के मामले, लेकिन मैं बाह्यरेखा कारणों के कारण एक कोड स्निपेट को आइफ्रेम में स्थानांतरित करना चाहता था।

— हेनरी की कैट

Answer 29

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>

Comments

यह CSS नहीं है, यह JS है।

— 19