Какая правильная структура для отображения html плюс исходная страница?

Question

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

<frameset rows="200,2*"> 
    <frame name="info> 
     <h3>Stack Overflow</h3> 
     <p>A site for programming questions</p> 
    </frame> 
    <frame name="site" src="http://stackoverflow.com"> 
</frameset> 

Что такое правильный способ сделать это?

Answer 1

Вы можете использовать что-то вроде этого:

В вашей HTML странице, используйте:

<iframe src="get.php?url=http://google.com"></iframe> 

А потом, вы создаете PHP (или ваш язык сервера) страницы:

<?php 
header('Content-Type: text/plain; charset=utf-8'); 
echo file_get_contents($_GET['url']); 
?> 

Таким образом вы можете загрузить любую веб-страницу, и вы даже можете изменить ее с помощью javascript без перезагрузки вашей html-страницы. Но имейте в виду, что каждый может получить любую веб-страницу, используя вашу страницу get.php.

Answer 2

Есть несколько способов сделать это:

• Вы можете поместить HTML-исходный код либо внутри <pre> блока, который оставляет его сырым, но она может сломаться, если ваш сам HTML-источник содержит <pre> блок.
• Вы избегаете HTML-кода спереди, например. с помощью одного из инструментов онлайн, как http://www.htmlescape.net/htmlescape_tool.html
• Вы можете загрузить HTML-код с JavaScript, например, с помощью JQuery и поместите его в <div> с помощью text функции JQuery

Answer 3

Поскольку это не 1994 год, лучший способ - не использовать фреймы. Шутки в сторону иногда кадры могут быть полезны, но их следует избегать, если это возможно. Причины этого:

1. Вы создаете совершенно новый объект окна. Если вам не нужен новый объект окна, вы теряете память.
2. Некоторые поисковые системы не использовали URL-адреса в фреймах. Возможно, это не так для адресатов в том же домене, но все равно может изменить порядок ранжирования ваших страниц, и если вы не знаете, что делаете, вы не должны использовать фреймы для сайтов, которые вы хотите проиндексировать.

Если вам нужно использовать фреймы, вам нужно будет использовать отдельный файл html для каждого фрейма, или вы можете использовать iframe. Но iframe все еще приходит с вышеупомянутыми оговорками.

Вы также можете динамически загружать div или td с помощью JavaScript (jQuery, prototype, mootools и т. Д.) Может помочь), но с точки зрения SEO, которая даже хуже, чем фреймы, и должна быть зарезервирована для приложений, требующих входа в систему, даже тогда они перестанут работать.

Ближайшей вещью к набору фреймов с точки зрения позиционирования является таблица. Вы можете оставить одну ширину столбца неуказанной и установить ширину таблицы до 100%, и этот столбец займет максимальное пространство, доступное, например, в наборах «*» в атрибуте rows. Однако высота таблицы не может быть установлена ​​на 100% окна без javascript, поэтому вы не можете сделать то же самое для высоты и строк. Здесь абсолютное позиционирование поможет больше, чем таблица.Например,

<div style="position: absolute; top: 0px; bottom: 0px; width: 100%"> 
    <div style="height: 200px; width: 100%; background: red;">Fixed Row</div> 
    <div style="position: absolute; top: 200px; bottom: 0px; width: 100%; background: blue">Fluid Row</div> 
</div> 

Будет вести себя как строки кадров, если они являются корневым элементом. Чтобы работать внутри другого элемента, элемент должен иметь ширину, высоту и положение: относительный.

Установка фиксированной высоты и переполнения: прокрутка в стиле любого элемента, например, td или div, в предыдущих примерах даст ему полосы прокрутки, такие как кадр. Затем вы можете иметь все данные на одной странице или включать iframe со 100% шириной и высотой для контента на другом URL-адресе, хотя, как я упоминал, такие же оговорки применяются, как и к набору фреймов.