अंदर की सामग्री के आधार पर iframe की ऊंचाई को गतिशील बनाएं- JQUERY / जावास्क्रिप्ट

Question

मैं एक iframe में एक aspx वेब पेज लोड कर रहा हूं। Iframe की सामग्री iframe की ऊँचाई से अधिक ऊँचाई की हो सकती है। Iframe में स्क्रॉल बार नहीं होना चाहिए।

मेरे पास diviframe के अंदर एक रैपर टैग है जो मूल रूप से सभी सामग्री है। मैंने आकार बदलने के लिए कुछ jQuery लिखा:

$("#TB_window", window.parent.document).height($("body").height() + 50);

जहां TB_windowdiv है जिसमें Iframeनिहित है।

body - iframe में Aspx का बॉडी टैग।

यह स्क्रिप्ट iframe कंटेंट से जुड़ी है। मैं TB_windowमूल पृष्ठ से तत्व प्राप्त कर रहा हूं । जबकि यह क्रोम पर ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स में TB_window ढह जाता है। मैं वास्तव में उलझन में हूं / ऐसा क्यों होता है, इस पर हार गया।

Comments

वह .aspx iframe पृष्ठ समान डोमेन नाम से है?

— 15

क्या आप $ ("बॉडी") की जांच कर सकते हैं। ऊंचाई () में फ़ायरफ़ॉक्स में एक मूल्य है?

— माइकल एल वॉटसन

हां..इस iframe कंटेनर पेज के समान डोमेन में है

— karry

@MichaelLWatson ऐसा लगता है कि फायरबग वॉच विंडो का मान शरीर की ऊंचाई के लिए 0 के

— बराबर है

कोणीय iFrame ऑटो-ऊँचाई उदाहरण: gitlab.com/reduardo7/angular-iframe-auto-height

— Eduardo Cuomo

Answer 1

आप IFRAMEका उपयोग करके सामग्री को प्राप्त कर सकते हैं: contentWindow.document.body.scrollHeight

IFRAMEलोड होने के बाद , आप निम्न कार्य करके ऊंचाई बदल सकते हैं:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

फिर, IFRAMEटैग पर, आप हैंडलर को इस तरह हुक करते हैं:

<iframe id="idIframe" onload="iframeLoaded()" ...

मेरे पास कुछ समय पहले एक स्थिति थी जहां मुझे इसके अलावा फॉर्म-सबमिशन के बाद खुद iframeLoadedसे कॉल करने की आवश्यकता थी IFRAME। आप यह कर सकते हैं कि निम्नलिखित IFRAMEसामग्री स्क्रिप्ट के भीतर कर के :

parent.iframeLoaded();

Comments

यह क्रॉस डोमेन पर समर्थन नहीं करता है।

— सौम्या

@Soumya क्रॉस डोमेन का इस कोड से कोई लेना-देना नहीं है। एक सुरक्षा समस्या है जिसे आप एक कमांड के साथ बायपास करते हैं।

— अरस्तू

@ सौम्या X-FRAME-OPTIONSएक पंक्ति को जोड़ने के लिए देखें : Response.AddHeader("X-FRAME-OPTIONS", "SAMEORIGIN");याresponse.addHeader("X-FRAME-OPTIONS", "Allow-From https://some.othersite.com");

— अरस्तू

यह क्रॉस डोमेन iframe साइज़िंग इशू github.com/davidjbradshaw/iframe-resizer

— डेविड ब्रैडशॉ

@deebs तुम भी बदल रहा है की कोशिश कर सकते iFrameID.height = "";करने के लिए iFrameID.height = "20px";। डिफ़ॉल्ट ब्राउज़र iframe ऊंचाई 150px है जो कि ""इसे वापस सेट करता है।

— दर्शन

Answer 2

अरस्तू के लिए थोड़ा बेहतर जवाब ...

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }
</script>  

फिर अपने iframe में इस प्रकार घोषित करें:

