Include another HTML file in a HTML file-第4页回答

I have 2 HTML files, suppose a.html and b.html. In a.html I want to include b.html.

In JSF I can do it like that:

<ui:include src="b.xhtml" />

It means that inside a.xhtml file, I can include b.xhtml.

How can we do it in *.html file?

标签： html include

28条回答

人间绝色

2楼-- · 2018-12-31 00:43

This is what helped me. For adding a block of html code from b.html to a.html, this should go into the head tag of a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then in the body tag, a container is made with an unique id and a javascript block to load the b.html into the container, as follows:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

0人赞添加讨论(0) 举报

浅入江南

3楼-- · 2018-12-31 00:44

Most of the solutions works but they have issue with jquery:

The issue is following code $(document).ready(function () { alert($("#includedContent").text()); } alerts nothing instead of alerting included content.

I write the below code, in my solution you can access to included content in $(document).ready function:

(The key is loading included content synchronously).

index.htm:

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc:

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery include plugin on github

0人赞添加讨论(0) 举报

皆成旧梦

4楼-- · 2018-12-31 00:44

If you use some framework like django/bootle, they often ship some template engine. Let's say you use bottle, and the default template engine is SimpleTemplate Engine. And below is the pure html file

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

You can include the footer.tpl in you main file, like:

$ cat dashboard.tpl
%include footer

Besides that, you can also pass parameter to your dashborard.tpl.

0人赞添加讨论(0) 举报

不流泪的眼

5楼-- · 2018-12-31 00:44

Well, if all you're wanting to do is put text from a separate file into your page (tags in the text should work, too), you can do this (your text styles on the main page—test.html—should still work):

test.html

<html>
<body>
<p>Start</p>

<p>Beginning</p>

<div>
<script language="JavaScript" src="sample.js"></script>
</div>

<p>End</p>

</body>
</html>

sample.js

var data="Here is the imported text!";
document.write(data);

You can always recreate the HTML tags you want yourself, after all. There's need for server-side scripting just to grab text from another file, unless you want to do something more.

Anyway, what I'm starting to use this for is to make it so if I update a description common among lots of HTML files, I only need to update one file to do it (the .js file) instead of every single HTML file that contains the text.

So, in summary, instead of importing an .html file, a simpler solution is to import a .js file with the content of the .html file in a variable (and write the contents to the screen where you call the script).

Thanks for the question.

0人赞添加讨论(0) 举报

旧时光的记忆

6楼-- · 2018-12-31 00:45

I know this is a very old post, so some methods were not available back then. But here is my very simple take on it (based on Lolo's answer).

It relies on the HTML5 data-* attributes and therefore is very generic in that is uses jQuery's for-each function to get every .class matching "load-html" and uses its respective 'data-source' attribute to load the content:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

0人赞添加讨论(0) 举报

高级女魔头

7楼-- · 2018-12-31 00:46

As an alternative, if you have access to the .htaccess file on your server, you can add a simple directive that will allow php to be interpreted on files ending in .html extension.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Now you can use a simple php script to include other files such as:

<?php include('b.html'); ?>

0人赞添加讨论(0) 举报

Include another HTML file in a HTML file

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间