কোনও ক্রস-ডোমেন যদি ইফ্রেমে উচ্চতার অটো-রিসাইজার কাজ করে?

Question

আমি কয়েকটি সমাধান চেষ্টা করেছিলাম তবে সফল হইনি। আমি ভাবছি খুব সহজেই অনুসরণ করার সহজ টিউটোরিয়াল দিয়ে কোনও সমাধান যদি এর বাইরে পাওয়া যায়।

Comments

আপনি কী কী সমাধানগুলি চেষ্টা করেছিলেন যা ব্যর্থ হয়েছিল?

— ইজমির রামিরেজ

আমি এটি চেষ্টা করেছিলাম তবে ওয়েবকিট ব্রাউজারগুলিতে এটি নিখরচায় প্রকাশিত হয়েছে: নিবন্ধে বর্ণিত হয়েছে: css-tricks.com/cross-domain-iframe-resizing অন্য একটি ছিল কিন্তু আমি url মনে করতে পারি না।

— J82

css-tricks.com/cross-domain-iframe-resizing

— T.Todua

এটা কি তোমার প্রশ্নের উত্তর? এতে কন্টেন্ট সঙ্গে মাপসই প্রস্থ এবং আইফ্রেম উচ্চতা সামঞ্জস্য

— সংক্ষিপ্তকরণ

Answer 1

আপনার কাছে তিনটি বিকল্প রয়েছে:

1. আইফ্রেম-রাইজার ব্যবহার করুন

আইফ্রেমগুলি তাদের সামগ্রীতে আকার রাখতে এটি একটি সাধারণ লাইব্রেরি। এটি পোস্টমেসেজ এবং মিউটেশনঅবার্সার এপিআই ব্যবহার করে, আইই 8-10-র জন্য পিছনে পড়া। এতে আইটেম পৃষ্ঠার জন্য আইফ্রেমযুক্ত একটি নির্দিষ্ট আকারের অনুরোধ করার অপশন রয়েছে এবং এটি যখন করা হয়ে গেলে আইফ্রেমটি বন্ধ করতে পারে।

https://github.com/davidjbradshaw/iframe-resizer

2. সহজ এক্সডিএম (পোস্টমেসেজ + ফ্ল্যাশ কম্বো) ব্যবহার করুন

ইজি এক্সডিএম বিভিন্ন ব্রাউজারে বিভিন্ন উইন্ডোর মধ্যে ক্রস-ডোমেন যোগাযোগ সক্ষম করার জন্য কৌশলগুলির সংকলন ব্যবহার করে এবং ইফ্রেমে পুনরায় আকার দেওয়ার জন্য এটি ব্যবহারের উদাহরণ রয়েছে:

http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/

http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/

সহজ এক্সডিএম আধুনিক ব্রাউজারগুলিতে পোস্টমেসেজ এবং পুরানো ব্রাউজারগুলির ফ্যালব্যাক হিসাবে একটি ফ্ল্যাশ ভিত্তিক সমাধান ব্যবহার করে কাজ করে ।

স্ট্যাকওভারফ্লোতেও এই থ্রেডটি দেখুন (অন্যরাও আছেন, এটি একটি সাধারণভাবে জিজ্ঞাসিত প্রশ্ন)। এছাড়াও, ফেসবুক একই ধরণের পদ্ধতির ব্যবহার বলে মনে হবে ।

৩. সার্ভারের মাধ্যমে যোগাযোগ করুন

অন্য বিকল্পটি হ'ল আপনার সার্ভারে iframe উচ্চতা প্রেরণ করা এবং তারপরে JSONP (বা সম্ভব হলে একটি দীর্ঘ পোল ব্যবহার করুন) এর মাধ্যমে প্যারেন্ট ওয়েব পৃষ্ঠা থেকে সেই সার্ভারটি থেকে পোল করুন।

Comments

পোস্টমেসেজের জন্য, আপনি যদি ইতিমধ্যে jQuery ব্যবহার করেন তবে আপনি বেন আলমানের দুর্দান্ত পোস্ট ম্যাসেজ