<iframe onload="resizeIframe(this)" ...

दो मामूली सुधार हैं:

1. आपको दस्तावेज़ के माध्यम से तत्व प्राप्त करने की आवश्यकता नहीं है ।getElementById - जैसा कि आपके पास पहले से ही ऑनलोड कॉलबैक में है।
2. iframe.height = ""यदि आप इसे अगले बयान में फिर से असाइन करने जा रहे हैं तो सेट करने की कोई आवश्यकता नहीं है । ऐसा करना वास्तव में ओवरहेड को उकसाता है जैसा कि आप एक DOM तत्व के साथ काम कर रहे हैं।

संपादित करें: यदि फ़्रेम में सामग्री हमेशा बदलती रहती है, तो कॉल करें:

parent.resizeIframe(this.frameElement); 

अद्यतन के बाद iframe के भीतर से। एक ही मूल के लिए काम करता है।

या ऑटो का पता लगाने के लिए:

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);

Comments

यदि फ्रेम में सामग्री हमेशा बदलती रहती है तो आप क्या करेंगे?

— केविन

यदि सामग्री का आकार बदलता रहता है और / या यदि आपका iframe डोमेन के अलावा अन्य डोमेन पर बैठने के लिए डिज़ाइन किया गया है, तो iframe पृष्ठ को खींचता है, तो आपको कुछ अलग करने की आवश्यकता होगी।

— ब्लूफिश

इसके लिए ... समाधान पोस्टमासेज और रिसीवमैसेज का उपयोग करना है। मैंने इसे github.com/jeffomatic/nojquery-postmessage

— BlueFish

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

— ब्लूफिश

मेरे लिए यह हमेशा कुछ पिक्सेल कम था, इसलिए मैं इसके साथ आया:function resizeIframe(iframe) { var size=iframe.contentWindow.document.body.scrollHeight; var size_new=size+20; iframe.height = size_new + "px"; }

— मार्टिन मुल

Answer 3

मैंने पाया कि एक्स-फ्रेम-विकल्प के बाद से स्वीकृत उत्तर पर्याप्त नहीं था: अनुमति-से- सफारी या क्रोम में समर्थित नहीं है । इसके बजाय एक अलग दृष्टिकोण के साथ गया, डिस्कस से बेन सिरगर द्वारा दी गई एक प्रस्तुति में पाया गया । विचार इवेंट श्रोता को मूल विंडो में जोड़ना है, और उसके बाद iframe के अंदर, window.postMessage का उपयोग करके माता-पिता को कुछ भेजने के लिए एक घटना भेजने के लिए कहें (iframe का आकार बदलें)।

तो मूल दस्तावेज में, एक घटना श्रोता जोड़ें:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

और iframe के अंदर, संदेश पोस्ट करने के लिए एक फ़ंक्शन लिखें:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

अंत में, iframe के अंदर, resize फंक्शन को फायर करने के लिए बॉडी टैग में एक onLoad जोड़ें:

<body onLoad="resize();">

Comments

इसके लिए मुझे काम करने के लिए मुझे "window.parent" को सिर्फ "पैरेंट" में बदलना पड़ा।

— प्रागैमर

महान! लेकिन यह केवल एक बार ऊंचाई लोड करता है। यदि आप iframe को वास्तव में उत्तरदायी बनाना चाहते हैं, तो मैं इस तरह से हर बार आकार बदलने की विधि को कॉल करना पसंद करता हूं:setInterval(resize, 1000);

— जूल्स कोल

Answer 4

इसे iframe में जोड़ें, इसने मेरे लिए काम किया:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

और अगर आप jQuery का उपयोग करते हैं तो इस कोड को आज़माएं:

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"

Answer 5

चार अलग-अलग गुण हैं जिन्हें आप iFrame में सामग्री की ऊंचाई प्राप्त करने के लिए देख सकते हैं।

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

