| |
|
|
| | В документе есть ифрейм. Как сделать чтобы при изменении количества содержимого ифрейма автоматически измелялась его высота? Можно сделать определенные размеры, но если содержимое больше этих размеров содержимое становится не видимым. Без полосы прокрутки нужно! | |
| |
|
|
| |
|
|
| |
для: denisich84
(01.04.2009 в 14:24)
| | | Я недавно эту тему на форуме размещал. Никто толком мне не помог. Пришлось самому всё делать и разбираться (наоборот вернее). Но я с радостью тебе помогу. Всё это дело делается на JS. Других способов я не нашёл.
По ходу буду объяснять все проблемы возникшие у меня на пути создания такого ЧУДА.
Значит так. У меня была страничка с меню и ифреймом. По кликам на ссылки меню, в ифрейм вставлялись странички.
На одно из форумов мне посоветовали вот такой код вставить в самый низ HTML страничек (которые будут открываться в ифрейме) между тегами <BODY> </BODY>
<script language="javascript">
if(parent.document.getElementById('ID твоего ифрейма')) {
parent.document.getElementById('ID твоего ифрейма').height = document.body.scrollHeight+10;
}</script>
|
Всё было пучком и работало. Я был счастлив! Потом хресь, и я заметил косяк. Если нажимаю на ссылку меню, по которой открывается в ифрейме страничка высотой например 1000 пикселей, то ифрейм растягивается по содержимому, а если потом открываю страничку с высотой 500 пикселей, то ифрейм не стягивается обратно. Те. этот скрипт только растягивает высоту ифрейма, но стягивать не может! Но выход я нашёл! Вставляем почти такойже скрипт, только в начало этого документа. Опять же между тегами <BODY> </BODY>
<script language="javascript">
if(parent.document.getElementById('ID твоего ифрейма')) {
parent.document.getElementById('ID твоего ифрейма').height = 1;
}</script>
|
Теперь объясню... При нажатии на ссылку меню, открывается страничка в ифрейме, верхний скрипт стягивает его до размера в 1 пиксель, а нижний (который выполнится когда страница загрузится) растягивает его по содержимому. В итоге наша страничка должна выглядеть ТАК:
<html>
<BODY>
<script language="javascript">
if(parent.document.getElementById('ID твоего ифрейма')) {
parent.document.getElementById('ID твоего ифрейма').height = 1;
}</script>
А тут располагай всё что тебе надо!
А тут располагай всё что тебе надо!
А тут располагай всё что тебе надо!
<script language="javascript">
if(parent.document.getElementById('ID твоего ифрейма')) {
parent.document.getElementById('ID твоего ифрейма').height = document.body.scrollHeight+10;
}</script>
</BODY>
</html>
|
Вооооот. Всё, думаешь? ФИ-ГУШ-КИ! Не проходит и 10 минут и я напарываюсь на ещё одну проблему. Фрейм растягивается под каждую страничку - это хорошо. Но проблема в том, что он растягивается только при загрузке этой страницы в него и никогда более. Предвещая твой последующий вопрос: "А когда ещё-то надо?". сразу же отвечаю. Выполнение этого скрипта (а точнее обоих скриптов) необходимо ещё при манипуляции с окном браузера, а именно его шириной. Если растянуть окно браузера или сжать по ширине, то содержимое ифрейма будет увеличивать высоту или уменьшать, но высота ифрейма меняться не будет. Ну, что тут поделать, прийдётся отлавливать изменение ширины окна (того окна на котором меню и ифрейм).
Делаем это так:
1) ставим таймер в документе где находится меню и ифрейм, для этого в первый тег <BODY> вставляем такой код
onload="window.setInterval('myFunc()',1000)"
|
В итоге должно выглядеть так:
<body onload="window.setInterval('myFunc()',1000)">
|
Значит действует это так: когда загрузится эта страница, каждую секунду выполнять функцию myFunc()
А вот и код функции, которую таймер должен выполнять
<script>
var ww;
function myFunc()
{
if (ww!=window.document.body.scrollWidth)
( document.getElementById('ID твоего ифрейма').height = 1);
ww=window.document.body.scrollWidth;
document.getElementById('ID твоего ифрейма').height =
window.frames ['ID твоего ифрейма'].document.body.scrollHeight;
}
</script>
|
Код этой функции вставь между тегами <HEAD> </HEAD>.
В итоге твоя главная страничка должна выглядеть так:
<html>
<HEAD>
<script>
var ww;
function myFunc()
{
if (ww!=window.document.body.scrollWidth)
( document.getElementById('ID твоего ифрейма').height = 1);
ww=window.document.body.scrollWidth;
document.getElementById('ID твоего ифрейма').height =
window.frames ['ID твоего ифрейма'].document.body.scrollHeight;
}
</script>
</HEAD>.
<BODY onload="window.setInterval('myFunc()',1000)">
Тут твоё меню и ифрейм
</BODY>
</html>
|
Вот теперь вроде бы всё! Надеюсь разберёшься. У меня сайт у самого на таком "живом" ифрейме сделан. Удачи! | |
| |
|
|
| |
|
|
| |
для: blackcement
(01.04.2009 в 16:18)
| | | Если кто-то хотел бы поправить код, то я рад выслушать... | |
| |
|
|
| |
|
|
| |
для: blackcement
(02.04.2009 в 08:45)
| | | Радуйтесь на здоровье!
CNTv2.0 (а до этого CNT) - это мои старые никнеймы на этом форуме (терял пароли - придумывал новый).
Да и лично вам я (уже с текущим никнеймом) на ваш вопрос отвечал - http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=63288&page=1 - однако, вы пишете, что "Никто толком мне не помог".
Нехорошо это с вашей стороны.
Ваши ужимки и прыжки с использованием setTimeout явно показывают в вас ищущую натуру.
Это похвально!
Однако, вы забыли об исходном событии, с коим вы "боретесь", а именно - забыли о том, что боретесь вы с ИЗМЕНЕНИЕМ РАЗМЕРОВ родительского окна.
Зачем ежесекундно проверять, если можно поставить "флажок" именно на событие "изменение размеров"?
Реализуется это очень просто - в заголовке документа (между <head> и </head>) прописываете скриптовой блок, в котором содержится инструкция для window.onresize
СМЫСЛ этой инструкции ТОЧНО ТАКОЙ ЖЕ, что и при событии onload у тега <IFRAME>
Оформляется это в виде имени той же функции myFunc, что и в первой моей ссылке:
<head>
<script>
window.onresize = myFunc;
</script>
</head>
|
Или в виде функции, которая содержит ту же строку, что и во второй моей ссылке, только this надо заменить на вызов ифрейма:
<head>
<script>
window.onresize = function ()
{
document.getElementsByName ('myIFR') [0].style.height = window.frames.myIFR.document.body.scrollHeight + 36 + 'px';
}
</script>
</head>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(02.04.2009 в 11:22)
| | | Да, Вы мне помогли. Прошу прощения.... Но этот код
<iframe src="file.htm" name="myIFR" onload="this.height = window.frames.myIFR.document.body.scrollHeight + 36"></iframe>
|
мне всё равно не подошёл. Ифрейм не стягивался после открытия документа меньшего по высоте чем предыдущий. А вот приведённые скрипты сейчас буду тестить. Спасибо!
А, вот ещё вопросик... onload="myFunc ()" для ифреймов во всех браузерах работает, а то что-то не получалось у меня никакую функцию таким способом вызвать. | |
| |
|
|
| |
|
|
| |
для: blackcement
(02.04.2009 в 12:48)
| | | Проверьте в любом из браузеров:
<script>
function myFunc ()
{
alert ('Yes');
}
</script>
<iframe onload="myFunc ()"></iframe>
|
Не знаю, как у вас, но у меня алерт срабатывает ВО ВСЕХ имеющихся браузерах и срабатывает даже при отсутствии атрибута SRC у тега IFRAME.
Я, напротив, полагал, что у вас возникнет проблема - как избавиться от этого срабатывания при "псевдозагрузке", т.е. когда в ифрейм ещё ничего не загрузили?
На всякий случай сообщу один из вариантов решения этой проблемы:
Вводится "флаг" (глобальная переменная), который имеет начальное значение false и которое меняется на true после первого срабатывания:
<script>
var P = false;
function myFunc ()
{
if (!P) P = true;
else alert ('Yes');
}
</script>
<iframe id="IFR" onload="myFunc ()"></iframe>
<input type="button" onclick="document.getElementById ('IFR').src = 'http://google.com/'" value="Грузим">
|
| |
| |
|
|
