1

Необходимо сделать подмену кода на странице (из HTML файла). Примерно все это изображено на схеме:

введите сюда описание изображения

Сделать это через .innerHTML не очень удобно, так как код очень большой и его нужно постоянно редактировать. Вариант замены из HTML файла будет значительно удобнее, впрочем, если существуют более простые варианты, с удовольствием хотел бы о них узнать. Так же, может быть несколько вариантов отображения для одного элемента. Упрощенный пример кода:

<div class="content">
<h1>Заголовок</h1>
<p>Текст</p>
</div>

<ul class="select-list">
    <li><a href="#">Вариант 1</a></li>
    <li><a href="#">Вариант 2</a></li>
    <li><a href="#">Вариант 3</a></li>
</ul>

При нажатии на один из пунктов, берем код из привязанного к этому пункту файла "site.com/code1.html" и делаем замену. Так же, было бы очень хорошо, если вариант выбора будет запоминаться браузером и при переходе по страницам оставлять выбранный вариант.

Буду благодарен за любые подсказки.

5
  • джаваскрипт не может залезть на диск и прочитать файл. для безопасности так сделали. можно только залезть из окна 1 в окно 2 при условии ,что окно 2 открылось из окна 1. по-моему, иннерХТМЛ - единственный вариант
    – Dimon
    1 сен 2016 в 8:39
  • С небольшой помощью jquery библиотеки можно сделать так, как указано тут. ссылка Оно загрузит ваш html в выбранный блок $('#result').load('your_page.html #Your_container_with_html');
    – alexoander
    1 сен 2016 в 8:39
  • Ок, а что если сделать страницу внутри сайта в которой под разными классами будет находится код? Через GET запрос получить код и вставить в нужное место. Это возможно? 1 сен 2016 в 8:47
  • Если пресловутые HTML-файлы лежат на сервере, то, возможно, Вам будет достаточно использовать iframe и просто изменять значение атрибута src.
    – Yaant
    1 сен 2016 в 9:36
  • Почему именно html формат? Необходимую разметку и содержание можно прописать и в пхп, и подгружать аяксом по клику.
    – pepel_xD
    1 сен 2016 в 10:33

1 ответ 1

2

Встраивание готовой html-страницы в другую html-страницу делается с помощью фреймов. Это единственный способ встраивать полноценный html в другой html.

<iframe id="myframe" target="frametarget" src="http://mysite.com/page1.html"></iframe>

Навигация в таком фрейме осуществляется путём изменения свойства src:

$("#myframe").attr("src", "http://mysite.com/page2.html")

Или ссылками вида:

<a href="http://mysite.com/page3.html" target="frametarget">MyLink</a>

Однако, сейчас такой подход многими считается устаревшим. Отношение верстальщиков к встраиванию html-страниц целиком в другие страницы с помощью фреймов, примерно такое же, как у программистов к оператору goto. Причина негативного отношения связана с тем, что сайты с фреймами плохо индексируются поисковиками, содержимое фреймов сбрасывается при обновлении страницы, возникают проблемы при печати таких страниц и нажатии кнопок "назад"/"вперёд".

В качестве альтернативы можно попробовать:

  1. Какие-либо javascript-шаблонизаторы
  2. xslt-трансфомацию (wiki, учебник на W3C)
  3. Передачу данных в формате JSON

В каждом, из этих трёх случаев, перед тем, как ототображать данные тем или иным способом, их нужно будет получить с сервера. Наиболее простой способ - использование jQuery ajax ([1], [2]).

Конечно же, остаётся вариант с серверной генерацией страницы целиком.

1
  • Спасибо. Буду пробовать реализацию через фрейм. 1 сен 2016 в 14:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.