Как включить HTML файл с jQuery?

Я хочу сделать свой код отдельным, поэтому решил разделить каждый div на html файлы. В каждом файле HTML есть события jQuery click. У меня есть 2 файла index.html и menu.html.

Проблема в том, что я должен включить библиотеку jQuery в оба файла, чтобы она работала.

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

Я включил файл menu.html через iframe.

<iframe src="left-menu.html"></iframe>

Ответ 1

Вы можете добавить menu.html в DOM index.html с помощью метода jQuery load(). Таким образом, экземпляр jQuery, созданный в index.html, также будет применяться к содержимому, загруженному из menu.html.

Например, в index.html вы можете сделать:

$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});

Обратите внимание, что $('#some-menu') - это еще один элемент в index.html, в который мы загружаем содержимое menu.html. Важно также отметить, что из-за политики одного и того же происхождения запрос AJAX, выполняемый как часть метода load(), будет работать только с файлы в том же домене, протокол и порт (если вы не используете CORS).

Ответ 2

У меня есть другое решение. Кажется, что код более красив и короче. Сначала определите функцию include.

var include = function(beReplacedId,url){
jQuery.get(url,function(data){
    jQuery(beReplacedId).replaceWith(data);

});

}

На html-странице использование onload для запуска включает в себя подобное.

<img id="partTopicDetail" onload="include(this,this.id+'.html')" src="img/any-image.png" >

После запуска компилятора он заменит тег img и загрузит то, что вам нужно. С помощью вышеприведенного трюка я могу подключиться к любому месту в моем index.html

Ответ 3

В вашем HTML:

<body>
<header>
     <div data-includeHTML="_HeaderPartial.html"></div>
</header>
<main>
    <div>
        This is the main content, from the index file
    </div>
</main>
<footer>
    <div data-includeHTML="_FooterPartial.html"></div>
</footer>
<script>
    $(document).ready(function () {
        $("div[data-includeHTML]").each(function () {                
            $(this).load($(this).attr("data-includeHTML"));
        });
    });
</script>
</body>

В отдельном файле "_HeaderPartial.html":

<div>
    <h1>This is the Header from its _Partial file</h1>
</div>

В отдельном файле "_FooterPartial.html":

<strong>And this is from the footer partial file</strong>

Результат:

Это заголовок из его _частичного файла

Это основной контент из индексного файла

И это из неполного файла нижнего колонтитула