Загрузить html-содержимое на страницу html

Прежде чем кто-нибудь отметит этот вопрос как дубликат, я провел много исследований по этому вопросу, и пока не смог найти решение моей проблемы. Итак, у меня есть файлы header.html и footer.html, и я хочу загрузить их содержимое на новую страницу html (пытаясь не повторять код). Я знаю, что я могу сделать это в php очень просто, но я пытаюсь сделать это с помощью JQuery (просто начал в него копаться). Это мой код до сих пор:Загрузить html-содержимое на страницу html

<!DOCTYPE html> 
<html> 

    <head> 
      <link rel="stylesheet" type="text/css" href="./style.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

      <script> 
       $(function(){ 
        $('#filename').load("footer.html"); 
       }); 
      </script>  
    </head> 

    <body> 

     <div id="filename"></div> 

    </body> 
</html>

Я получаю следующее сообщение об ошибке:

jquery.min.js:5 XMLHttpRequest cannot load file:///C:/Users/...../footer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery.min.js:5ajax @ jquery.min.js:5b.fn.load @ jquery.min.js:5(anonymous function) @ index.html:10c @ jquery.min.js:3fireWith @ jquery.min.js:3ready @ jquery.min.js:3H @ jquery.min.js:3

источник

2016-09-11 Anonymous

Вы действительно не должны нагружать верхние и нижние колонтитулы таким образом; Это увеличивает количество запросов, которые ваша страница должна сделать. То, что вам нужно, это верхний и нижний колонтитулы на «базовой» странице, которая импортирует страницы содержимого. – Soviut

Какова полная ошибка кросс-происхождения, которую вы получаете? Можете ли вы показать нам заголовки ответов для запроса 'footer.html'? – Brad

В зависимости от структуры вашего сайта, если вы хотите, чтобы статические страницы были построены таким образом, что вы используете общий шаблон, вы можете рассмотреть такой комплект, как Webpack. Это способ выставить статический HTML с полной страницей (так что вы можете легко размещать на любом CDN), но только для того, чтобы поддерживать общий шаблон. – Brad

Вы не можете делать запросы AJAX на свой локальный диск ... нет HTTP-сервера, поэтому HTTP-запрос не может быть выполнен. Ошибка кросс-оригинала, которую вы получаете, немного вводит в заблуждение.

Поместите свою страницу на сервер.

Смотрите также: https://stackoverflow.com/a/20578692/362536

источник

2016-09-11 02:15:52 Brad

-1

Причина, почему ваш код не работает, потому что вы поместили Jquery до того, как элемент был загружен на сайт, заставляя его не работать.

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

$(document).ready(function() { 
    $('#filename').load("footer.html"); 
});

Это будет ждать, пока элементы этой страницы не были уже загружены на страницу, а затем она будет загружать содержимое footer.html в элемент с Идентификатор имени файла.

источник

2016-09-11 02:03:17 FluxCoder

Это неправильно. Код в вопросе уже делает это. – Brad

Загрузить html-содержимое на страницу html

ответ

Смежные вопросы