Заголовок и нижний колонтитул на нескольких страницах с помощью js

Я хочу вызвать header.html и footer.html на каждой странице html с помощью javascript. Я попробовал код Make header and footer files to be included in multiple html pages, но это не работает для меняЗаголовок и нижний колонтитул на нескольких страницах с помощью js

Вот тот же код,

<html> 
<head> 
<title>hi</title> 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script> 
$("#header").load("header.html"); 
$("#footer").load("footer.html"); 
</script> 
</head> 
<body> 
<div id="header"></div><br /> 
<div id="content"> 
    Main Content 
</div><br /> 
<div id="footer"></div> 
</body> 
</html>

Я скачал Jquery-1.11.1.min.js этого http://jquery.com/download/ сайта. Пожалуйста, помогите мне исправить этот код.

источник

2014-11-12 PyPerl

Это было предложено до: http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-include- multiple-html-pages –

Можете ли вы обновить сообщение своей текущей файловой структурой? И дает ли консоль какие-либо ошибки? – Tim

Вы должны обернуть свой код в document ready функции:

<script> 
    jQuery(document).ready(function($){ 
     $("#header").load("header.html"); 
     $("#footer").load("footer.html"); 
    }); 
</script>

В противном случае ваш код будет выполняться до #header и #footer доступны.

источник

2014-11-12 18:52:39 max

Спасибо. Это работает! – PyPerl

Тогда, пожалуйста, подумайте о принятии ответа. – max

Да, это позволит принять меня через 10 минут – PyPerl

Оберните ваш код в документ, готовый блок

jQuery(document).ready(function($) { 
    $('#header').load('header.html', function() { 
    console.log('header.html loaded') 
    }); 
    $('#footer').load('footer.html', function() { 
    console.log('footer.html loaded') 
    }); 
})

источник

2014-11-12 18:54:15 elzi

Привет, это работает с mozilla, но не с хромом - – PyPerl

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

JQuery не может найти $ ("# header") и #footer, потому что DOM не готов.

Попробуйте это прямо над </body> тэгом:

jQuery(document).ready(function($) { 
$("#header").load("header.html"); 
$("#footer").load("footer.html"); 
}

источник

2014-11-12 18:58:23 ChrisL

Hi , это работает с мозиллами, но не с хромом - – PyPerl

Заголовок и нижний колонтитул на нескольких страницах с помощью js

ответ

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