как динамически задать высоту для iframe

Question

как динамически задать высоту для iframe

0

Я загружаю URL-адрес перекрестного домена через iframe на моем сайте. как ниже

<iframe class="iframeId" src="cross domain... /view/id/100" scrolling="no"></iframe>

Я хочу установить высоту для iframe после загрузки страницы. Если я использую ниже код, получающий некоторую ошибку для кросс-домена url

$('.iframeId').load(function () {
    this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});

ошибка: "Ошибка: разрешение на доступ к документу свойства". Моя цель - загрузить страницу в iframe без полос прокрутки. Итак, как я могу решить эту проблему?

rajesh 21 окт. 2013, в 16:19

Источник

0

попробуйте это $ (this) .outerHeight (true); или $ (this) .css ("высота");
avalkab 21 окт. 2013, в 13:57

Теги:

jquery

html5

4 ответа

0

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

Michał Rybak 21 окт. 2013, в 12:34

0

Вы не можете решить эту проблему, если у вас нет доступа к обоим доменам. Подумайте о дырах в безопасности, если вы смогли это сделать.

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

Tim Vermaelen 21 окт. 2013, в 12:16

0

Здравствуй,

Не могли бы вы попробовать ниже....

> <script type="text/javascript">
>     $(document).ready(function () {
>         $('.iframeId').height($(document).height());
>     }); 
> </script>

Спасибо, Вишал Патель

Vishal Patel 21 окт. 2013, в 11:39

Ещё вопросы

попробуйте это $ (this) .outerHeight (true); или $ (this) .css ("высота");

matewka · Accepted Answer · 2013-10-21T12-35-00.000Z

Здесь вы столкнулись с одной и той же проблемой происхождения. У вас нет доступа к iframe если он не из того же домена, что и родительский документ. Вы не можете изменить свой стиль ни DOM.
Однако, если вы можете разработать содержимое URL-адреса, указанного iframe, вы можете попробовать с помощью события message и метода postMessage. Ваш родительский документ мог бы сделать

$('#iframeId').load(function () {
    $('#iframeId').get(0).contentWindow.postMessage('requestHeightChange', '*');
});

Затем документ в iframe должен прослушивать событие message

$(window).on('message', function(e) {
    var data = e.data;
    if (!data) data = e.originalEvent.data;
    if ("requestHeightChange" == data) {
        window.parent.postMessage("setHeight:" + document.body.offsetHeight, "*");
    }
});

Ваш родительский документ должен также прослушивать событие message и, поскольку нет никакого различия между тем, какое сообщение приходит из какого iframe, вы должны указать его в data сообщения. event.data - это единственные данные, которые можно отправить postMessage. Слушатель событий может выглядеть следующим образом:

$(window).on('message', function(e) {
    var data = e.data;
    if (!data) data = e.originalEvent.data;
    data = data.split(":");
    if ("setHeight" == data[0]) {
        $('#iframeId').height(data[1] + "px");
    }
});

Чтобы узнать больше о postMessage обратитесь к MDN.

это сработало для меня, спасибо @matewka