我想创建包含在几个html页面中的通用页眉和页脚页面。

我想使用javascript。有办法只使用html和JavaScript吗？

我想在另一个html页面中加载页眉和页脚页面。

评论

您正在寻找ajax ... $（'。myElement）.load（'urltopage.html'）;这会将urltopage.html的内容加载到.myElement
stackoverflow.com/a/8592403/896341

#1 楼

您可以使用jquery完成此操作。

将此代码放入index.html 

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>


并将此代码放入header.html和footer.html，与index.html相同的位置

<a href="http://www.google.com">click here for google</a>


现在，当您访问index.html时，应该可以单击链接标记。

评论

加载或导入或使用本地文件的其他功能在新版本的Google Chrome或IE中不起作用，原因：安全！

– Sinac
15年1月12日在18:56
有时候，我想知道如果没有jQuery，人们如何能呼吸。还是已经有.breathe（in）和.breathe（out）？在这里，任何脚本语言都是纯洁的。

–阴谋
15年4月24日在22:38
我不断收到跨源请求，仅协议方案支持：http，数据，chrome，chrome扩展名，https，chrome-extension-resource。当我在Chrome中运行时

–digiwebguy
16年4月7日在11:16
需要在服务器中运行代码。这意味着url必须类似于“ http：// .....”。

–爱国
17-4-23在15:58


爱国是对的，它必须在Web服务器下运行。

–Fabio Belz
17年5月25日在13:59


#2 楼

我使用服务器端包含将常见的部分添加为页眉和页脚。不需要HTML，也不需要JavaScript。相反，Web服务器会在执行其他操作之前自动添加包含的代码。

只需在要包含文件的位置添加以下行即可：

<!--#include file="include_head.html" -->


评论

我喜欢这种老式的方式。实际上，使用脚本执行这种简单操作似乎并没有太多好处。

–珍娜·叶
15年8月5日在11:38
实际上，使用脚本包含文件具有主要缺点：由于客户端需要下载主页，加载DOM，运行脚本，然后才可以下载包含的文件，因此会降低性能，这需要每个包含的文件额外的服务器请求。使用“服务器端包含”包含文件可在第一个服务器请求期间提供所有元素，而无需客户端操作。

–阴谋
15年8月6日在16:48
SSI要求使用文件扩展名：.shtml，.stm，.shtm。它可以在Apache，LiteSpeed，nginx，lighttpd和IIS中运行。

–ubershmekel
17年9月29日在2:25
@ubershmekel如您所说，相关的Web服务器支持SSI。文件扩展名不限于.shtml，.stm和.shtm：在IIS上，所有已解析的文件都可能包含SSI，例如.aspx。如果使用PHP，则需要使用PHP包含或虚拟命令来获得相同的结果。

–阴谋
17-09-30在4:34


#3 楼

您必须在JavaScript中使用html文件结构吗？您是否考虑过使用PHP以便可以使用简单的PHP包含对象？

如果将.html页面的文件名转换为.php-那么在每个.php页面的顶部您可以使用一行代码来包含header.php中的内容。在每个页面的页脚中执行相同的操作以包含来自页脚的内容。 php文件

<?php include('header.php'); ?>


不需要JavaScript / Jquery或其他随附文件。

NB您还可以将.html文件转换为.php文件在.htaccess文件中使用以下内容

<?php include('footer.php'); ?>


评论

@ Justin808-OP没有提及本地托管安装，因此我想他是在谈论基于服务器的文件。

–索尔
2015年4月25日在5:49
@Sol但是，OP DID特别提到要使用Javascript，因此您的答案是题外话。全栈Web开发正在迅速从根本上不再使用PHP，Node.js提供了所有等效功能，并且只需要使用Javascript。 TL; DR请按要求回答问题。 OP需要一个JS解决方案，因此给他提供PHP，Ruby，Python，C ++或任何其他语言的解决方案是不合适的。

–扎克
17年7月24日在7:55

#4 楼

我尝试了以下操作：
创建文件header.html，例如

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>


现在在HTML页面中包含header.html，例如：

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>


效果很好。

评论

不错的解决方案，但我认为这将两次加载jquery框架，一次加载初始页面，其次执行.load（）方法时-因为目标页面也包含jquery。

