क्या कोई क्रॉस-डोमेन आइफ्रेम ऊंचाई ऑटो-रिसाइज़र है जो काम करता है?

110

मैं कुछ समाधान की कोशिश की, लेकिन सफल नहीं था। मैं सोच रहा था कि वहाँ एक आसान से पालन ट्यूटोरियल के साथ वहाँ एक समाधान है।

iframe cross-domain

— J82
स्रोत

2

आपने कौन से समाधान आजमाए जो असफल रहे?

— यज़्मीर रामिरेज़ 8:56 11:56

1

मैंने इसे एक कोशिश की, लेकिन यह लेख में कहा गया है कि वेबकिट ब्राउज़र में मौजूद है: css-tricks.com/cross-domain-iframe-resizing एक और भी था, लेकिन मुझे url याद नहीं है।

— J82

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

— T.Todua

क्या इससे आपके सवाल का जवाब मिलता है? इसमें सामग्री के साथ फिट होने के लिए iframe की चौड़ाई और ऊंचाई समायोजित करें

— abbr

68

आपके पास तीन विकल्प हैं:

1. उपयोग -Frame-resizer

यह iFrames उनकी सामग्री के आकार रखने के लिए एक सरल पुस्तकालय है। यह PostMessage और MutationObserver API का उपयोग करता है, IE8-10 के फॉल बैक के साथ। इसमें सामग्री पृष्ठ के लिए विकल्प भी हैं जिनमें अनुरोधित iFrame एक निश्चित आकार है और जब यह आपके साथ हुआ तो iFrame को बंद भी कर सकता है।

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/

आसान XDM आधुनिक ब्राउज़रों पर PostMessage और पुराने ब्राउज़रों के लिए एक फ़्लैश आधारित समाधान का उपयोग करके काम करता है ।

स्टैकओवरफ़्लो पर इस धागे को भी देखें (अन्य भी हैं, यह आमतौर पर पूछा जाने वाला प्रश्न है)। इसके अलावा, फेसबुक एक समान दृष्टिकोण का उपयोग करता प्रतीत होगा ।

3. एक सर्वर के माध्यम से संवाद

एक अन्य विकल्प होगा कि अपने सर्वर को iframe की ऊंचाई भेजें और फिर JSONP के साथ मूल वेब पेज से उस सर्वर से मतदान करें (या यदि संभव हो तो एक लंबे सर्वेक्षण का उपयोग करें)।

— जनने औकिया
स्रोत

1

पोस्टमैसेज के लिए, यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो आप बेन एल्मन

— rinogo

8

iFrame-resizer को iframe सामग्री को होस्ट करने वाले सर्वर तक पहुंच की आवश्यकता होती है। इसलिए आप इसे केवल उन डोमेन के लिए उपयोग कर सकते हैं जिन्हें आप नियंत्रित करते हैं।

— होकसाचा

अच्छी पकड़ है, @ होकशा। परियोजना क्रॉस-डोमेन iframes के लिए समर्थन का दावा करती है, लेकिन डॉक्स पढ़ने से पता चलता है कि यह अभी भी एम्बेडेड डोमेन के लिए सर्वर एक्सेस की आवश्यकता है।

— स्टॉक बीक

1

इन मुद्दों में से कोई भी "विकल्प" वास्तविक समाधान नहीं हैं। पूछनेवाला उन वेबसाइटों से क्रॉस डोमेन iFrames की iFrame ऊँचाई सेट करना चाहता है, जिन पर उनका नियंत्रण नहीं है। 1. सर्वर एक्सेस की आवश्यकता है। 2. सॉफ्टवेयर की आवश्यकता है जिसे मैं गरीब मानता हूं। आसान XDM 10 साल पहले की तरह बनाया गया था। नवीनतम संस्करण, 2019 से, फ्लैश की आवश्यकता है । फ्लैश, शुक्र है, मृत और किसी को भी इस पर भरोसा नहीं करना चाहिए। 3. सर्वर एक्सेस की आवश्यकता है।

— 22 नवंबर को लालनिमलवार

26

मुझे iframe की ऊंचाई को गतिशील रूप से सामग्री के आधार पर सेट करने के लिए समाधान मिला। यह क्रॉस डोमेन कंटेंट के लिए काम करता है। इसे प्राप्त करने के लिए कुछ चरणों का पालन करना होगा।