— প্রকল্পগুলি

আইফ্রেম-রাইজাইজারটির সার্ভারে অ্যাক্সেস দরকার যা ইফ্রেমে সামগ্রীটি হোস্ট করে। সুতরাং আপনি এটিকে কেবল আপনার নিয়ন্ত্রণাধীন ডোমেনগুলির জন্যই ব্যবহার করতে পারেন।

— হোকাসাচ

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

— স্টকবি

কোনটি এই "বিকল্প" এর এই সমস্যার জন্য প্রকৃত সমাধান হয়। প্রশ্নকারীর নিয়ন্ত্রণ নেই এমন ওয়েবসাইটগুলি থেকে ক্রস ডোমেন আইফ্রেমগুলির আইফ্রেম উচ্চতা সেট করতে চায়। 1. সার্ভার অ্যাক্সেস প্রয়োজন। ২. আমি গরিব বিবেচনা করে এমন সফ্টওয়্যার দরকার। ইজি এক্সডিএম 10 বছর আগে তৈরি হয়েছিল। 2019 এর সর্বশেষতম সংস্করণে ফ্ল্যাশ প্রয়োজন । ফ্ল্যাশ হ'ল, ধন্যবাদ, মরে গেছে এবং কারও উপর নির্ভর করা উচিত নয়। 3. সার্ভার অ্যাক্সেস প্রয়োজন।

— redanimalwar

Answer 2

আমি এর সামগ্রীর উপর ভিত্তি করে গতিশীলভাবে iframe এর উচ্চতা নির্ধারণ করার জন্য সমাধান পেয়েছি। এটি ক্রস ডোমেন সামগ্রীর জন্য কাজ করে। এটি অর্জনে কিছু পদক্ষেপ অনুসরণ করতে হবে।

1. মনে করুন আপনি "abc.com/page" ওয়েব পৃষ্ঠায় iframe যুক্ত করেছেন

   <div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>

2. এরপরে আপনাকে উইন্ডোজ "বার্তা" ইভেন্টটিকে ওয়েব পৃষ্ঠার "abc.com/page" এর অধীনে আবদ্ধ করতে হবে

window.addEventListener('message', function (event) {
//Here We have to check content of the message event  for safety purpose
//event data contains message sent from page added in iframe as shown in step 3
if (event.data.hasOwnProperty("FrameHeight")) {
        //Set height of the Iframe
        $("#IframeId").css("height", event.data.FrameHeight);        
    }
});

Iframe লোড এ আপনাকে "ফ্রেমহাইট" বার্তা সহ iframe উইন্ডো সামগ্রীটিতে বার্তা পাঠাতে হবে:

function setIframeHeight(ifrm) {
   var height = ifrm.contentWindow.postMessage("FrameHeight", "*");   
}

3. মূল পৃষ্ঠায় যা এখানে "xyz.pqr / পরিচিতি পাতা" এর অধীনে যুক্ত হয়েছে আপনাকে উইন্ডোজ "বার্তা" ইভেন্টটি আবদ্ধ করতে হবে যেখানে সমস্ত বার্তাগুলি "abc.com/page" এর প্যারেন্ট উইন্ডো থেকে প্রাপ্ত হবে

window.addEventListener('message', function (event) {

    // Need to check for safety as we are going to process only our messages
    // So Check whether event with data(which contains any object) contains our message here its "FrameHeight"
   if (event.data == "FrameHeight") {

        //event.source contains parent page window object 
        //which we are going to use to send message back to main page here "abc.com/page"

        //parentSourceWindow = event.source;

        //Calculate the maximum height of the page
        var body = document.body, html = document.documentElement;
        var height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);

       // Send height back to parent page "abc.com/page"
        event.source.postMessage({ "FrameHeight": height }, "*");       
    }
});

Comments

স্মুথলি কাজ করে। ধন্যবাদ গাদা!

— অ্যালেক্স লিওনভ

সহজভাবে এটি বেশিরভাগ প্রযুক্তিগত পদ্ধতি যা আমি খুঁজে পেতে পারি, দুর্দান্ত কাজ @ সুধীর, আপনাকে ধন্যবাদ :)

