Подгрузка содержимого в определенный блок

@svtbox · Регистрация: 09.01.2010

Студворк — интернет-сервис помощи студентам

Ребята, вопрос для вас наверное очень простой. Если например есть 10 страниц и в каждую помещен блок с одним и тем же содержимым, то как сделать так, чтобы не менять его содержимое в каждом хтмл-файле, а менять в отдельном файле с самим блоком, а джаваскрипт чтобы подгружал содержимое во все блоки 10 страниц. Интересет самый простой метод. Спасибо!

@Nazz · 26.01.2010, 18:51

нужно делать с помощью шаблонов...

@svtbox · 26.01.2010, 19:39 **[ТС]**

нужно делать с помощью шаблонов...

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

Добавлено через 6 минут
Нужно наверное что-то с области JavaScript onload, iframe или Ajax. Но я в этом не разбиряюсь...

Добавлено через 2 минуты
Нужно наверное что-то с области JavaScript onload, iframe или Ajax. Но я в этом не разбиряюсь...

Добавлено через 20 секунд
Нужно наверное что-то с области JavaScript onload, iframe или Ajax. Но я в этом не разбиряюсь...

@Ex_Soft · 26.01.2010, 20:02

Сообщение от svtbox

Интересет самый простой метод

HTML5
1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title>html# 1</title>
  </head>
  <body>
    <h1>html# 1</h1>
    <iframe src="iframe.html"></iframe>
  </body>
</html>

HTML5
1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title>html# 2</title>
  </head>
  <body>
    <h1>html# 2</h1>
    <iframe src="iframe.html"></iframe>
  </body>
</html>

HTML5
1
2
3
4
5
6
7
8
<html>
  <head>
    <title>iframe</title>
  </head>
  <body>
    <h1>iframe</h1>
  </body>
</html>

???

@Nazz · 26.01.2010, 20:36

можно сделать так, как у dataLife:

HTML5
1
2
3
4
5
<table ...>
<tr><td>{header}</td></tr>
<tr><td>{content}</td></tr>
<tr><td>{footer}</td></tr>
</table>

@svtbox · 26.01.2010, 20:58 **[ТС]**

Отлично! iframe - это то что нужно! Если продолжить тему: относятся ли к моей ситуации 2-й и 4-й недостатки айфреймов, приведенные вот по этой ссылке http://xpoint.ru/know-how/Java... Stranitsyi и если да, то как их понимать, устранить и вообще какие еще существуют моменты, о которых нужно помнить? И к стати, как скрыть рамку айфреймов от IE - ни border:none, ни border-width:0 не работает?

@Ex_Soft · 26.01.2010, 23:59

Сообщение от svtbox

как скрыть рамку айфреймов

HTML5
1
<iframe ...frameborder="0"...>

@svtbox · 27.01.2010, 13:49 **[ТС]**

Да, frameborder="0" - это самое простое решение. Спасибо.

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

@Ex_Soft · 27.01.2010, 14:50

Сообщение от svtbox

чтобы посетитель не смог в такой файл зайти, если просто допишет в адресную строку /name_iframe.html

тынць

@svtbox · 10.02.2010, 18:31 **[ТС]**

вопрос общий для всех кто знаком с этим: подскажите пожалуйста в каких случаях нельзя использовать iframe. Например, сам я пока увидел, что через него нельзя создать эффект увеличения фото через модальные окна. Какие еще есть подобные ограничения? Скажем, если сделать форму поиска через айфрейм, в который она будет подгружатся во все страницы, будет ли такая форма работать и т.д., чтобы я все случаи не проверял, может кто то их сразу все вспомнит

@svtbox · 11.02.2010, 19:32 **[ТС]**

еще вопрос: насколько понял, к ссылкам, которые всередине айфрейма нужно добавлять атрибут таргет, иначе страница загрузится всередину самого айфрейма. Хотя в таком случае страница по ссылке открывается на новой вкладке. А можно ли так чтобы она открывалась на той же вкладке, т.е. чтобы предидущая автоматически закрывалась?

@ostgals · 12.02.2010, 10:26

не бойтесь пользоваться jquery.

в <head></head> засовываем:

HTML5
1
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

где-то в body:

HTML5
1
2
<div id="something"></div>
<script type="text/javascript">$('#something').load('/path/content.html');</script>

@svtbox · 12.02.2010, 23:32 **[ТС]**

ostgals, спасибо за код, в некоторой мере он работает, но появились целых три проблемы:
1) код не работает коректно в Опере - ссылка появляется на секунду только в момент перезагрузки страницы и сразу исчезает (хотя в ФФ, ІЕ6 и 7 все работает без проблем);
2) страница открывается на место предидушей только если ссылка в обикновенном диве, а если она в iframe, тогда документ загружается в окошко этого фрейма;
3) нужно совместить js для перехода по ссылке в select и найти другой или доработать собственно для решения проблемы 1) и 2), т.е. чтобы можна было переходить по ссылках формы select, которая в iframe

HTML5
1
<iframe src="doc.html"></iframe>