–德拉利
17年2月24日在16:26

#5 楼

您还可以输入：（load_essentials.js :) 




 document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
	+ "<a href='mailto:you@you.com'>Report a problem.</a></p>"; 

 <!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>




#6 楼

我一直在C＃/ Razor中工作，由于我的家用笔记本电脑上没有IIS设置，因此我在寻找为项目创建静态标记时加载视图的javascript解决方案。

在解释“抛弃jquery”方法的网站上，它演示了该网站上的方法完全可以用普通的Jane javascript来实现您所追求的目标（参考链接位于文章底部）。如果您打算在生产中使用此安全漏洞，请确保调查所有安全漏洞和兼容性问题。我不是，所以我从来没有亲自调查过。

JS函数

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};


获取内容

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);


index.html 

<!-- This element will be replaced with #new-header -->
<div id="header"></div>


views / header.html 

<!-- This element will replace #header -->
<header id="new-header"></header>


来源不是我自己的，我只是引用它，因为它是OP的良好的javascript解决方案。原始代码位于此处：http://gomakethings.com/ditching-jquery#get-html-from-another-page

评论

好的解决方案。我更喜欢使用jQuery。

–德拉利
17年2月24日在16:31

#7 楼

我认为，这个问题的答案太旧了……目前，某些台式机和移动浏览器支持HTML模板。

我已经建立了一个小例子：

在Chrome 61.0，Opera 48.0，Opera Neon 1.0，Android Browser 6.0，Chrome Mobile 61.0和Adblocker Browser 54.0中经过测试合格，在Safari 10.1，Firefox 56.0，Edge 38.14和IE 11中经过KO检验canisue.com

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>


autoload-template.html 

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>


styles.css 

 #template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}


您可以在此HTML5 Rocks帖子中获得更多示例

评论

现在不推荐使用HTML导入。

–乔纳森·沙曼（Jonathan Sharman）
19年4月4日在11:28

#8 楼

阿罗哈（Aloha），来自2018年。不幸的是，我没有什么好与未来有关的东西可以与您分享。

但是，我确实想指出那些评论说jQuery load()方法当前不起作用的人可能是在不运行本地Web服务器的情况下尝试将该方法与本地文件一起使用。这样做将引发上述“跨源”错误，该错误指定仅由http，data或https之类的协议方案支持诸如由load方法发出的跨源请求。 （我假设您不是在进行真正的跨域请求，即header.html文件实际上与您从中请求该页面的页面位于同一域中）

如果上面接受的答案对您不起作用，请确保您正在运行网络服务器。如果您急于这样做（使用预先安装了Python的Mac），最快最简单的方法就是启动一个简单的Python http服务器。您可以在这里看到这样做很容易。

希望对您有所帮助！

评论

使用Web服务器虽然无济于事，至少对我而言，仅使用Javascript的原因是使其更易于开发。

–康拉德·霍夫纳（KonradHöffner）
18年7月1日在11:42

#9 楼

也可以将脚本和链接加载到标题中。
我将添加上面的示例之一... 

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>


#10 楼

自从首次提出此问题以来，可用的另一种方法是使用reactrb-express（请参阅http://reactrb.org）。这将使您可以在客户端用ruby编写脚本，用用ruby编写的react组件替换html代码。 br />

评论

op只要求使用html和javascript，但您带他使用ruby ..：D大声笑，但很酷的工具人。

–梅里·琼（Meily Chhon）
17年1月20日在4:25
我认为问题的实质是-没有服务器端模板语言。所有这些都可以编译成Javascript，因此我相信它符合问题的意图。

– Mitch VanDuyn
17年1月25日在13:39

#11 楼

保存要包含在.html文件中的HTML：

Content.html 

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>


包括HTML

使用w3-include-html属性可以包含HTML：

示例

    <div w3-include-html="content.html"></div>


添加JavaScript

HTML包含由JavaScript完成。

    <script>
    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          } 
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    }
    </script>


在页面底部调用includeHTML（）：

示例

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>


评论

之后我测试index.html时得到白色空白页

–侯赛因·埃尔贝希（Hussein Elbeheiry）
18年8月29日在12:01