— java acm

Answer 3

আমি যা করেছি তা হল IFrame উচ্চতা নির্ধারণের সময় আকার পরিবর্তন না হওয়া অবধি আইফ্রেমে স্ক্রোলউইথের তুলনা করা। এবং এটা আমার জন্য ভাল কাজ করে। আপনি যেটি পছন্দসই ইনক্রিমেন্টটি সামঞ্জস্য করতে পারেন।

   <script type="text/javascript">
    function AdjustIFrame(id) {
        var frame = document.getElementById(id);
        var maxW = frame.scrollWidth;
        var minW = maxW;
        var FrameH = 100; //IFrame starting height
        frame.style.height = FrameH + "px"

        while (minW == maxW) {
            FrameH = FrameH + 100; //Increment
            frame.style.height = FrameH + "px";
            minW = frame.scrollWidth;
        }
    }

   </script>


<iframe id="RefFrame" onload="AdjustIFrame('RefFrame');" class="RefFrame"
    src="http://www.YourUrl.com"></iframe>

Comments

আপনি সম্ভবত লুপের সংখ্যার উপর একটি ক্যাপ যুক্ত করতে চান, অন্যথায় 'যখন' একটি অসীম লুপে অধঃপতিত হতে পারে।

— কেভিন সিফার্ট

এটি আমার পৃষ্ঠাটি ক্র্যাশ করছে।

— ডিডিডিডি

ভাল সহজ সমাধান। তবে আমার সিএজে, আকারের বৃদ্ধি স্ক্রিনের আকার দ্বারা ক্যাপড।

— জেতা

Answer 4

আমার কাছে একটি স্ক্রিপ্ট রয়েছে যা এর সামগ্রীতে আইফ্রেমে নেমে আসে। এটি আইফ্রেমরাইজার উপস্থিত রয়েছে তাও নিশ্চিত করে (এটি এটি স্ক্রিপ্ট হিসাবে ইনজেক্ট করে) এবং তারপরে পুনরায় আকার দেয়।

আমি নীচে একটি সরল উদাহরণ ছেড়ে যাব।

// /js/embed-iframe-content.js

(function(){
    // Note the id, we need to set this correctly on the script tag responsible for
    // requesting this file.
    var me = document.getElementById('my-iframe-content-loader-script-tag');

    function loadIFrame() {
        var ifrm = document.createElement('iframe');
        ifrm.id = 'my-iframe-identifier';
        ifrm.setAttribute('src', 'http://www.google.com');
        ifrm.style.width = '100%';
        ifrm.style.border = 0;
        // we initially hide the iframe to avoid seeing the iframe resizing
        ifrm.style.opacity = 0;
        ifrm.onload = function () {
            // this will resize our iframe
            iFrameResize({ log: true }, '#my-iframe-identifier');
            // make our iframe visible
            ifrm.style.opacity = 1;
        };

        me.insertAdjacentElement('afterend', ifrm);
    }

    if (!window.iFrameResize) {
        // We first need to ensure we inject the js required to resize our iframe.

        var resizerScriptTag = document.createElement('script');
        resizerScriptTag.type = 'text/javascript';

        // IMPORTANT: insert the script tag before attaching the onload and setting the src.
        me.insertAdjacentElement('afterend', ifrm);

        // IMPORTANT: attach the onload before setting the src.
        resizerScriptTag.onload = loadIFrame;

        // This a CDN resource to get the iFrameResizer code.
        // NOTE: You must have the below "coupled" script hosted by the content that
        // is loaded within the iframe:
        // https://unpkg.com/iframe-resizer@3.5.14/js/iframeResizer.contentWindow.min.js
        resizerScriptTag.src = 'https://unpkg.com/iframe-resizer@3.5.14/js/iframeResizer.min.js';
    } else {
        // Cool, the iFrameResizer exists so we can just load our iframe.
        loadIFrame();
    }    
}())