doc.html

HTML5
1
2
3
4
<select onChange="if (this.selectedIndex > 0) document.location.href=this.options[this.selectedIndex].value">
<option value="http://www.google.ru">Link1</option>
<option value="http://www.yahoo.com">Link2</option>
</select>

Если можете подскажите как сделать это рабочим. Спасибо!

@ostgals · 13.02.2010, 00:16

Я не знаю.. Накидал пример и проверил в Опере, ИЕ и ФФ - все работает.

Привожу пример как есть:

test.html

HTML5
1
2
3
4
5
6
7
8
<html><head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head><body>
 
<div id="links"></div>
<script type="text/javascript">$('#links').load('links.html');</script>
 
</body></html>

links.html

HTML5
1
2
3
4
<select onChange="if (this.selectedIndex > 0) document.location.href=this.options[this.selectedIndex].value">
<option value="http://www.google.ru">Link1</option>
<option value="http://www.yahoo.com">Link2</option>
</select>

Список показывается.
При выборе второй ссылки весь документ перенаправляется на yahoo.

Распишите поподробнее задачу.

@Ex_Soft · 13.02.2010, 00:16

1.

Сообщение от svtbox

HTML5
1
>>>document<<<.location.href

1.1.

Сообщение от Дэвид Флэнаган. JavaScript. Подробное руководство

И наконец, не путайте свойство location объекта Window, ссылающееся на объект Location, со свойством location объекта Document, которое просто представляет собой доступную только для чтения строку без каких-либо особенностей, присущих объекту Location.

1.2.

Сообщение от javascript document location

Indicates the URL of the current document. This property was deprecated because it may conflict with the window.location property. Netscape 6 drops support for this property entirely. Use either the document.URL property, or, better, the window.location.href property.

1.3. HTMLDocument
1.4. Document Object

2.

Сообщение от svtbox

HTML5
1
this.options[this.selectedIndex].value

equ

HTML5
1
this.value

P.S. BTW, это, часом, не Вы занимаетесь кросспостингом?

@svtbox · 15.02.2010, 13:45 **[ТС]**

Накидал пример и проверил в Опере, ИЕ и ФФ - все работает.

Спасибо за пример, разобрался, теперь действительно работает.

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68

	Подгрузка содержимого в определенный блок 26.01.2010, 18:41. Показов 7038. Ответов 15 Метки нет (Все метки) Ребята, вопрос для вас наверное очень простой. Если например есть 10 страниц и в каждую помещен блок с одним и тем же содержимым, то как сделать так, чтобы не менять его содержимое в каждом хтмл-файле, а менять в отдельном файле с самим блоком, а джаваскрипт чтобы подгружал содержимое во все блоки 10 страниц. Интересет самый простой метод. Спасибо! 0

@Nazz 898 / 729 / 80 Регистрация: 12.03.2009 Сообщений: 2,804 Записей в блоге: 2
	26.01.2010, 18:51
	нужно делать с помощью шаблонов... 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	26.01.2010, 20:58 [ТС]
	Отлично! iframe - это то что нужно! Если продолжить тему: относятся ли к моей ситуации 2-й и 4-й недостатки айфреймов, приведенные вот по этой ссылке http://xpoint.ru/know-how/Java... Stranitsyi и если да, то как их понимать, устранить и вообще какие еще существуют моменты, о которых нужно помнить? И к стати, как скрыть рамку айфреймов от IE - ни border:none, ни border-width:0 не работает? 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	27.01.2010, 13:49 [ТС]
	Да, frameborder="0" - это самое простое решение. Спасибо. Теперь меня интересует другой вопрос - индексация. Где-то читал, что фреймы плохо индексируются. Что можете сказать и посоветовать. И к стати, как сделать, чтобы поисковик индексировал хтмл-файлы самих фреймов, но в то же время чтобы посетитель не смог в такой файл зайти, если просто допишет в адресную строку /name_iframe.html и чтобы страница фрейма не попадала в результаты поиска. В этих ньюансах я не очень ориентуруюсь. 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	10.02.2010, 18:31 [ТС]
	вопрос общий для всех кто знаком с этим: подскажите пожалуйста в каких случаях нельзя использовать iframe. Например, сам я пока увидел, что через него нельзя создать эффект увеличения фото через модальные окна. Какие еще есть подобные ограничения? Скажем, если сделать форму поиска через айфрейм, в который она будет подгружатся во все страницы, будет ли такая форма работать и т.д., чтобы я все случаи не проверял, может кто то их сразу все вспомнит 0

@svtbox 2 / 2 / 1 Регистрация: 09.01.2010 Сообщений: 68
	11.02.2010, 19:32 [ТС]
	еще вопрос: насколько понял, к ссылкам, которые всередине айфрейма нужно добавлять атрибут таргет, иначе страница загрузится всередину самого айфрейма. Хотя в таком случае страница по ссылке открывается на новой вкладке. А можно ли так чтобы она открывалась на той же вкладке, т.е. чтобы предидущая автоматически закрывалась? 0