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

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

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

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

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

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

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

Источник

5 ответов

Решение

Если вы посмотрите на их 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, который связан с событием windows onresize, и сделайте так, чтобы тело изменяло размер до размера окна.

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

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

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

Источник

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 */
Источник

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

Источник
Другие вопросы по тегам