<iframe> – Как отобразить всю высоту страницы, на которую ссылаются?

StackOverflow https://stackoverflow.com/questions/58543

  •  09-06-2019
  •  | 
  •  

Вопрос

У меня есть приложение, которое я хотел бы встроить в CMS нашей компании.Единственный способ сделать это (как мне сказали) — загрузить его в <iframe>.

Легкий:просто установил height и width к 100%!Вот только это не работает.

Я узнал о настройке frameborder к 0, так это по крайней мере выглядит как часть сайта, но я бы предпочел, чтобы уродливой полосы прокрутки не было внутри страница, на которой он уже есть.

Знаете ли вы какие-нибудь хитрости, как это сделать?

РЕДАКТИРОВАТЬ: Думаю, мне нужно несколько уточнить мой вопрос:

  • компания CMS отображает всю ерунду и прочее для всего нашего сайта
  • большинство страниц создано через CMS
  • мое приложение — нет, но они позволят мне встроить его в <iframe>
  • Я не имею никакого контроля над iframe, поэтому любое решение должно работать со указанной страницы (согласно src атрибут iframe ярлык)
  • CMS отображает нижний колонтитул, поэтому устанавливать высоту в 1 миллион пикселей — не лучшая идея.

Могу ли я получить доступ к DOM родительских страниц со страницы, на которую есть ссылка?Это может помочь, но я вижу, что некоторые люди могут не захотеть, чтобы это было возможно...

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

В родительском документе:

<iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0">
    no iframes supported...
</iframe>

У ребенка:

<!-- ... -->
<body>
<script type="text/javascript">
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            && typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
</script>               
</body>

КСТАТИ: Это будет работать только в том случае, если родительский и дочерний элементы находятся в одном домене из-за ограничения JavaScript по соображениям безопасности...

Это было полезно?

Решение

Вы можете либо просто использовать язык сценариев, чтобы включить страницу в родительскую страницу, либо попробовать один из этих методов JavaScript:

http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html

Другие советы

При условии, что ваш iframe размещен на том же сервере, что и содержащая его страница, вы можете получить к нему доступ через JavaScript.

Существует ряд предлагаемых методов установка iframe на полную высоту содержимого, каждый с разной степенью успеха - Google для этой проблемы показывает, что это довольно распространенная проблема, и я боюсь, что не существует реального, универсального решения для всех!

Об этом сообщили несколько человек этот сценарий помогает, но может понадобиться некоторая модификация для вашего конкретного случая (опять же, при условии, что ваш iframe и родительская страница находятся в одном домене).

Возможно, я что-то упускаю, но добавлю scrolling=no в качестве атрибута iframe тег обычно избавляется от полос прокрутки.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top