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

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

0 голосов
/ 20 июля 2011

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

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

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

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

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

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

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

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

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

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

Спасибо

Краткое описание:

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

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

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

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

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

В основном это JQuery ( '# iframeWrapper') высота ('61% ');.

1 Ответ

2 голосов
/ 20 июля 2011

Это короткая демонстрация 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 для вызова содержимого в #holder div вместо использования iFrame

...