अफसोस की बात है कि वे सभी अलग-अलग उत्तर दे सकते हैं और ये ब्राउज़रों के बीच असंगत हैं। यदि आप बॉडी मार्जिन को 0 पर सेट करते हैं तो document.body.offsetHeightसबसे अच्छा जवाब देता है। सही मान प्राप्त करने के लिए इस फ़ंक्शन का प्रयास करें; जो कि iframe-resizer लाइब्रेरी से लिया गया है, जो सामग्री बदलने या ब्राउज़र के आकार बदलने पर iFrame को सही आकार में रखने के बाद भी दिखता है।

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

Comments

यह उन आइटम्स के साथ काम नहीं करता है जो "रोल अप" जैसे डेटाटैबल्स या फ्लोटिंग डिव। ऊंचाई पर आधारित है जो भी सामान्य अनियंत्रित ऊंचाई होगी और अंतिम ऊंचाई नहीं होगी।

— djack109

@ djack109 आपके सीएसएस में सबसे अधिक संभावना है कि आपके पृष्ठ पर सिकुड़ने वाला एक तत्व बंद हो जाता है

— डेविड ब्रैडशॉ

Answer 6

अन्य उत्तर मेरे लिए काम नहीं कर रहे थे इसलिए मैंने कुछ बदलाव किए। आशा है कि यह मदद करेगा

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});

Answer 7

जावास्क्रिप्ट / jquery का उपयोग करने के बजाय मैंने पाया सबसे आसान तरीका है:

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>

यहां 1vh = 1% ब्राउज़र विंडो ऊंचाई है। तो सेट होने के लिए ऊंचाई का सैद्धांतिक मूल्य 100vh है, लेकिन व्यावहारिक रूप से 98vh ने जादू किया।

Comments

यह iframe की सामग्री की ऊँचाई को ध्यान में नहीं रख रहा है।

— एड्रियन पाउल

जब आपके पास क्रॉस डोमेन ड्रामा के आसपास काम करने का सरल तरीका नहीं है तो यह काफी करीब हो जाता है ...

— dsghi

Answer 8

बस इस मामले में यह किसी को भी मदद करता है। मैं अपने बालों को बाहर खींच रहा था ताकि यह काम करने की कोशिश कर सके, फिर मैंने देखा कि इफ्रेम में ऊंचाई के साथ कक्षा में प्रवेश था: 100%। जब मैंने इसे हटा दिया, तो सब कुछ उम्मीद के मुताबिक काम किया। तो, किसी भी सीएसएस संघर्ष के लिए जाँच करें।

Answer 9

आप अपने resizeIframe (उदाहरण @ BlueFish के उत्तर से) में एक दोहराए जाने वाले अनुरोध को जोड़ सकते हैं (जो कि @ ब्लूफिश के उत्तर से) हमेशा ब्राउज़र को लेआउट को पेंट करने से पहले बुलाया जाएगा और जब आपकी सामग्री ने अपनी ऊंचाइयों को बदला है तो आप iframe की ऊंचाई को अपडेट कर सकते हैं। जैसे इनपुट फॉर्म, आलसी लोड सामग्री आदि।

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

आपके कॉलबैक में इतना तेज होना चाहिए कि आपके समग्र प्रदर्शन पर कोई बड़ा प्रभाव न पड़े

Comments

यह एक बहुत ही चालाक समाधान है, जो प्रारंभिक परीक्षण से, बहुत अच्छी तरह से काम करता है। मुझे इसके उपयोग के प्रदर्शन निहितार्थ में दिलचस्पी होगी।

— KFE

बस एक मामले में भाग Uncaught TypeError: Cannot read property 'scrollHeight' of nullके बाद से bodyहै null, लेकिन यह आम तौर पर काम करता है।

— caot

Answer 10

आप यहाँ संबंधित प्रश्न का उल्लेख कर सकते हैं - iframe की चौड़ाई और ऊँचाई को उसके मूल div के समान कैसे बनायें?

गतिशील ऊंचाई निर्धारित करने के लिए -

