Как DiggBar динамически изменяет размер своего iframe в зависимости от содержимого, не находящегося в его домене?
Вопрос
Кто-то уже спрашивал, Как работает 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 */