简体   繁体   English

能够使用单个html作为另一个html页面的“包含”

[英]Ability to use a single html that stands as an 'include' to another html page

I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers. 我一直在寻找这个问题的答案,但似乎找不到确切的“单词”或“短语”来找到相关的答案。

My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page? 我的问题是,是否有可能使用单个HTML作为另一个HTML页面的“包含”?

Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on. 示例:能够使用一个包含CSS样式的文件,以便同一文件可以自动出现在我包含它的网站的每个页面上。

I made a template that has an extension of .html that contains only my header and footer for the whole theme of the site. 我制作了一个扩展名为.html的模板,该模板仅包含我整个网站主题的页眉和页脚。 Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page. 通常,我会将这些模板的内容复制并粘贴到每个新的html页面中,然后为该页面添加唯一的正文内容。

What I would like to do is make a template that has an extension of .html containing only my header and footer so I can do something like include template.html which automatically would put the content of the template.html page on each page so I don't have to copy and paste each time. 我想做的是制作一个扩展名为.html的模板,该扩展名仅包含我的页眉和页脚,因此我可以执行诸如include template.html ,该include template.html会自动将template.html页面的内容放在每个页面上,因此不必每次都复制和粘贴。 I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site. 我发现越来越难以更新/维护包含页眉和页脚脚本的站点的每个页面,因为在进行更改并且必须在整个站点中传播时,我必须查找并替换这些脚本的每个实例。

I know that html does not actually have an include function but I think there should be a way around this through other languages such as PHP or even JavaScript? 我知道html实际上没有include功能,但是我认为应该通过其他语言(例如PHP或JavaScript)解决此问题吗? I just am curious if its possible and if so, how? 我只是想知道它是否可能,如果可能的话,如何?

I think you have a few different options. 我认为您有几种选择。 With PHP you could do something like this: 使用PHP,您可以执行以下操作:

    <!DOCTYPE html>
    <html>
        <body>

            <h1>Welcome to my home page!</h1>
            <p>Some text.</p>
            <p>Some more text.</p>
            <?php include 'footer.php';?>

        </body>
    </html>

See this link . 看到这个链接

With AngularJS you could use something like this: 借助AngularJS,您可以使用以下代码:

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <body ng-app="">
            <div ng-include="'myFile.htm'"></div>
        </body>
    </html>

See this link . 看到这个链接

With just HTML5 you could try something like this: 仅使用HTML5,您可以尝试执行以下操作:

    <object name="foo" type="text/html" data="foo.inc"></object>

See this link . 看到这个链接

Does that help answer your question? 这是否有助于回答您的问题?

What you are asking is possible in differents ways: 您要问的内容可能以不同的方式出现:

frame and iframe 框架和iframe

take a look at this two tags 看一下这两个标签

I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. 我不推荐这种解决方案,因为HTML5不支持“框架”,并且“ iframe”被设置为在网站中包含其他网站,而不是网站的一部分。 You will not be able to add CSS/JS to code in "iframe" tag. 您将无法将CSS / JS添加到“ iframe”标签中的代码中。

back end solution 后端解决方案

Depending on what kind of website you are working on you can include other file. 根据您正在使用的网站类型,您可以包含其他文件。 For exemple in php: 以php为例:

include('youcode.html');

HTML5 solution HTML5解决方案

You can also use the "object" tag : 您还可以使用“对象”标签:

<object width="100%" height="500px" data="snippet.html"></object>

this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp 这可能是您最好的选择,请参见: http : //www.w3schools.com/html/html_object.asp

Enjoy :) 请享用 :)

This can't be done via HTML, you can either do a PHP include or use this W3 schools example: 这无法通过HTML完成,您可以进行PHP包含,也可以使用以下W3学校示例:

http://www.w3schools.com/howto/howto_html_include.asp http://www.w3schools.com/howto/howto_html_include.asp

PHP example template.html rename to template.php PHP示例template.html重命名为template.php

<html>
<?php include template.php ?>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM