发表新帖
发表新帖

How to include an HTML file with jQuery?

后端 未结
关注
3 1372
南笙
南笙 2020-12-14 03:03

I want to make my code separate so I decided to divide each div to html files. Each HTML file has some jQuery click events. I have 2 files index.html

相关标签:
3条回答
  • 再見小時候
    2020-12-14 03:36

    I have another solution. It seems to make code more beautiful and shorter. First define include function. 

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

});

    }

    On html page use onload to trigger include like this. 

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

    After the compiler runs through it will replace img tag and load what you need. With above trick i can attach to any place in my index.html

    0 讨论(0)
  • 小蘑菇
    2020-12-14 03:40

    In your 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>

    In a separate file "_HeaderPartial.html":

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

    In a separate file "_FooterPartial.html":

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

    The result:

    This is the Header from its _Partial file

    This is the main content, from the index file

    And this is from the footer partial file

    0 讨论(0)
  • 自闭症患者
    2020-12-14 03:57

    You can add menu.html into the DOM of index.html with the jQuery load() method. This way the jQuery instance created in index.html would also apply to the content loaded from menu.html.

    For example in index.html you can do:

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

    Note how $('#some-menu') is just another element in index.html into which we load the contents of menu.html. It's also important to note that because of the same-origin-policy, the AJAX request performed as part of the load() method would only work with files in the same domain, protocol and port (unless you're using CORS).

    0 讨论(0)
 看不清?
提交回复
热议问题