Как сделать высоту iframe по содержанию, полученному с другого домена?

Question

[Mr Freeman]

Привет всем. Что-то гугл не помогает, пришел сюда! Есть скрипт:

var iframe = document.createElement("iframe");
iframe.src = "http://site.ru/my_block_html";
iframe.scrolling = "no";
iframe.id = 'the_frame';
iframe.name = 'the_frame';
iframe.width = '100%';
iframe.style.border = 'none';
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
document.currentScript.parentNode.appendChild(iframe);

Он вызывается на другом сайте, типа рекламные баннеры. Все просто и давно уже съедено, а я не могу почему то найти ответ.

По ссылке src приходит хтмл блок с определенной высотой. Разумеется, iframe к ней не подстраивается. iframe.height = '100%' тут тоже не подходит. К данным блока нет доступа, так как скрипт вызывается на другом домене. А iframe.contentWindow.document.body.scrollHeight показывает высоту лишь body, а не содержимого. iframe.contentWindow.document.getElementsByTagName('a') не находит элементы. Думаю это потому, что у нас еще не загружается iframe, но iframe.onload тоже не вызывается. Так как опять же другой домен. Кто как решал/решает подобные задачи? Подскажите, пожалуйста.

Answer 1

[Евгений Петров]

Для решения задачи «в лоб» можно использовать общение между окнами.

Исходный документ

var iframe = document.createElement('iframe');

window.addEventListener('message', function (e) {
	iframe.height = e.data;
});
iframe.src = '...';
iframe.scrolling = 'no';
iframe.width = 300;
iframe.height = 300;
document.body.appendChild(iframe);

Загружаемый документ

window.addEventListener('load', function () {
	parent.postMessage(document.documentElement.scrollHeight, '*');
});

Во втором аргументе postMessage можно указать домен исходного документа.
Пример

Comments

[Mr Freeman]

Идея интересная, только не совсем понятно, что тут исходный документ, что загружаемый.

Просто как получается. Первый ваш код (Исходный документ) тоже загружается на сайт с другого домена.

То есть как происходит - вызываю на нужном сайте код в каком-то месте

содержимое scripts.js есть как раз ваш "Исходный документ", а этот исходный документ уже похватывает через src данные с сервера. А второй тогда откуда скрипт? Если как раз из этого содержимого src, то

console.log(e.data) и console.log(document.documentElement.scrollHeight) в соответствующих строчках выдают как раз высоту body, а не высоту содержимых элементов. Получается если я не указываю высоту iframe, то у меня "съедает" контент

[Евгений Петров]

vladamir: Вы пример посмотрите для понимания.

1. Вы создаёте в любом документе iframe и устанавливаете слушатель на получение сообщений. Если источников много — смотрите на e.origin для принятия решения.
2. В загружаемом документе ставите на загрузку контента отправку сообщения с высотой контента документа.
3. Я не понимаю, о каком scripts.js вы говорите.
4. document.documentElement.scrollHeight — высота контента в html загруженного документа. Причём тут обязательно body?
5. Что и кого съедает?)

[Евгений Петров]

vladamir: Специально для вашего понимания обновил пример. Вставил в документ код скрипта, чтобы не искать, по факту всё делает скрипт — и стиль добавляет (если такое нужно), и он же формирует iframe.

[Евгений Петров]

И да — если документ, загружаемый в iframe, не отправит сообщение, то никто никогда не узнает, что у него внутри.

[Mr Freeman]

Спасибо больше, сейчас все хорошо опробую

[Николай]

vladamir smertniy: отметили бы решение. Мне, например, помогло.
Спасибо, Евгений Петров! :)

[eeeman1]

то что в примере будет работать только если есть доступ к содержимому фрейма, иначе никак

Answer 2

[GreatRash]

Подозреваю, что никак. Получить доступ к документу вы не сможете, соответственно посчитать высоту внутри вы тоже никак не сможете. Либо подгонять на глазок, либо забить.

Comments

[GreatRash]

Хотя вот погуглил, попробуйте - https://github.com/davidjbradshaw/iframe-resizer

[Mr Freeman]

Да не, забыл уточнить, на нативном js нужно. Без jquery

[GreatRash]

vladamir: Там как раз jQuery не обязателен.

Answer 3

[Александр Токмаков]

<script type="text/javascript">
$(function() {
    var iframe = $('#ourframe', parent.document.body);
    iframe.height($(document.body).height());
});
</script>
<html>
    <body>
        <iframe id="ourframe"></iframe>
    </body>
</html>