Автоматическая высота для Iframe, содержащая встроенный/опубликованный Google Doc

У меня есть iframe с опубликованным Google Doc. Содержимое этого документа может быть изменено, поэтому я хочу автоматически настроить высоту iframe на основе его содержимого. Я нашел некоторые решения для этого, но все они требуют доступа к главе дочернего документа. Кто-нибудь есть идея о том, как это сделать?

Вы можете просмотреть отрывок кода, который я использую ниже:

#faq{
height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
}

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>

ОТВЕТЫ

Ответ 1

Нет текущего способа сделать это.

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

Ответ 2

Простой ответ... вы не можете

(извините)

Причина связана с кросс-доменной политикой (подробнее, информация) вы не можете получить дочерний документ iframe и, следовательно, установить его height, чтобы изменить размер iframe соответственно, просто поместите

При вычислении политика одного и того же происхождения является важной концепцией в модель безопасности веб-приложений. Эта политика позволяет запускать скрипты страницы, происходящие из одного и того же сайта - комбинация схемы, имя хоста и номер порта - для доступа к DOM без конкретные ограничения, но препятствует доступу к DOM на разных сайты.

источник

[...]

Если у вас нет контроля над сайтом в рамке, вы не можете обойти междоменная политика.

источник

И если вы не можете сделать это, вы не можете делать то, что хотите, потому что нет способа определить высоту документа-документа.

Кажется, причина, по которой вы хотите это сделать, связана с дизайном. Таким образом, вы можете взглянуть на различные способы реализации контента (iframe) на своем сайте, причем очевидным является то, что естественное ограничение по высоте - высота просмотра в браузере, возможно поэтому делает iframe 100% окна просмотра ( html, body) высота? Хотя это будет мешать вашему дизайну, если на странице есть другие компоненты... но есть альтернативы... iframe может:

  • Выровняйтесь по одной стороне страницы со 100% установленной высотой

  • Поместить в всплывающее или модальное окно со 100% высотой/шириной

  • Управляйте (JS), чтобы растягиваться с родительским окном, возможно, с фиксированным bottom

Также помните, что, поскольку это глобальное ограничение на этот вид контента, пользователи не полностью неиспользуются, чтобы увидеть его, хотя это не идеальный выбор дизайна, он не обязательно тот, который будет путать/удивлять посетителей вашего сайта.

Ответ 3

Плохая новость заключается в том, что кросс-доменная политика не позволит вам делать это каким-либо образом. Я провел пару часов, пытаясь обойти, в том числе:

  • Создание родительского DIV и установка iframe на нем
  • Попытка динамического изменения родительского DIV
  • Попытка найти библиотеку для вычисления высоты на стороне сервера
  • и много googling.

Лучший подход - использовать доступную библиотеку.

Загрузите ZIP со следующего URL-адреса и следуйте простым инструкциям по установке, написанным там.

http://davidjbradshaw.github.io/iframe-resizer/

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

Ответ 4

#faq{
position: relative;
width: 832px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
height: 100%
}
#faqif{}
.bgcolor_patch{position: absolute; right: 0; top:0; height: 100%; width: 20px; background: #fff; }

 $(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" height="100%" width="832px" frameborder="0"></iframe>
<div class="bgcolor_patch"></div>
</div>

Ответ 5

Первый ответ здесь работал у меня! Полноэкранный iframe с высотой 100%

    <body style="margin:0px;padding:0px;overflow:hidden">
      <iframe src="http://www.youraddress.com" frameborder="0"
        style="overflow:hidden;height:100%;width:100%" height="100%"
        width="100%">                       
      </iframe>
    </body>

Ответ 6

У меня была такая же проблема. Вот решение. Вы должны установить тело 100% 100% высоты. Затем блок отображения iframe, 100% ширина 100% vh. Вот окончательный код. Извините, я не знаю, как поставить кодовый тег xd.

'body style = "margin: 0px; отступ: 0px; ширина: 100%; высота: 100%;" div style = "высота: 100%; ширина: 100%; отображение: блок;" iframe frameborder = "0" style = "высота: 100vh; ширина: 100%; отображение: блок;" width = "100%" height = "100%" src= "https://docs.google.com/spreadsheets/d/1SizkrPE97j1TouBmohPjCj0ZB-MxYQtRSKotHyxT8Y8/edit#gid=0"/iframe div

Ответ 7

Нечто подобное было задано здесь: Показать всю длину документа для вставки документа Google

Решение состоит в том, чтобы либо использование <embed> вместо <iframe> или GET документ с помощью запроса CORS и поместить его туда, куда вы хотите. Последний также позволяет стилизовать/изменить содержимое.

Ответ 8

Хотя содержание внутри iframe, оно чрезмерно сложно (не невозможно, но, безусловно, нецелесообразно).

Но из-за политики CORS Google Docs вы можете использовать этот фрагмент кода, который я нашел в других местах на SO в какой-то момент в прошлом (сохранить его в комментарии к коду, извините, у меня нет указания авторства) для извлечения контента, и затем используйте его вне iframe - другими словами, используйте iframe только как способ сделать запрос, а затем отформатируйте сам контент. Затем вы можете обработать высоту полученного div как и любой другой.

    <!--
      // get all iframes that were parsed before this tag
    var iframes = document.getElementsByTagName("iframe");

    for (let i = 0; i < iframes.length; i++) {
        var url = iframes[i].getAttribute("src");
        if (url.startsWith("https://docs.google.com/document/d/")) {
            // create div and replace iframe
            let d = document.createElement('div');
            d.classList.add("embedded-doc"); // optional
            iframes[i].parentElement.replaceChild(d, iframes[i]);

            // CORS request
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function() {
                // display response
                d.innerHTML = xhr.responseText;
            };
            xhr.send();
        }
    }
    -->