Просмотр полной версии : Размеры фреймов и JavaScript
Знатоки подскажите, как решить казалось бы простую задачу.
Имеется три обычных (не плавающих) фрейма, один вверху, два внизу.
Как нажатием кнопки в верхнем фрейме изменить соотношение размеров двух нижних фреймов?
При этом важно, чтобы код работал во всех современных браузерах.
Пробовал вариант обращения к элементу frameset основного создающего фреймы документа: например, если у задающего нижние фреймы элемента frameset свойство name = N, то изменить размеры нижних фреймов удаётся установкой свойства cols этого framesetа, то есть конструкцией, например, вида parent.N.cols = '23%,*'.
Удаётся, но только в Internet Explorer, в других браузерах (Google Chrome, Mozilla Firefox и им подобных) этот код не срабатывает.
Мастера, помогите создать кроссбраузерный код.
dmitriymar
22.03.2012, 12:56
http://oooportal.ru/?cat=article&id=1009
Спасибо, dmitriymar, за ссылку на неплохую статью, в которой описано как разрешаются ссылки при работе фреймами.
Но ответа на то, как изменять размеры фреймов, к каким свойствами и каких элементов необходимо при этом обращаться, я в этой статье так и не нашёл (если я не заметил того, что должен был заметить, просьба ткнуть носом)).
Давно пытаюсь решить эту задачу, во всех хороших найденных мною статьях описывается лишь то как обращаться к фреймам и их содержимому, но ничего не говорится о том как управлять размерами самих фреймов.
А очевидное, приведённое мною, решение с использованием свойства cols, почему-то работает только в IE, может быть есть какие-нибудь управляющие размерами свойства, наподобие, width и height, но описание подобных свойств я также не встречал.
пропиши style (<iframe id="my_frame" ... style="width:500px;height:500px;">), потом получай свой элемент и меняй ему так как тебе нужно.
$('#my_frame').css('width','100px') - установил ширину 1000px
Спасибо за ответ, ychetka, но данное решение логично для плавающих фреймов (вначале я указал, что речь не про них), возможно я просто не понимаю как применить этот способ к обычным фреймам, если знаешь, подскажи.
Что касается того, что я использую структуру именно из обычных, а не плавающих фреймов, связано с тем, что у них возникают проблемы при масштабировании страницы, а именно в определённый момент масштабирования двух рядом расположенных и растянутых во высоте и в совокупности по ширине на весь экран элементов <iframe> происходит соскакивание правого фрейма вниз под фрейм, который был для него левым.
ну во первых в твоем случае неважно к какому, плавающий, или не плавающий, фрейму ты применишь style="width:500px;height:500px;". Есть элемент, ты его получаешь и устанавливаешь его размер. А насчет того что у тебя ломается разметка страницы, при использовании iframe, это вообще не проблема, ты где-то ошибся в плане верстки, попробуй позиционировать iframы, style="position:(absolute,relative,fixed)"
Поясни, пожалуйста, ychetka, каким образом применить атрибут style к обычным фреймам, обычным фреймы задаются в установочном файле и обрамлены тегами frameset, перебить свойство cols этих тегов заданием свойств width и height для атрибута style в теге frame лично у меня никак не получается.
dmitriymar
24.03.2012, 17:33
попробуйте через getTagName("N")[0].cols
Почему вы так упорно не хотите использовать iframe ? там операции со сменой размеров в рамках одного домена делаются именно style="width:500px;height:500px;position:"
Насчет frameset попробуйте задать так (у меня уверенности что это будет работать везде)
<frameset rows="*" cols="*">
<frame tyle="width:500px;height:500px;" src="" id="" name="">
Так как добиться результата предложенными вами способами, dmitriymar и ychetka, у меня никак не получается, попробую конкретизировать свой вопрос.
Имеется два файла index.htm и button.htm: первый является установочным для фреймов, второй содержит кнопку, по нажатию которой будет происходить изменение соотношения размеров этих фреймов.
Привожу значимое содержимое этих файлов.
index.htm:
<frameset name="M" id="M" rows="10%,*" >
<frame name="f1" id="f1" src="button.htm" scrolling="no" noresize>
<frameset name="N" id="N" cols="50%,*" >
<frame name="f2" id="f2" src="button.htm" scrolling="auto">
<frame name="f3" id="f3" src="button.htm" scrolling="auto">
</frameset>
</frameset>
button.htm:
<button onclick="parent.N.cols='10%,*'">Button</button>
Данный код, как я уже и отмечал, работает только в IE.
Внесите в код этих двух файлов необходимые предложенные вами изменения, чтобы получился работоспособный кроссбраузерный код.
Может быть просто не существует кроссбраузерного решения
Эй, народ, неужели нет ни одного знатока, способного ответить на этот вопрос??
Про frameset-ы все уже забыли, как страшный сон, а вы зачем-то трупик палкой тыкаете.
Да пока ещё не совсем трупик, можно и потыкать
bes,
<button onclick="parent.document.getElementsByTagName('frameset')[1].cols='10%,*'">Button</button>
Спасибо, конечно, рони, что подключился, но варианты обращения через name, id, имена тегов нормально работают в IE, а в других браузерах (например, хроме) упорно не пашут, в чём здесь загвоздка я никак и не пойму.
bes,
как обращаться по имени тега кросбраузерно вариант выше, по id будет так :
<button onclick="parent.document.getElementById('N').cols='10%,*'">Button</button>
по имени :
<button onclick="parent.document.getElementsByName('N')[0].cols='10%,*'">Button</button>
По теме читать Поиск элементов в DOM (http://learn.javascript.ru/searching-elements-dom)
рони, то как реализовывать эти варианты понятно.
как обращаться по имени тега кросбраузерно вариант выше
<button onclick="parent.document.getElementsByTagName('frameset')[1].cols='10%,*'">Button</button>
Скажи, рони, у тебя этот вариант в хроме срабатывает (у меня нет).
bes,
Залейте ваши файлы в инет, на компьютере в хроме не даст политика безопасности проверить
http://learn.javascript.ru/files/play/4f/7a/4f7abd4559244.htm
Вот это стоящий ответ, рони, спасибо!!
Мысль о том, что дело в самом браузере мне наверное точно бы сама не пришла в голову.
Но даже на вашем работающем примере обнаруживаются странные особенности, связанные с соотношением программного и ручного изменения размеров фрейма:
1) обработчик onclick срабатывает только один раз (после ручного изменения размеров обработчик уже не срабатывает),
2) если перед нажатием на кнопку увеличить (если уменьшить, то всё нормально) вручную размер левого фрейма, то соотношение размеров фреймов уже не будет "10%, *" как задано в обработчике.
Что это теперь за хрень и что с этим делать?
С такими особенностями, вероятно, действительно придётся заколотить последний гвоздь в крышку гроба обычных фреймов.
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot