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




html adjustment (17)

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

प्रतिशत पर ध्यान दें, मैंने इसे डाला ताकि आप आम तौर पर आईफ्रेम, टेक्स्ट, विज्ञापन इत्यादि के लिए स्केलिंग का सामना कर सकें, यदि कोई स्केलिंग कार्यान्वित नहीं किया जाता है तो बस 0 डाल दें

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


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>


इस तरह मैं यह करूँगा (एफएफ / क्रोम में परीक्षण):

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

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

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


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

क्रॉस-बॉसर, क्रॉस डोमेन library जो iFrame को सामग्री और पोस्ट postMessage आकार में रखने के लिए mutationObserver का उपयोग करता mutationObserver postMessage और होस्ट पेज के बीच संवाद करने के लिए संदेश। JQuery के साथ या बिना काम करता है।


मुझे पता है कि पोस्ट पुराना है, लेकिन मुझे विश्वास है कि यह करने का यह एक और तरीका है। मैंने अभी अपने कोड पर लागू किया है। पेज लोड और पृष्ठ आकार पर पूरी तरह से काम करता है:

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

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

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

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

मैंने अभी नेस्टेड क्लिक () फ़ंक्शन को हटा दिया है और इसे अपने आईफ्रेम एचटीएमएल में रखा है:

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

मेरे लिए काम किया, लेकिन क्रॉस ब्राउज़र कार्यक्षमता के बारे में निश्चित नहीं है।


मैंने यह रेजिज़र बेहतर काम करने के लिए पाया:

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;

}

नोट करें कि ऑब्जेक्ट ऑब्जेक्ट हटा दिया गया है।


यदि आप 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;
}

यदि सामग्री सिर्फ एक बहुत ही सरल 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;
}

यह केवल इनलाइन सीएसएस का उपयोग करता है:

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

यहां कई विधियां हैं:

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

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


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

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

समाधान खोज (एक सहयोगी से सहायता के माध्यम से) से आया था कि jQuery को बताया जा सकता है कि डोम का उपयोग करने के लिए क्या किया जाता है। इस मामले में, पैरेंट विंडो के डीओएम।

इस प्रकार, इस तरह के कोड की आपको आवश्यकता होती है (जब 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>

सरलता:

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

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




adjustment