iframe автоматическая высота не работает

0

Я хочу установить высоту iframe автоматически на высоту содержимого iframe, где максимальная высота 800 px. Это означает, что все фреймы размером менее 800 пикселей не имеют полосы прокрутки, и все фреймы размером более 800 пикселей имеют высоту 800 пикселей с полосой прокрутки. Я уже пробовал:

Я не знаю, что я делаю неправильно, я думаю, это снова просто одна простая строка litte, папки:

style.css
index.html
Scripts/index.js
Sides/pictures.html
Pics/Picture.png

Изображения, стили и другие функции из index.js являются функциональными. Здесь код:

HTML index.html:

<div id="pictures">
        <iframe src="Sides/pictures.html">
            Pictures
        </iframe>
    </div>

HTML of pictures.html:

<h1><img src="../Pics/Pictures.png" width="32" height="32">Pictures</h1>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem i

CSS для iframes:

iframe {
        width: 65%;
        max-height:800px;
        margin: auto;
        display:block;
        border: 1px solid transparent;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.9);
        padding: 0 0 0 0.5em;
      }

index.js

// Auto height for all iframes
$("iframe").load(function() {
    // http://www.w3schools.com/jsref/dom_obj_frame.asp

           try {
              var body = $(this).contents().find('body');
              this.height = 1;
              this.height = body.attr('scrollHeight');
           } catch(e){}

    });

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

$("iframe").load(function()

Я также пробовал

$("iframe").each(function()
  • 0
    О чем говорит javascript-консоль? Доступ к Frames немного сложен (в частности, из соображений безопасности). Вы используете блоки Try / catch. Пожалуйста, распечатайте это.
  • 1
    Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame. Я думаю, что это не будет работать, если вы разрабатываете его локально использовать веб-сервер
Показать ещё 1 комментарий
Теги:
iframe
height

2 ответа

0
Лучший ответ

Вот решение:

jQuery(function($) {
    $("iframe").on('load', function() {
        try {
            var body            = $(this).contents().find('body');
            var scrollHeight    = body.get(0).scrollHeight;

            console.log('scrollHeight', scrollHeight);
            $(this).css('height', scrollHeight);
        } catch(e){
            console.log(e);
        }
    });
});

ЛЮБАЯ РАБОТА ЛОКАЛЬНАЯ !!! (Причины безопасности), демонстрация: http://www.adi-code.de/stackoverflow/iframe/

Поделиться
0

Попробуйте этот код

Javascript:

function autoResize(id){
    var newheight;
    var newwidth;
    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }
    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}

HTML:

<iframe id="iframe" onload="autoResize(this.id);" src="/your-iframe-src" ></iframe>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню