Javascript 使页眉和页脚文件包含在多个html页面中_Javascript_Jquery_Html_Css

Javascript 使页眉和页脚文件包含在多个html页面中

javascript jquery html css

Javascript 使页眉和页脚文件包含在多个html页面中,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想创建包含在几个html页面中的常见页眉和页脚页面我想使用javascript。有没有办法只使用html和JavaScript来实现这一点我想在另一个html页面中加载页眉和页脚页面。您可以使用将此代码放入index.html <html> <head> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sh

我想创建包含在几个html页面中的常见页眉和页脚页面

我想使用javascript。有没有办法只使用html和JavaScript来实现这一点

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

您可以使用

将此代码放入

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>

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

现在，当您访问

index.html

时，您应该能够单击链接标签。

我尝试了以下方法：创建一个文件header.htmllike

<!-- 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>


$（function（）{$（“head”）.load（“header.html”）}）；

工作非常好。

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

如果将.html页面的文件名转换为.php，那么在每个.php页面的顶部，可以使用一行代码包含header.php中的内容

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

您还可以放置：（load_essentials.js:）

document.getElementById（“myHead”）.innerHTML=
“标题”
+“副标题”；
document.getElementById（“myNav”）.innerHTML=
“”
+“”
+“”
+“
”
+“”；
document.getElementById（“myFooter”）.innerHTML=
“copyright©；”+新日期（）.getFullYear（）+“您。所有人”
+“保留权利。”
+“您的布局”
+“/”
+“
”

内容
我使用服务器端包含添加常见部分作为页眉和页脚。不需要HTML和JavaScript。相反，Web服务器会在执行任何其他操作之前自动添加包含的代码
只需在要包含文件的位置添加以下行：
<!--#include file="include_head.html" -->


我一直在C#/Razor工作，因为我的家用笔记本电脑上没有IIS设置，所以我在为我们的项目创建静态标记的同时，寻找一个javascript解决方案来加载到视图中
我偶然发现一个网站解释了“抛弃jquery”的方法，它展示了该网站上的一个方法，它完全符合您在纯JaneJavaScript中所追求的（文章底部的参考链接）。如果您打算在生产中使用此工具，请务必调查任何安全漏洞和兼容性问题。我不是，所以我自己从来没有调查过
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>

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

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



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

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

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



源代码不是我自己的，我只是引用它，因为它是OP的一个很好的普通javascript解决方案。原始代码在这里：也可以将脚本和链接加载到标题中。
我将把它添加到上面的一个例子中
<!--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>


文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
document.getElementById（“myHead”）.innerHTML=
“标题”
+“副标题”；
document.getElementById（“myNav”）.innerHTML=
“”
+“”
+“”
+“
”
+“”；
document.getElementById（“myFooter”）.innerHTML=
“copyright©；”+新日期（）.getFullYear（）+“您。所有人”
+“保留权利。”
+“您的布局”
+“/”
+“”；
内容
自从第一次提出这个问题以来，另一种可用的方法是使用reactrb express（请参阅），这将允许您在客户端使用ruby编写脚本，用ruby编写的react组件替换html代码。
我认为，这个问题的答案太旧了。。。目前，一些桌面和移动浏览器支持HTML模板
我建立了一个小例子：
在Chrome 61.0、Opera 48.0、Opera Neon 1.0、Android浏览器6.0、Chrome Mobile 61.0和Adblocker浏览器54.0中测试正常

在Safari 10.1、Firefox 56.0、Edge 38.14和IE 11中测试KO
更多兼容性信息，请访问
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>

样式.css
<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>

#模板内容{
颜色：红色；
}
.模板容器{
背景颜色：黄色；
颜色：蓝色；
}

从2018年起，您可以在这篇文章中获得更多的例子。不幸的是，我没有任何很酷或未来派的东西可以和你分享
然而，我确实想向那些评论jQueryload（）
方法目前不起作用的人指出，他们可能试图在不运行本地web服务器的情况下对本地文件使用该方法。这样做将抛出上述“跨源”错误，该错误指定跨源请求（如加载方法发出的请求）仅支持http
、data
或https
等协议方案。（我假设您没有提出实际的跨源请求，即header.html文件实际上与您请求它的页面位于同一个域中）
因此，如果上面接受的答案不适用于您，请确保您正在运行web服务器。如果您很忙（并且使用预装了Python的Mac），那么最快、最简单的方法就是启动一个简单的Python http服务器。你可以看到这是多么容易做到
我希望这有帮助
 学分：W3学校
保存要包含在.HTML文件中的HTML：
Content.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>

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

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

<!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>



添加JavaScript
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;

    }
);

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（）{
var z，i，elmnt，file，xhttp；
/*循环遍历所有