मान लीजिए कि आपने "abc.com/page" वेब पेज में iframe जोड़ा है

<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>
अगला आपको वेब पेज "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", "*");   
}

"Xyz.pqr / contactpage" यहाँ iframe के तहत जोड़े गए मुख्य पृष्ठ पर आपको "संदेश" घटना को विंडो में बाँधना होगा जहाँ सभी संदेश "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 }, "*");       
    }
});

— सुधीर
स्रोत

3

स्मूथी से काम करता है। बहुत बहुत धन्यवाद!

— एलेक्स लियोनोव

बस यह सबसे तकनीकी तरीका है जो मुझे मिल सकता है, महान काम @sudhir, थैंक यू :)

— जावा acm

14

मैंने जो भी किया, अगर वह साइज़ में बदलाव करता है, तो आईफ्रेम स्क्रोलविद की तुलना तब करता है, जब मैं आईफ्रेम ऊँचाई सेट करता हूँ। और इसने मेरे लिए अच्छा काम किया। आप जो कुछ भी चाहते हैं उसमें वृद्धि को समायोजित कर सकते हैं।

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

— ट्रॉय मिशेल
स्रोत

4

आप शायद लूप की संख्या पर एक कैप जोड़ना चाहते हैं, अन्यथा 'जबकि' एक अनंत लूप में पतित हो सकता है।

— केविन सीफर्ट

1

यह मेरे पृष्ठ को क्रैश कर रहा है।

— DDDD

अच्छा सरल उपाय है। लेकिन मेरी caes में, स्क्रीन के आकार द्वारा आकार वृद्धि को कैप किया गया है।

— जीटा

1

मेरे पास एक स्क्रिप्ट है जो आईफ्रेम में इसके कंटेंट के साथ है। यह भी सुनिश्चित करता है कि iFrameResizer मौजूद है (यह इसे स्क्रिप्ट के रूप में इंजेक्ट करता है) और फिर आकार बदलता है।

मैं नीचे एक सरलीकृत उदाहरण में छोड़ दूँगा।

// /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 सामग्री को नीचे इंजेक्ट किया जाएगा।

आशा है कि यह किसी के लिए उपयोगी है। 👍

— ctrlplusb
स्रोत

अच्छा, मैंने जोड़ा <script ... data-src="http://google.com">और इसके साथ iframe src भरा।

— BananaAcid

लेखन के रूप में, वर्तमान संस्करण हैiframe-resizer@4.2.10

— BananaAcid

1

... एक पूर्ण प्रयोग करने योग्य उदाहरण के लिए विस्तारित कोडंडबॉक्स.io

— s/

@BananaAcid - आपके कोडैंडबॉक्स लिंक अब काम नहीं करता है

— ctrlplusb