1. हमें क्रॉस डोमेन iFrames और माता-पिता के साथ संवाद करने की आवश्यकता है
2. फिर हम पेरेंट विंडो को स्क्रॉल ऊंचाई / सामग्री ऊंचाई iframe भेज सकते हैं

और कोड - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

Answer 11

मैं jQuery और मेरे लिए काम करने वाले नीचे दिए गए कोड का उपयोग कर रहा हूं,

var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );

Answer 12

मैंने पाया कि ट्रॉय के जवाब से काम नहीं चला। यह वही कोड है जिसे अजाक्स के लिए फिर से काम किया गया है:

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});

Answer 13

खिड़की के उस टुकड़े को जोड़ने के लिए, जो नीचे से कटा हुआ लगता है, खासकर जब आपके पास स्क्रॉल नहीं होता है तो मैंने उपयोग किया है:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }

Answer 14

यह तब उपयोगी होता है जब आपको बिना जुकाम वाले घोल की आवश्यकता होती है। उस स्थिति में आपको एक कंटेनर जोड़ने की कोशिश करनी चाहिए और इसे प्रतिशत में सेट करना चाहिए

HTML उदाहरण कोड:

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

सीएसएस उदाहरण कोड:

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}

Answer 15

सरल समाधान सामग्री क्षेत्र की चौड़ाई और ऊंचाई को मापना है, और फिर नीचे पैडिंग प्रतिशत की गणना करने के लिए उन मापों का उपयोग करें।

इस मामले में, माप 1680 x 720 px हैं, इसलिए तल पर पैडिंग 720/1680 = 0.43 * 100 है, जो 43% तक आता है।

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

Answer 16

BlueFish के लिए थोड़ा बेहतर जवाब ...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

यह विंडोज़ स्क्रीन (ब्राउज़र, फोन) की ऊंचाई को ध्यान में रखता है जो उत्तरदायी डिजाइन के लिए अच्छा है और बड़ी ऊंचाई वाले iframes। पेडिंग उस मामले में इफ्रेम के ऊपर और नीचे इच्छित पैडिंग का प्रतिनिधित्व करता है, जब यह पूरी स्क्रीन पर चला जाता है।

Answer 17

jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

Answer 18

PHP htmlspecialchars () + का उपयोग कर नमूना जाँच करें कि क्या ऊंचाई मौजूद है और> 0:

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';

Answer 19

बस iframe कंटेनर की स्थिति बनाएं: निरपेक्ष और iframe स्वचालित रूप से अपनी सामग्री के अनुसार अपनी ऊंचाई बदल देगा

<style>
   .iframe-container {
       display: block;
       position: absolute;
       /*change position as you need*/
       bottom: 0;
       left: 0;
       right: 0;
       top: 0;
   }
   iframe {
       margin: 0;
       padding: 0;
       border: 0;
       width: 100%;
       background-color: #fff;
   }
 </style>
 <div class="iframe-container">
     <iframe src="http://iframesourcepage"></iframe>
 </div>

Answer 20

$(document).height() // - $('body').offset().top

और / या

$(window).height()

स्टैक ओवरफ्लो प्रश्न देखें शरीर के तत्व की ऊंचाई कैसे प्राप्त करें ।

JQuery में शरीर की ऊँचाई ज्ञात करने के लिए इसे आज़माएँ:

if $("body").height()

अगर Firebug का मूल्य नहीं है । शायद यही समस्या है।

Comments

मैंने दोनों करने की कोशिश की ... यह अभी भी फ़ायरफ़ॉक्स पर होता है। फ़ायरफ़ॉक्स किसी भी तरह iframe पर window.height () नहीं मिलता है। जैसा कि मैंने उल्लेख किया है, स्क्रिप्ट इफ्रेम सामग्री से जुड़ी हुई है और मैं इसे डॉक्यूमेंट में कह रहा हूं। पहले से ही () फंक्शन

— कार्री