asp.net экрана - сделать iframe высотой динамической на основе содержимого внутри - JQUERY / Javascript





по содержимому (13)


$(document).height() // - $('body').offset().top

и / или

$(window).height()

См. Вопрос о переполнении стека. Как получить высоту элемента body .

Попробуйте найти высоту тела в jQuery:

if $("body").height()

Он не имеет значения, если Firebug . Возможно, в этом и проблема.

Я загружаю веб-страницу aspx в iframe. Содержимое в Iframe может быть больше высоты, чем высота iframe. В iframe не должно быть полос прокрутки.

У меня есть тег div обертки внутри iframe, который в основном представляет собой весь контент. Я написал несколько jQuery, чтобы сделать изменение размера:

$("#TB_window", window.parent.document).height($("body").height() + 50);

где TB_window - это div, в котором содержится Iframe .

body - тег тела aspx в iframe.

Этот скрипт привязан к содержимому iframe. Я получаю элемент TB_window с родительской страницы. Хотя это отлично работает в Chrome, но TB_window рушится в Firefox. Я действительно запутался / проиграл, почему это происходит.




Это полезно, когда вам нужно решение без jquery. В этом случае вам следует попробовать добавить контейнер и установить для него дополнение в процентах

Код примера HTML:

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

Код примера CSS:

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}



На всякий случай это помогает кому угодно. Я вытаскивал свои волосы, пытаясь заставить это работать, затем я заметил, что в iframe была запись класса с высотой: 100%. Когда я удалил это, все сработало, как ожидалось. Поэтому, пожалуйста, проверьте любые конфликты css.




Вы можете сослаться на соответствующий вопрос здесь. Как сделать ширину и высоту iframe такой же, как и ее родительский div?

Чтобы установить динамическую высоту -

  1. Нам нужно обмениваться данными с перекрестными iFrames и родителями
  2. Затем мы можем отправить высоту / высоту прокрутки iframe в родительское окно

И коды - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8




jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});



Вместо использования javscript / jquery самым простым способом я нашел:

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>

Здесь 1vh = 1% от высоты окна браузера. Таким образом, теоретическое значение высоты, которая должна быть установлена, равна 100vh, но практически 98vh сделала магию.




Немного улучшенный ответ на BlueFish ...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

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




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

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

К сожалению, все они могут дать разные ответы, и они несовместимы между браузерами. Если вы установите для поля тела значение 0, то document.body.offsetHeight дает лучший ответ. Чтобы получить правильное значение, попробуйте эту функцию; который берется из библиотеки github.com/davidjbradshaw/iframe-resizer которая также следит за сохранением iFrame правильного размера при изменении содержимого или изменении размера браузера.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}



Чтобы добавить к куску окна, которое, кажется, обрезается внизу, особенно когда у вас нет прокрутки, я использовал:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }



Я нашел ответ от Трои не работает. Это тот же код, который был переработан для ajax:

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});



Вы можете получить высоту содержимого IFRAME , используя: contentWindow.document.body.scrollHeight

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

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

Затем в теге IFRAME вы подключаете обработчик следующим образом:

<iframe id="idIframe" onload="iframeLoaded()" ...

iframeLoaded время назад у меня была ситуация, когда мне дополнительно требовалось вызывать iframeLoaded из самой IFRAME после того, как в iframeLoaded форма. Вы можете выполнить это, выполнив следующие действия в скриптах содержимого IFRAME :

parent.iframeLoaded();



Я обнаружил, что принятого ответа недостаточно, поскольку X-FRAME-OPTIONS: Allow-From не поддерживается в сафари или хром . Вместо этого пришел другой подход, который нашел в presentation Бен Винегаром из Disqus. Идея состоит в том, чтобы добавить прослушиватель событий в родительское окно, а затем внутри iframe использовать window.postMessage для отправки события родительскому сообществу, говорящему ему что-то делать (изменить размер iframe).

Поэтому в родительском документе добавьте прослушиватель событий:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

И внутри iframe напишите функцию, чтобы опубликовать сообщение:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

Наконец, внутри iframe добавьте onLoad в тег body, чтобы запустить функцию изменения размера:

<body onLoad="resize();">



Если вы хотите сделать гладкую прокрутку, попробуйте это:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Другим решением является метод JavaScript window.scrollTo:

 window.scrollTo(x-value, y-value);

Параметры:

  • x-значение - это пиксель вдоль горизонтальной оси.
  • y-значение - это пиксель вдоль вертикальной оси.




javascript jquery asp.net iframe