জাফওয়ারি / জাভাস্ক্রিপ্ট-এর ভিতরে থাকা সামগ্রীর উপর ভিত্তি করে iframe উচ্চতা গতিশীল করুন

Question

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

আমার divআইফ্রেমের অভ্যন্তরে একটি মোড়কের ট্যাগ রয়েছে যা মূলত সমস্ত সামগ্রী। পুনরায় আকারটি ঘটানোর জন্য আমি কিছু jQuery লিখেছি:

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

যেখানে TB_windowডিভ আছে যেখানে এটি Iframeরয়েছে।

body - iframe এ এসপেক্সের বডি ট্যাগ।

এই স্ক্রিপ্টটি iframe সামগ্রীর সাথে সংযুক্ত রয়েছে। আমি TB_windowপ্যারেন্ট পৃষ্ঠা থেকে উপাদানটি পাচ্ছি । এটি ক্রোমে দুর্দান্ত কাজ করার পরে, তবে ফায়ারফক্সে টিবি_উইন্ডো ধসে পড়ে। কেন ঘটে যায় তা নিয়ে আমি সত্যিই বিভ্রান্ত / হারিয়ে গেছি।

Comments

যে .aspx iframe পেজ একই ডোমেইন নাম থেকে?

— অ্যালেক্সস

আপনি কি check ("বডি") চেক করতে পারেন? উচ্চতা () এর ফায়ার ফক্সে একটি মান আছে?

— মাইকেল এল ওয়াটসন

yes..the আইফ্রেম ধারক পৃষ্ঠার অনুরূপ ডোমেনে আছে

— karry

@ মিশেলএল ওয়াটসন দেখে মনে হচ্ছে শরীরের উচ্চতার জন্য ফায়ারব্যাগ ওয়াচ উইন্ডোটির মান 0 হিসাবে আছে ... ক্রোমের একটি মূল্য রয়েছে যদিও

— কারি

কৌণিক আইফ্রেম অটো-উচ্চতা উদাহরণ: gitlab.com/reduardo7/angular-iframe-auto-height

— এডুয়ার্ডো কুওমো

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

এটি ক্রস ডোমেনে সমর্থন করে না।

— সৌম্য

@ সৌম্য এই কোডটির সাথে ক্রস ডোমেনের কোনও সম্পর্ক নেই। একটি কমান্ড দিয়ে বাইপাস করে এমন একটি সুরক্ষা সমস্যা রয়েছে।

— এরিস্টস

@ সৌম্য এখানে X-FRAME-OPTIONSএকটি লাইন যুক্ত করার জন্য সন্ধান করুন: Response.AddHeader("X-FRAME-OPTIONS", "SAMEORIGIN");বাresponse.addHeader("X-FRAME-OPTIONS", "Allow-From https://some.othersite.com");

— অ্যারিস্টোস

এটি ক্রস ডোমেনটি ইফ্রেমে

— ডেভিড ব্র্যাডশ

@ ডেবিস আপনি এতে পরিবর্তন 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 onload="resizeIframe(this)" ...

দুটি ছোট ছোট উন্নতি আছে:

1. ডকুমেন্ট.জেটমেন্টমেন্টবাইআইডির মাধ্যমে আপনার উপাদানটি পাওয়ার দরকার নেই - যেমন আপনার ইতিমধ্যে এটি অনলোড কলব্যাকে রয়েছে।
2. iframe.height = ""যদি আপনি এটি পরের বিবৃতিতে পুনরায় নিয়োগ করতে যাচ্ছেন তবে সেট করার দরকার নেই । আপনি কোনও ডিওএম উপাদানটির সাথে কাজ করছেন বলে এটি করা আসলে একটি ওভারহেড অনুপ্রবেশ করে।

সম্পাদনা করুন: যদি ফ্রেমের সামগ্রী সর্বদা পরিবর্তিত হয় তবে কল করুন:

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

ফ্রেমের সামগ্রীগুলি সর্বদা পরিবর্তিত হলে আপনি কী করবেন?

— কেভিন

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

— ব্লু ফিশ

এর জন্য ... সমাধানটি পোস্টমেসেজ এবং রিসিভমেসেজ ব্যবহার করা। আমি এটি github.com/jeffomat/nojquery-postmessage

— ব্লু ফিশ

ধারণাটিটি হ'ল নতুন উচ্চতা গণনা করা এবং পিতামাতার ফ্রেমে একটি বার্তা প্রেরণ করা যা বার্তাটি গ্রহণ করতে হবে এবং সেই অনুযায়ী আইফ্রেমের উচ্চতা সামঞ্জস্য করতে হবে।

— ব্লু ফিশ

এটি আমার জন্য সর্বদা কিছু পিক্সেল সংক্ষিপ্ত ছিল, তাই আমি এটি নিয়ে এসেছি: function resizeIframe(iframe) { var size=iframe.contentWindow.document.body.scrollHeight; var size_new=size+20; iframe.height = size_new + "px"; }

— মার্টিন মেহল

Answer 3

আমি দেখতে পেয়েছি যে এক্স-ফ্রেম-বিকল্পগুলি: গ্রহণযোগ্য উত্তরটি যথেষ্ট নয়, সাফারি বা ক্রোমে অনুমতি দিন-থেকে সমর্থিত নয় । পরিবর্তে একটি ভিন্ন পদ্ধতির সাথে গিয়েছিলেন, এটি ডিস্কাসের বেন ভিনেগার প্রদত্ত একটি উপস্থাপনায় পেয়েছিলেন। অভিভাবক উইন্ডোতে ইভেন্ট শ্রোতা যুক্ত করার ধারণাটি রয়েছে, এবং তারপরে 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 এর ভিতরে, পুনরায় আকার ফাংশনটি ফায়ার করতে বডি ট্যাগটিতে একটি ਆਨলড যুক্ত করুন:

<body onLoad="resize();">

Comments

আমার পক্ষে এটি কাজ করার জন্য আমাকে "উইন্ডো.প্যারেন্ট" পরিবর্তন করে কেবল "পিতামাতা" করতে হয়েছিল।

— প্রগ্রেহামার

গ্রেট! তবে এটি একবারে কেবল উচ্চতা লোড করে। আপনি যদি ইফ্রেমকে সত্যই প্রতিক্রিয়াশীল করতে চান তবে আমি প্রতি সেকেন্ডে পুনরায় আকারের পদ্ধতিটি কল করতে পছন্দ করি: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

একটি আইফ্রেমে সামগ্রীর উচ্চতা পেতে আপনি দেখতে পারেন এমন চারটি আলাদা বৈশিষ্ট্য রয়েছে।

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

দুঃখের বিষয় তারা সবাই আলাদা আলাদা উত্তর দিতে পারে এবং এগুলি ব্রাউজারগুলির মধ্যে অস্বাভাবিক istant যদি আপনি বডি মার্জিন 0 তে সেট করেন document.body.offsetHeightতবে সেরা উত্তর দেয়। সঠিক মান পেতে এই ফাংশনটি ব্যবহার করে দেখুন; যা আইফ্রেমে-রাইজার লাইব্রেরি থেকে নেওয়া হয়েছে যা আইফ্রেমকে সঠিক আকার রাখার পরেও দেখাবে যখন সামগ্রী পরিবর্তন হয় বা ব্রাউজারটি পুনরায় আকার দেওয়া হয়।

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

এটি আইফ্রেমের সামগ্রীর উচ্চতা আমলে নিচ্ছে না।

— অ্যাড্রিয়ান পাওলি

ক্রস ডোমেন নাটকের চারপাশে কাজ করার সহজ উপায় না থাকলে এটি পর্যাপ্ত হয়ে যায় ...

