Нужна альтернатива HTML-фреймам (теперь я знаю, почему они злые)

Подводя итог, я пытаюсь сделать живую визуализацию страницы (просматривать веб-сайты), имея наложенное меню для функциональности.

Возможно, я ошибся в разработке своего приложения, и мне нужна альтернатива фреймам. Любые советы по этому поводу приветствуются.

Таким образом, целью приложения является анализ веб-контента. У него есть глобальное меню с обычными вещами: профиль, выход, настройки. Глобальный нижний колонтитул со стандартными юридическими данными и посередине — это место, где вступают в действие все функции.

Я знал, что одной из функций была живая визуализация сайта с наложением меню внизу. С его помощью они могли просматривать элементы и писать комментарии к тому, что там было.

Каждая функция была встроена во фрейм, поэтому, если я нажму кнопку просмотра страницы, фрейм переместится на страницу фрейма и передаст ее. Вот проблема. Чтобы получить живой рендер сайта и использовать его таким образом, мне пришлось поместить фрейм внутри фрейма, и таким образом родились дублирующиеся полосы прокрутки.

Если кто-то запутался в том, как работает макет, здесь есть 2 снимка. http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=pageviewlayout.jpg И более чистая модель дизайнера (в основном просто глобальное меню) http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=globalview.jpg

У меня есть кодирование, а для наложения меню я пробовал как аккордеон, так и стиль CSS, который скользит. Вы можете взглянуть на код здесь.

ГЛОБАЛЬНОЕ МЕНЮ: сохраните его как global.html.erb http://paste.ubuntu.com/648135/

ПРОСМОТР СТРАНИЦЫ: сохраните это как pageview.html.erb http://pastebin.ubuntu.com/648146/ Как только вы это сделаете, все должно работать так, как вы ожидаете.

Технология или то, как это делается, является вариантом, но дизайн - нет. Просто посмотрите сейчас на вид страницы в нижней части живого веб-сайта, но над нижним колонтитулом. Должно быть наложенное меню, которое скользит наружу. Если у кого-то есть идеи, как реализовать живой просмотр сайта и накладное меню, я весь в ушах.

Спасибо

Краткое резюме:

Чего я пытаюсь добиться, так это приложения с глобальным меню, которое остается единым на всех страницах. В середине этого глобального меню находится рамка, которая ведет к другим страницам, которые я создал, например, просмотру списка, статистике и просмотру страницы.

Просмотр страницы — это то, над чем я сейчас работаю. В представлении страницы есть 2 компонента: просмотр веб-сайта в реальном времени (независимо от того, какую страницу они хотят) и наложенное меню внизу. Думайте, как плейлист YouTube внизу страницы. Проблема в том, что для того, чтобы поместить этот живой рендер веб-сайта во фрейм, у вас есть iframe внутри iframe, и я пытаюсь решить эту проблему.

Но вместо того, чтобы рассматривать это как ошибку, я ищу альтернативы тому, как я могу достичь вышеуказанного.

Мое окончательное решение доступно на pastebin: просмотр страницы: http://paste.ubuntu.com/648246/

Общий вид: http://paste.ubuntu.com/648250/

В основном это jQuery('#iframeWrapper').height('61%');


javascript html css frames
person overtone    schedule 20.07.2011    source источник
comment
Фреймы не это зло, у них есть свое место. Просто прикрепите overflow:hidden к элементу, на котором вы не хотите использовать полосы прокрутки.   -  person benhowdle89    schedule 20.07.2011
comment
Я изучу это, но, возможно, у вас есть какие-то советы по поводу альтернатив? Возможно, поэтому единственный кадр, который я использую, это тот, который находится на живом рендере?   -  person overtone    schedule 20.07.2011
comment
Хм, я немного смущен тем, чего вы пытаетесь достичь....   -  person benhowdle89    schedule 20.07.2011
comment
Этого можно было бы избежать, если бы я мог указать% высоты отображаемого кадра, но, к сожалению, это не работает для встроенных кадров.   -  person overtone    schedule 20.07.2011
comment
@benhowdle89 Я напишу краткое резюме внизу вопроса, чтобы было немного понятнее.   -  person overtone    schedule 20.07.2011

Ответы (1)


arrow_upward
2
arrow_downward

Это краткая демонстрация CSS и div — возможно, вы сможете делать то, что хотите, используя этот метод.

<style type="text/css">
#holder {position:absolute;left:0;top:0;width:425px;height:350px;z-index:1;}
#menu {position:absolute; left:0;top:300px;height:50px;background-color:#f0f;width:425px;z-index:10;}
</style>

<div id="holder">

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>

<div id="menu">Nav / whatever goes here</div>

Также есть возможность использовать ajax для вызова содержимого в div #holder вместо использования iFrame.

person Doug McK    schedule 20.07.2011
comment
В основном, это. В наши дни обычным делом является обновление с помощью ajax или iframe. - person Marcin; 20.07.2011
comment
позиционирование было проблемой. Я установил его фиксированным и всегда плавающим влево. Это не ответило на вопрос, но заставило меня вздрогнуть. Мне удалось это исправить, и я опубликовал решение для всех, кто ищет. Вы получаете высшие оценки за упоминание ajax, так как это привело меня к хорошему руководству по jquery для изменения размера iframe после щелчка. - person overtone; 20.07.2011