Как DiggBar динамически изменяет размер своего iframe в зависимости от содержимого, не находящегося в его домене?

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

  •  09-09-2019
  •  | 
  •  

Вопрос

Кто-то уже спрашивал, Как работает DiggBar? в предыдущем вопросе.

Хотя кто-то дал достойный ответ, он не затронул одну вещь:

Как Digg динамически изменяет размер своей высоты iframe, основываясь на содержании сайта в другом домене?

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

Есть ли у кого-нибудь из веб-программистов SO представление о том, как им это удалось?

Примечание:iframe НЕ просто установлен на 100% высоту.Тег iframe просто так не работает.Погуглите «100% высота iframe», и вы поймете, что я имею в виду.

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

Решение

Если вы посмотрите на их CSS, они используют height: 100% для iframe:

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

Они размещают DiggBar над ним на высоте 46px, Итак iframe занимает 100% оставшегося пространства.Они используют overflow: hidden на body элемент, позволяющий сохранить iframe полностью в пределах вертикальной высоты страницы, вместо того, чтобы позволять странице прокручиваться.Это означает, что полоса прокрутки появится внутри iframe, а не на всю страницу.Обратите внимание, что DiggBar работает только в режиме совместимости в Firefox;ниже описано, как это сделать в стандартном режиме.

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

редактировать:Для тех, кто мне не верит, вот небольшой пример.Чтобы он заполнил все пространство, вам нужно установить отсутствие границ, и вам нужно <body> не иметь маржи.

редактировать 2:Ах, извини, я понимаю, о чем ты говорил.Вам нужно overflow: hidden на body тег, чтобы полоса прокрутки работала так, как вы хотите.

редактировать 3:Похоже, вам нужно быть в режиме совместимости, чтобы это работало в Firefox;если вы включите <!DOCTYPE html> декларацию, которая переводит вас в стандартный режим, и ваш iframe выходит слишком маленьким.

редактировать 4:Ах, вы также можете сделать это в стандартном режиме в Firefox.Получил ответ здесь.Вам необходимо установить высоту на <html> и <body> элементы для 100% также.(Обратите внимание, что <!DOCTYPE html> это тип документа для HTML 5, работа над которым находится в стадии разработки;однако он работает во всех современных браузерах при включении стандартного режима).

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

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

Часть проблемы с HTML заключается в том, что вы не можете просто установить элемент чего-либо на высоту 100% и занять все пространство окна.Один из способов сделать это — задать для тела высоту окна в пикселях, а любая вещь внутри тела, установленная на 100%, будет размером окна.

По сути, просто создайте JavaScript, который привязывается к событию onresize окон и изменяет размер тела до размера окна.

вот пример, который я сделал с помощью jQuery

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

Благодаря этому вы сможете установить элемент div или другой элемент и заставить его работать на всю высоту окна.

В режиме совместимости iframe может иметь высоту 100%.Digg достигает этого, опуская тип документа.

iFrame находится на веб-сайте Digg, внутри которого находится целевой веб-сайт, а не наоборот.Для iFrame задана 100% ширина и высота.

100% в iframe — это 100% процента объявленного родительского пространства.Пример:

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top