इसका उल्लेख करने के लिए धन्यवाद, लिंक बन गए हैं: codesandbox.io/s/remote-embed-ifrm-yz0nl । (नोट: कई पृष्ठों का उपयोग करके कोडकबॉक्स "फेक" और लटक सकता है।

— रीलोडेड

1

यहाँ इस पृष्ठ पर मेरा सरल समाधान है। http://lab.ohshiftlabs.com/iframesize/

यहाँ दिया गया है कि यह कैसे काम करता है;

यहां छवि विवरण दर्ज करें

मूल रूप से यदि आप अन्य डोमेन पर पृष्ठ को संपादित करने में सक्षम हैं, तो आप एक अन्य iframe पृष्ठ रख सकते हैं जो आपके सर्वर से संबंधित है जो कुकीज़ को ऊंचाई बचाता है। जब यह अद्यतन किया जाता है, तो एक अंतराल में कुकीज़ पढ़ें, iframe की ऊंचाई को अपडेट करें। बस इतना ही।

डाउनलोड; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip

संपादित करें: 2019 दिसंबर

मूल रूप से ऊपर दिया गया समाधान, iframe 3rd iframe के अंदर एक अन्य iframe का उपयोग करता है, जो शीर्ष पृष्ठ डोमेन से संबंधित है, जिसे आप इस पृष्ठ को एक क्वेरी स्ट्रिंग के साथ कहते हैं, जो कुकी के आकार का मान बचाता है, बाहरी पृष्ठ कुछ अंतराल के साथ इस क्वेरी की जाँच करता है। लेकिन यह एक अच्छा समाधान नहीं है, इसलिए आपको इसका पालन करना चाहिए:

शीर्ष पृष्ठ में:

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

यहां आप देख सकते m.originहैं कि यह कहां से आता है।

फ्रेम पेज में:

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

हालाँकि, कृपया यह न भूलें कि यह इतना सुरक्षित तरीका नहीं है। अपने इच्छित मूल्य के साथ इसे सुरक्षित अद्यतन * मूल्य (targetOrigin) बनाने के लिए। कृपया प्रलेखन का पालन करें: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

— siniradam
स्रोत

1

ये लिंक अब मृत हो गए हैं (404) और सामग्री का उत्तर संक्षेप में नहीं दिया गया है। :(

— StockB

1

लिंक अभी भी मृत हैं। 404

— अरसलान आमेर

0

मैं वेब देव के लिए एक और सर्वर साइड सॉल्यूशन पाया जो कि iframe का आकार पाने के लिए PHP का उपयोग करता है।

पहले आंतरिक कार्य के माध्यम से बाहरी कॉल के लिए सर्वर स्क्रिप्ट PHP का उपयोग कर रहा है: (जैसे कि 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एक साधारण का उपयोग करके फ़ंक्शन कॉल द्वारा उत्पन्न div ( ) HTML के तहत प्रदर्शित करने की आवश्यकता हैecho curl_get_file_contents("location url iframe","activation proxy")

बस सामग्री div का एक सरल नियंत्रण के साथ पेज iframe की जावास्क्रिप्ट ले ऊंचाई के साथ इस एक शरीर घटना समारोह ऑनलोड करने के बाद ( iframe_reserve)

इसलिए मैं divHeight = document.getElementById("iframe_reserve").clientHeight;उस पृष्ठ बाहरी की ऊंचाई प्राप्त करता था जिसे हम डिव कंटेनर ( iframe_reserve) के मुखौटे के बाद कॉल करने जा रहे हैं । इसके बाद हम iframe को उसकी अच्छी ऊंचाई के साथ लोड करते हैं।

— headmax
स्रोत

0

मैं इस मुद्दे पर काम करते समय कुछ पर काम कर रहा था (प्रतिक्रिया का उपयोग करके)। मूल रूप से, हमारे पास कुछ बाहरी HTML सामग्री है जिसे हम डेटाबेस में अपनी दस्तावेज़ तालिका में सहेजते हैं और तब कुछ परिस्थितियों में पृष्ठ पर डालते हैं जब आप दस्तावेज़ डेटासेट में होते हैं।

तो, nइनलाइनों को देखते हुए , nजिनमें से बाहरी HTML शामिल हो सकता है, हमें प्रत्येक इनलाइन के iframe को स्वचालित रूप से आकार देने के लिए एक प्रणाली तैयार करने की आवश्यकता थी, ताकि प्रत्येक सामग्री पूरी तरह से लोड हो जाए। अपने चक्कों को थोड़े से सहलाने के बाद, मैंने इस तरह से इसे पूरा किया:

messageहमारे रिएक्ट ऐप के सूचकांक में एक ईवेंट श्रोता सेट करें जो एक विशिष्ट कुंजी की जांच करता है जिसे हम प्रेषक आइफ्रेम से सेट करेंगे।
उस घटक में जो वास्तव में iframes को प्रस्तुत करता है, बाहरी html को इसमें डालने के बाद, मैं एक <script>टैग संलग्न करता हूं जो iframe के window.onloadआग में आने का इंतजार करेगा । एक बार आग लगने के बाद, हम postMessageiframe id, कंप्यूटेड ऊँचाई, आदि के बारे में जानकारी के साथ मूल विंडो पर एक संदेश भेजने के लिए उपयोग करते हैं ।
यदि अनुक्रमणिका श्रोता में मूल मिलान और कुंजी संतुष्ट है, तो idउस iframe के DOM को पकड़ो जिसे हम MessageEventऑब्जेक्ट में पास करते हैं
एक बार हमारे पास 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"
                )
            }
        }
    }}
/>

— जॉन डंकन
स्रोत