Есть ли междоменный авторейзер высоты iframe, который работает?

Question

Я попробовал несколько решений, но не смог. Мне интересно, есть ли какое-нибудь решение, желательно с простым для изучения руководством.

Answer 1

У вас есть три варианта:

1.Используйте iFrame-resizer

Это простая библиотека для сохранения размера iFrames в соответствии с их содержимым.Он использует API PostMessage и MutationObserver с запасными вариантами для IE8-10.Он также имеет параметры для страницы содержимого, чтобы запросить содержащий iFrame определенного размера, а также может закрыть iFrame, когда вы закончите с ним.

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

2.Используйте Easy XDM (PostMessage + Flash combo)

Easy XDM использует набор приемов для обеспечения междоменной связи между различными окнами в нескольких браузерах, и есть примеры использования его для изменения размера iframe:

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/

Easy XDM работает с использованием PostMessage в современных браузерах и решением на основе Flash в качестве запасного варианта для старых браузеров.

См. Также эту тему в Stackoverflow (есть и другие, это часто задаваемый вопрос).Кроме того, Facebook, похоже, использует аналогичный подход .

3.Связь через сервер

Другой вариант - отправить высоту iframe на ваш сервер и затем опросить с этого сервера с родительской веб-страницы с помощью JSONP (или, если возможно, использовать длинный опрос).

Answer 2

Я получил решение для динамической установки высоты iframe в зависимости от его содержимого.Это работает для междоменного контента.Для достижения этой цели необходимо выполнить несколько шагов.

1. Предположим, вы добавили iframe на веб-страницу "abc.com/page"

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

2. Далее вам нужно привязать событие windows "message" к веб-странице "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);        
    }
});

On iframe load you have to send message to iframe window content with "FrameHeight" message

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

На главной странице, которая добавлена ​​в iframe здесь "xyz.pqr / contactpage", вы должны привязать событие windows "message", где все сообщения будут получать из родительского окна "abc.com/page"

window.addEventListener('message', function (event) {
    
    // Need to check for safty 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 }, "*");       
    }
});

Наконец, ваша высота iframe будет установлена ​​при загрузке iframe.

Счастливого кодирования !!!

Answer 3

Я сравнивал iframe scrollWidth до тех пор, пока он не изменил размер, а я постепенно установил высоту 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>

Answer 4

Вот мое простое решение на этой странице. http://lab.ohshiftlabs.com/iframesize/

Вот как это работает;

Как правило, если вы можете редактировать страницу в другом домене, вы можете разместить другую страницу iframe, принадлежащую вашему серверу, которая сохраняет высоту для файлов cookie. С интервалом чтения куки при обновлении обновите высоту фрейма. Это все.

Скачать; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip

Answer 5

У меня есть скрипт, который вставляет в iframe его содержимое. Он также гарантирует, что 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 будет вставлено ниже, куда бы вы ни поместили тег script.

Надеюсь, это кому-нибудь пригодится. ?

Answer 6

Я нашел другое серверное решение для веб-разработчика, использующее PHP для получения размера iframe.

Сначала используется серверный скрипт PHP для внешнего вызова через внутреннюю функцию: (например, file_get_contents сcurl and dom).

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>

Вам необходимо отобразить в div (iframe_reserve) HTML-код, сгенерированный при вызове функции, используя простой echo curl_get_file_contents("location url iframe","activation proxy")

После этогоФункция события тела onload с javascript принимает высоту страницы iframe просто с простым контролем содержимого div (iframe_reserve)

Так что я использовал divHeight = document.getElementById("iframe_reserve").clientHeight;, чтобы получить высоту внешней страницы, которую мы будем называтьпосле маскировки контейнера div (iframe_reserve).После этого мы загружаем iframe с хорошей высотой, вот и все.