Как DiggBar динамически изменяет высоту своего iframe, основываясь на контенте, не принадлежащем их домену? - PullRequest
Новая
       20

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

6 голосов
/ 16 апреля 2009

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

Хотя кто-то давал достойный ответ, это не касалось одной вещи:

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

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

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

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

Ответы [ 5 ]

18 голосов
/ 16 апреля 2009

Если вы посмотрите на их 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;
}

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

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

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

edit 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>
2 голосов
/ 16 апреля 2009

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

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

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

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

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

1 голос
/ 02 декабря 2009

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

0 голосов
/ 15 марта 2014

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 */
0 голосов
/ 16 апреля 2009

iFrame находится на сайте Digg с целевым сайтом внутри, а не наоборот. IFrame настроен на 100% ширины и высоты.

...