— dsghi

Answer 8

এই ক্ষেত্রে যে কেউ সাহায্য করে। আমি এই কাজটি করার চেষ্টা করার জন্য আমার চুলগুলি টানছিলাম then যখন আমি এটি সরিয়ে ফেললাম, সবকিছু প্রত্যাশা অনুযায়ী কাজ করেছিল। সুতরাং, দয়া করে কোনও CSS বিরোধের জন্য পরীক্ষা করুন।

Answer 9

আপনি নিজের পুনরায় আকার আইফ্রেমে একটি পুনরাবৃত্তি অনুরোধএনিমেশনফ্রেম যোগ করতে পারেন (যেমন @ ব্লু ফিশ এর উত্তর থেকে) যা ব্রাউজারটি লেআউটটি আঁকার আগে সর্বদা ডাকা হত এবং আপনি যদি আইফ্রেমের লিখিত উচ্চতা পরিবর্তন করে থাকেন তবে আপনি আইফ্রেমের উচ্চতা আপডেট করতে পারবেন। যেমন ইনপুট ফর্ম, অলস বোঝা সামগ্রী ইত্যাদি content

<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

এটি একটি খুব চতুর সমাধান যা প্রাথমিক পরীক্ষা থেকে খুব ভাল কাজ করে। আমি এটি ব্যবহারের পারফরম্যান্সের প্রভাবগুলিতে আগ্রহী।

— কেএফই

শুধু একটি ক্ষেত্রে গাড়ীতে আঘাত Uncaught TypeError: Cannot read property 'scrollHeight' of nullথেকে bodyহয় nullতবে এটি সাধারণত কাজ করে।

— কট

Answer 10

আপনি এখানে সম্পর্কিত প্রশ্নটি উল্লেখ করতে পারেন - আইফ্র্যামের প্রস্থ এবং উচ্চতাটিকে এর পিতামহিক ডিভের মতো করতে কীভাবে?

গতিশীল উচ্চতা সেট করতে -

1. ক্রস ডোমেন আইফ্রেমস এবং পিতামাতার সাথে আমাদের যোগাযোগ করতে হবে
2. তারপরে আমরা প্যারেন্ট উইন্ডোতে স্ক্রোলের উচ্চতা / আইফ্রেমের সামগ্রীর উচ্চতা প্রেরণ করতে পারি

এবং কোডগুলি - 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

আপনার যখন কোনও jquery ছাড়াই কোনও সমাধান প্রয়োজন তখন এইটি কার্যকর। সেক্ষেত্রে আপনার একটি ধারক যুক্ত করার চেষ্টা করা উচিত এবং শতাংশে একটি প্যাডিং সেট করা উচিত

এইচটিএমএল উদাহরণ কোড:

<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 পিক্সেল, তাই নীচে প্যাডিং 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

ব্লু ফিশের সামান্য উন্নত উত্তর ...

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

এটি উইন্ডোজ স্ক্রিনের উচ্চতা বিবেচনা করে (ব্রাউজার, ফোন) যা প্রতিক্রিয়াশীল ডিজাইনের জন্য ভাল এবং আইফ্রেমগুলির বিশাল উচ্চতা রয়েছে। প্যাডিং আপনার যে প্যাডিংটি চান তা উপস্থাপন করে যদি উপরে এবং নীচে iframe নীচে এটি খালি পুরো স্ক্রিনে যায়।

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

নমুনা পিএইচপি এইচটিএমএল স্পেশালচার্স () ব্যবহার করুন + উচ্চতা বিদ্যমান কিনা এবং> 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 এর সামগ্রী অনুসারে স্বয়ংক্রিয়ভাবে এর উচ্চতা পরিবর্তন করবে

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

ফায়ারব্যাগ থাকলে এর কোনও মূল্য নেই । সম্ভবত এটাই সমস্যা।

Comments

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

— ready প্রস্তুতি