it-swarm-ru.tech

Загрузка файла HTML в DIV со ссылкой

Есть несколько тем на эту тему, но ни одна не полностью отвечает на мой вопрос. 

Я хотел бы иметь возможность иметь ссылку, которая загружает весь файл HTML в DIV.

Это, например, загрузит только текст в мой DIV "MainBack". Работает нормально:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<p>1</p>';">Computing</a>

но я хотел бы загрузить в него весь файл следующим образом:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = 'HTML FILE';">Computing</a>

Любой совет? Я довольно новичок в этом!

9
Mark Brewerton

Вы можете использовать <iframe> только для этого:

<iframe src="link.html" width="100%" height="300"></iframe>

Live Demo

Код:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\' scrolling=\'no\' frameborder=\'0\' width=\'100%\' height=\'600px\'></iframe>'">Computing</a>

Или вы можете использовать лайтбокс, чтобы сделать это очень красиво ...

Будет отображаться; фотографии, видео, HTML ... в основном все, что вы хотите.

7
Myles Gray

Используя API-интерфейс jQuery ajax, вы можете получить содержимое определенного тега внутри документа с некоторого URL-адреса:

<a href="#computing" 
   onclick="$('#MainBack').load('/path/file.html body')"
>
    Computing
</a>

Важный:

  1. #MainBack - это идентификатор тега-заполнителя в вашем родительском документе
  2. /path/file.html идентификатор URL документа, из которого вы хотите загрузить данные
  3. body - это тег, содержащий контент, который вы хотите загрузить.

Что может пойти не так:

  • проверьте № 1 выше, есть ли у вашего родительского документа тег с точным идентификатором, который вы используете в вызове ajax?
  • проверьте # 2, вы можете загрузить URL в отдельном окне браузера?
  • если вы можете загрузить URL-адрес, используйте опцию «Просмотр источника», чтобы проверить источник HTML и убедиться, что у вас есть селектор, который вы используете в # 3 выше. Возможно, нужный вам контент генерируется динамически из JavaScript, а не обслуживается HTTP-сервером, в этом случае используйте решение iframe из другого ответа.
  • проверьте консоль JavaScript и найдите какое-либо сообщение о междоменных проблемах, CSRF, CORS и т. д. Если контент из другого домена, вы можете наткнуться на правила безопасности браузера; это совершенно новая банка червей, и я не буду здесь рассказывать о возможных решениях, возьму сообщение об ошибке из консоли и Google для него. 
6
Paulo Scardine
<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\'></iframe>'">Computing</a>

-> Демо <-

1
Shaz

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

<html>
  <head></head>
  <body>
    <div>
      <html>
      ...
      </html>
  </body>
</html>

Может быть, то, что вы ищете, это iframe? Небольшое «окно» на вашей странице на другую страницу?

Если iframe вам не подходит, взгляните на эту функцию Jquery, которая загружает HTML из другого источника в указанный вами селектор: http://api.jquery.com/load/

0
Mārtiņš Briedis

Вы можете загрузить содержимое HTML из другого файла с помощью метода jQuery ".load ()".

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

<script> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Во-вторых, добавьте этот код в раздел HEAD, чтобы загрузить содержимое в DIV:

<script>
$(document).ready(function() {
    $('#MainBack').load('html-content-file.html');    
});
</script>

Пример содержимого html-content-file.html:

  <a class="brand" href="#">240Dots</a>
  <div class="navbar-content">
    <ul class="nav">
      <li>
        <a href="index.html">Inicio</a> 
      </li>
      <li>
        <a href="quienes-somos.html">Quienes Somos</a> 
      </li>
      <li>
        <a href="servicios.html">Servicios</a> 
      </li>
      <li>
        <a href="contactar.html">Contactar</a>
      </li>
    </ul>
  </div>

Дополнительная информация: http://docs.jquery.com/Ajax/load

0
Tony S.

Используйте document.getElementById('element').innerHTML = 'HTML SOURCE' с событием javascript. Это работает полностью без проблем.

0
Pushpendu Ghosh