jquery লোড হয়ে গেলে iframe সামগ্রীর উচ্চতা পান

Question 1

আমার একটি হেল্প পৃষ্ঠা আছে, help.php যে আমি মেইন.এফপি-তে একটি আইফ্রেমের অভ্যন্তরে লোড করছি আমি কীভাবে এই পৃষ্ঠার ইফ্রেমে লোড হওয়ার পরে উচ্চতা পেতে পারি?

আমি এটি জিজ্ঞাসা করছি কারণ আমি iframe এর উচ্চতা 100% বা অটোতে স্টাইল করতে পারি না। এজন্য আমার মনে হয় আমার জাভাস্ক্রিপ্ট ব্যবহার করা দরকার .. আমি jQuery ব্যবহার করছি

সিএসএস:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

জেএস:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

এইচটিএমএল:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

Question 2

ঠিক আছে আমি অবশেষে একটি ভাল সমাধান পেয়েছি:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

কারণ কিছু ব্রাউজার (পুরানো সাফারি এবং অপেরা) সিএসএস রেন্ডারগুলির আগে অনলোড সম্পূর্ণ হয়ে গেছে আপনাকে একটি মাইক্রো টাইমআউট সেট করতে হবে এবং ফাঁকা আউট করতে হবে এবং iframe এর src পুনরায় সাইন ইন করতে হবে।

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

Question 3

কম জটিল উত্তরটি .contents()iframe এ পেতে ব্যবহার করা হয়। আকর্ষণীয়ভাবে, যদিও, এটি আমার মূল উত্তরে কোডটি আমি কীভাবে ব্যবহার করি তার থেকে আলাদা মান ফিরে আসে, শরীরে প্যাডিংয়ের কারণে, আমি বিশ্বাস করি।

$('iframe').contents().height() + 'is the height'

আমি ক্রস-ডোমেন যোগাযোগের জন্য এটি এটি করেছি, তাই আমি ভয় করি যে এটি অযথা জটিল। প্রথমত, আমি আইফ্রেমের নথির ভিতরে জিকুয়েরি রাখব; এটি আরও মেমরি গ্রাস করবে, তবে এতে লোডের সময় বাড়ানো উচিত নয় কারণ স্ক্রিপ্টটি কেবল একবার লোড করা দরকার।

আপনার ইফ্রেমের শরীরের উচ্চতা যত তাড়াতাড়ি সম্ভব (onDOMReady) পরিমাপ করতে আইফ্রেমের jQuery ব্যবহার করুন এবং তারপরে URL হ্যাশটিকে সেই উচ্চতায় সেট করুন। এবং মূল নথিতে onloadআইফ্রেমে ট্যাগে একটি ইভেন্ট যুক্ত করুন যা আইফ্রেমের অবস্থানটি দেখবে এবং আপনার প্রয়োজনীয় মানটি বের করবে। কারণ অন ডমআরডি ডকুমেন্টের লোড ইভেন্টের আগে সর্বদা উপস্থিত হবে, আপনি মোটামুটি নিশ্চিত হতে পারেন যে কোনও জাতি শর্তকে জটিল করার কারণে মানটি সঠিকভাবে যোগাযোগ করা হবে।

অন্য কথায়:

... হেল্প.এফপি তে:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

... এবং মূল দস্তাবেজে:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Question 4

আমি ক্রোম, ফায়ারফক্স এবং আই 11 এ কাজ করতে নিম্নলিখিতটি পেয়েছি:

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

যখন ইফ্রেমেস সামগ্রীটি লোড করা হয়ে যায় তখন ইভেন্টটি আগুনে জ্বলে ওঠে এবং এটি আইফ্রেমগুলির উচ্চতাটিকে তার সামগ্রীর সাথে সেট করে। এটি কেবলমাত্র আইফ্রেমের মতো একই ডোমেনের পৃষ্ঠাগুলির জন্য কাজ করবে।

Question 5

JQuery ছাড়াই এটি করার কোডটি আজকাল নগণ্য:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

ইভেন্টটি আনহুক করতে:

frame.removeEventListener('load', syncHeight)

Question 6

এটি করার জন্য আপনার আইফ্রেমের অভ্যন্তরে জ্যাকোয়ারি লাগবে না, তবে কোডটি এত সহজ হওয়ায় আমি এটি ব্যবহার করি ...

এটি আপনার আইফ্রেমের ভিতরে নথিতে রাখুন।

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

ছোট উইন্ডোজে স্ক্রোলবার নির্মূল করতে উপরের পাঁচটি যুক্ত করা হয়েছে, এটি আকারে কখনই নিখুঁত নয়।

এবং এটি আপনার পিতামাতার নথির ভিতরে।

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

Question 7

এটি আমার পক্ষে কাজ করে এমন সঠিক উত্তর

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });

Question 8

সাধারণ ওয়ান-লাইনারটি একটি ডিফল্ট ন্যূনতম উচ্চতা দিয়ে শুরু হয় এবং সামগ্রীর আকারে বৃদ্ধি পায়।

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

স্নিপেট প্রসারিত করুন

Question 9

গৃহীত উত্তরের $('iframe').loadএখন a.indexOf is not a functionত্রুটি ঘটবে । এতে আপডেট করা যেতে পারে:

$('iframe').on('load', function() {
  // ...
});

.loadJQuery 1.8 থেকে অবহেলিত অনুরূপ অন্য কয়েকজন : নতুন ফাউন্ডেশন প্রজেক্ট খোলার সময় "আনকাচড টাইপ এরিয়ার: a.indexOf কোনও ফাংশন নয়" ত্রুটি

Question 10

এটি একটি jQuery মুক্ত সমাধান যা আইফ্রেমের অভ্যন্তরে এসপিএর সাথে কাজ করতে পারে

document.getElementById('iframe-id').addEventListener('load', function () {
  let that = this;
  setTimeout(function () {
    that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
  }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});

Question 11

এটি আমার ES6 বন্ধুত্বপূর্ণ নো-জেকারি নেওয়া

document.querySelector('iframe').addEventListener('load', function() {
    const iframeBody = this.contentWindow.document.body;
    const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
    this.style.height = `${height}px`;
});