তারপরে iframe সামগ্রীটি অন্য পৃষ্ঠা / সাইটের মধ্যে যে কোনও জায়গায় যেমন স্ক্রিপ্ট ব্যবহার করে ইনজেকশন করা যায়:

<script
  id="my-iframe-content-loader-script-tag"
  type="text/javascript"
  src="/js/embed-iframe-content.js"
></script>

আপনি স্ক্রিপ্ট ট্যাগ যেখানেই রাখুন নীচে iframe সামগ্রীটি ইনজেকশন করা হবে।

আশা করি এটি কারও সহায়ক হবে। 👍

Comments

ভাল <script ... data-src="http://google.com">লাগল , আমি এতে যুক্ত করে আইফ্রেমে সিআরসি পূরণ করেছি।

— কলাআসিড

লেখার হিসাবে, বর্তমান সংস্করণiframe-resizer@4.2.10

— BananaAcid

... একটি পূর্ণ ব্যবহারযোগ্য উদাহরণ কোডস্যান্ডবক্স.আইও

— এস

@ বনানাএসিড - আপনার কোডসন্ডবক্স লিঙ্কটি আর কাজ করে না

— ctrlplusb

এটি উল্লেখ করার জন্য ধন্যবাদ, লিঙ্কগুলি হয়ে উঠেছে: কোডস্যান্ডবক্স.আইও / এস / রেমোট- এম্বেড- আইফ0 xl । (দ্রষ্টব্য: একাধিক পৃষ্ঠাগুলি ব্যবহার করে কোডস্যান্ডবক্স "নকল" এবং হ্যাং হতে পারে

— Rel রিলোডোড

Answer 5

এই পৃষ্ঠায় আমার সহজ সমাধান এখানে। http://lab.ohshiftlabs.com/iframesize/

এটা যেভাবে কাজ করে;

মূলত আপনি যদি অন্য ডোমেনে পৃষ্ঠা সম্পাদনা করতে সক্ষম হন তবে আপনি অন্য একটি iframe পৃষ্ঠা রাখতে পারেন যা আপনার সার্ভারের সাথে সম্পর্কিত যা কুকিজের উচ্চতা সংরক্ষণ করে। যখন এটি আপডেট হয়ে যায় তখন একটি বিরতিতে পঠিত কুকিগুলির সাথে, iframe এর উচ্চতা আপডেট করুন। এটাই সব।

ডাউনলোড; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip

সম্পাদনা করুন: 2019 ডিসেম্বর

উপরের সমাধানটি মূলত একটি আইফ্রেমে ৩ য় আইফ্রেমের অভ্যন্তরে অন্য একটি আইফ্রেম ব্যবহার করে এটি শীর্ষ পৃষ্ঠার ডোমেনের অন্তর্গত, যা আপনি এই পৃষ্ঠাটিকে একটি কোয়েরির স্ট্রিং দিয়ে কল করেন যা কোনও কুকির আকারের মান সংরক্ষণ করে, বহিরাগত পৃষ্ঠাটি এই কোয়েরিকে কিছুটা বিরতি দিয়ে পরীক্ষা করে। তবে এটি কোনও ভাল সমাধান নয় তাই আপনার এটি অনুসরণ করা উচিত:

শীর্ষ পৃষ্ঠায়:

window.addEventListener("message", (m)=>{iframeResizingFunction(m)});

m.originএটি কোথা থেকে এসেছে তা আপনি এখানে পরীক্ষা করতে পারেন।

ফ্রেম পৃষ্ঠায়:

window.parent.postMessage({ width: 640, height:480 }, "*")

যদিও, দয়া করে ভুলে যাবেন না এটি এত নিরাপদ উপায় নয়। এটি আপনার পছন্দসই মান সহ আপডেট * মান (টার্গেটআরগিন) নিরাপদ করতে। দয়া করে ডকুমেন্টেশন অনুসরণ করুন: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Comments

এই লিঙ্কগুলি এখন মারা গেছে (404) এবং সামগ্রীতে উত্তরের সংক্ষিপ্তসার দেওয়া হয়নি। :(

— স্টকবি

লিঙ্কগুলি এখনও মৃত। 404

— আরসলান আমির

Answer 6

আইফ্রেমের আকার পেতে পিএইচপি ব্যবহার করে ওয়েব দেবের জন্য আমি অন্য সার্ভার সাইড সলিউশন পেয়েছি।

প্রথমে অভ্যন্তরীণ ফাংশনটির মাধ্যমে একটি বাহ্যিক কলটিতে সার্ভার স্ক্রিপ্ট পিএইচপি ব্যবহার করা হচ্ছে: ( file_get_contentsউইল উইথ কার্ল এবং ডোম)

function curl_get_file_contents($url,$proxyActivation=false) {
    global $proxy;
    $c = curl_init();
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
    curl_setopt($c, CURLOPT_REFERER, $url);
    curl_setopt($c, CURLOPT_URL, $url);
    curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
    if($proxyActivation) {
        curl_setopt($c, CURLOPT_PROXY, $proxy);
    }
    $contents = curl_exec($c);
    curl_close($c);
    $dom = new DOMDocument();
    $dom->preserveWhiteSpace = false;
    @$dom->loadHTML($contents);
    $form = $dom->getElementsByTagName("body")->item(0);
    if ($contents) //si on a du contenu
        return $dom->saveHTML();
    else
        return FALSE;
}
$url = "http://www.google.com"; //Exernal url test to iframe
<html>
    <head>
    <script type="text/javascript">

    </script>
    <style type="text/css">
    #iframe_reserve {
        width: 560px;
        height: 228px
    }
    </style>
    </head>

    <body>
        <div id="iframe_reserve"><?php echo curl_get_file_contents($url); ?></div>

        <iframe id="myiframe" src="http://www.google.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"  style="overflow:none; width:100%; display:none"></iframe>

        <script type="text/javascript">
            window.onload = function(){
            document.getElementById("iframe_reserve").style.display = "block";
            var divHeight = document.getElementById("iframe_reserve").clientHeight;
            document.getElementById("iframe_reserve").style.display = "none";
            document.getElementById("myiframe").style.display = "block";
            document.getElementById("myiframe").style.height = divHeight;
            alert(divHeight);
            };
        </script>
    </body>
</html>

আপনাকে ডিভ ( iframe_reserve) এর নীচে প্রদর্শন করতে হবে একটি সাধারণ ব্যবহার করে ফাংশন কল দ্বারা উত্পাদিত এইচটিএমএলecho curl_get_file_contents("location url iframe","activation proxy")

এটি করার পরে জাভাস্ক্রিপ্ট সহ একটি বডি ইভেন্ট ফাংশন অ্যানডলোড কেবল সামগ্রীর ডিভের একটি সাধারণ নিয়ন্ত্রণের সাথে পৃষ্ঠাটির উচ্চতা গ্রহণ করবে ( iframe_reserve)

সুতরাং আমি divHeight = document.getElementById("iframe_reserve").clientHeight;পৃষ্ঠার উচ্চতা পেয়েছিলাম বাহ্যিক আমরা ডিভ ধারক ( iframe_reserve) পরে মুখোশ পরে কল করতে যাচ্ছি । এর পরে আমরা ইফ্রেমে এর ভাল উচ্চতা দিয়ে লোড করি।

Answer 7

কর্মক্ষেত্রে কোনও কিছুতে (প্রতিক্রিয়া ব্যবহার করে) কাজ করার সময় আমি এই ইস্যুটিতে ছড়িয়ে পড়েছি। মূলত, আমাদের কিছু বাহ্যিক এইচটিএমএল সামগ্রী রয়েছে যা আমরা আমাদের ডকুমেন্ট সারণীতে ডাটাবেজে সংরক্ষণ করি এবং তারপরে নির্দিষ্ট পরিস্থিতিতে পৃষ্ঠাটিতে সন্নিবেশ করি যখন আপনি ডকুমেন্টস ডেটাসেটে থাকবেন।

সুতরাং, nইনলাইনগুলি দেওয়া হয়েছে, যার nমধ্যে বহিরাগত এইচটিএমএল থাকতে পারে, প্রতিটি কন্টেন্ট সম্পূর্ণরূপে লোড হয়ে গেলে প্রতিটি ইনলাইনটির ইফ্রেমে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করতে আমাদের একটি সিস্টেম তৈরি করা দরকার। আমার চাকাগুলি কিছুটা কাটানোর পরে, আমি এভাবেই শেষ করেছি:

1. messageআমাদের প্রতিক্রিয়া অ্যাপ্লিকেশনটির সূচীতে একটি ইভেন্ট শ্রোতা সেট করুন যা প্রেরক থেকে iframe সেট করব যা নির্দিষ্ট নির্দিষ্ট কী পরীক্ষা করে।
2. আসলে যে উপাদানটি আইফ্রেমে রেন্ডার করে, এতে বাহ্যিক এইচটিএমএল সন্নিবেশ করার পরে, আমি একটি <script>ট্যাগ সংযোজন করি যা iframe গুলি চালিত হওয়ার জন্য অপেক্ষা করবে window.onload। একবার অগ্নিকাণ্ডের পরে, আমরা postMessageআইফ্রেমে আইডি, গণিত উচ্চতা ইত্যাদি সম্পর্কিত তথ্য সহ প্যারেন্ট উইন্ডোতে একটি বার্তা প্রেরণ করি use
3. যদি উত্সটি মেলে এবং কী সূচক শ্রোতার সাথে সন্তুষ্ট হয় তবে idআমরা আইটেমটিতে যে আইফ্রেমে পাস করি তার ডিওএমটি MessageEventধরুন
4. আমাদের একবার হলে iframe, কেবলমাত্র iframe থেকে পাস করা মান থেকে উচ্চতা নির্ধারণ করুন postMessage।

// index
if (window.postMessage) {
    window.addEventListener("message", (messageEvent) => {
        if (
            messageEvent.data.origin &&
            messageEvent.data.origin === "company-name-iframe"
        ) {
            const iframe = document.getElementById(messageEvent.data.id)
            // this is the only way to ensure that the height of the iframe container matches its body height
            iframe.style.height = `${messageEvent.data.height}px`
            // by default, the iframe will not expand to fill the width of its parent
            iframe.style.width = "100%"
            // the iframe should take precedence over all pointer events of its immediate parent
            // (you can still click around the iframe to segue, for example, but all content of the iframe
            // will act like it has been directly inserted into the DOM)
            iframe.style.pointerEvents = "all"
            // by default, iframes have an ugly web-1.0 border
            iframe.style.border = "none"
        }
    })
}

// in component that renders n iframes
<iframe
    id={`${props.id}-iframe`}
    src={(() => {
        const html = [`data:text/html,${encodeURIComponent(props.thirdLineData)}`]
        if (window.parent.postMessage) {
            html.push(
                `
                <script>
                window.onload = function(event) {
                    window.parent.postMessage(
                        {
                            height: document.body.scrollHeight,
                            id: "${props.id}-iframe",
                            origin: "company-name-iframe",
                        },
                        "${window.location.origin}"
                    );
                };
                </script>
                `
            )
        }

        return html.join("\n")
    })()}
    onLoad={(event) => {
        // if the browser does not enforce a cross-origin policy,
        // then just access the height directly instead
        try {
            const { target } = event
            const contentDocument = (
                target.contentDocument ||
                // Earlier versions of IE or IE8+ where !DOCTYPE is not specified
                target.contentWindow.document
            )
            if (contentDocument) {
                target.style.height = `${contentDocument.body.scrollHeight}px`
            }
        } catch (error) {
            const expectedError = (
                `Blocked a frame with origin "${window.location.origin}" ` +
                `from accessing a cross-origin frame.`
            )
            if (error.message !== expectedError) {
                /* eslint-disable no-console */
                console.err(
                    `An error (${error.message}) ocurred while trying to check to see ` +
                    "if the inner iframe is accessible or not depending " +
                    "on the browser cross-origin policy"
                )
            }
        }
    }}
/>