[英]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>
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>
With just HTML5 you could try something like this: 仅使用HTML5,您可以尝试执行以下操作:
<object name="foo" type="text/html" data="foo.inc"></object>
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.