色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

使頁眉和頁腳文件包含在多個html頁面中

CSS
錢淋西2年前8瀏覽0評論

我想創建幾個html頁面中包含的通用頁眉和頁腳頁面。

我想用javascript。有沒有一種方法只使用html和JavaScript就可以做到這一點？

我想在另一個html頁面中加載頁眉和頁腳。

您可以使用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 >click here for google</a>

現在，當你訪問index.html，你應該可以點擊鏈接標簽。

我使用服務器端Includes將公共部分添加為頁眉和頁腳。不需要HTML和JavaScript。相反，web服務器會在做任何事情之前自動添加包含的代碼。

只需在您希望包含文件的位置添加以下行:

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

JavaScript一定要用html文件結構嗎？有沒有考慮過改用PHP，這樣就可以使用簡單的PHP include對象？

如果您將。html頁面到。然后在你的每個。你可以用一行代碼來包含header.php的內容

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

在每一頁的頁腳中做同樣的操作，以包含footer.php文件中的內容

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

不需要JavaScript / Jquery或附加的包含文件。

注意，你也可以轉換你的。html文件到。在您的。htaccess文件

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

您也可以將:(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>

我試過這個: 創建一個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>

非常好用。

問題問的是只使用HTML和JavaScript。問題是使用JavaScript甚至jQuery向服務器發出第二個請求(請求額外的header.html & quot；后來& quot)是:

慢點！

因此，這在生產環境中是不可接受的。方法是只包含一個。js文件并只使用它來提供HTML模板。js文件。所以，第一步，在你的HTML中你可以有:

<header id="app-header"></header>
<script async src="header.js"></script>

然后，第二步，把你的模板放在你的header.js中。對這個HTML字符串使用反斜杠:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

這也有好處，如果你需要，你可以動態地改變你的模板的內容，因為它是JavaScript！ 此外，嘗試用defer(或者什么都不用)來代替async，但是對用戶來說可能會慢一些——這取決于你的其他內容，所以試試吧。只是，別忘了把腳本放在標題后面。

關于速度的解釋

在HTTP/2世界中，web服務器& quot不理解& quot什么附加文件(。css，。js等)應與特定的。html，并在初始響應中一起發送它們。但是，如果在你的& quot原創& quot。html您沒有導入這個header.html文件(因為您打算稍后用腳本調用它)，它最初不會被發送。因此，當您的JavaScript/jQuery請求它時(這將在很久以后發生，那時HTML和您的JavaScript將得到& quot解讀& quot)，你的瀏覽器會向服務器發送第二個請求，等待回答，然后做它的事情...這就是為什么這是緩慢的。你可以使用任何瀏覽器的開發工具來驗證這一點，觀察header.html的到來。

所以，作為一個一般的建議(當然有很多例外)，在你的原始文件中導入你所有的附加文件。html(或php)文件，如果你關心速度的話。如果需要，使用延遲或異步。以后不要使用JavaScript導入任何文件。

我一直在使用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://gomake things . com/ditching-jquery # get-html-from-another-page

我認為，這個問題的答案太老了...目前，一些桌面和移動瀏覽器支持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

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>

樣式. css

#template-content {
    color: red;
}

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

你可以在這篇HTML5 Rocks帖子中找到更多的例子

2018年的阿羅哈。不幸的是，我沒有任何酷的或未來的東西與你分享。

然而，我確實想向那些評論說jQuery load()方法目前不工作的人指出，他們可能試圖在不運行本地web服務器的情況下對本地文件使用該方法。這樣做會拋出上面提到的“cross origin”錯誤，該錯誤指定由load方法發出的跨原點請求只受http、data或https等協議模式的支持。(我假設您沒有發出實際的跨來源請求，即header.html文件實際上與您發出請求的頁面在同一個域中)

所以，如果上面接受的答案對你不起作用，請確保你運行的是網絡服務器。如果您趕時間(并且使用預裝了Python的Mac ),最快最簡單的方法就是啟動一個簡單的Python http服務器。你可以看到在這里做到這一點是多么容易。

希望這有幫助！

對于普通javascript的快速設置，因為還沒有答案，您還可以使用. js文件將HTML的冗余部分(模板)存儲在變量中，并通過innerHTML插入。

反斜杠是這個答案的簡化部分。 (如果您閱讀了& amp；amp；amp；amp；amp；如果您還想了解反勾號上的鏈接，請回答問題。測試該答案)。

每頁保持不變的導航欄示例:

<nav role="navigation">
    <a href="/" class="here"><img src="image.png" alt="Home"/></a>
    <a href="/about.html" >About</a>      
    <a href="/services.html" >Services</a>          
    <a href="/pricing.html" >Pricing</a>    
    <a href="/contact.html" >Contact Us</a>
</nav>

您可以將以下內容保留在HTMl中:

<nav role="navigation"></nav>

并在nav.js文件中設置& ltnav & gt作為反斜線之間的變量:

const nav= `
    <a href="/" class="here"><img src="image.png" alt="Home"/></a>
    <a href="/about.html" >About</a>      
    <a href="/services.html" >Services</a>          
    <a href="/pricing.html" >Pricing</a>    
    <a href="/contact.html" >Contact Us</a>
` ;

現在您有了一個小文件，可以從中檢索包含HTML的變量。它看起來非常類似于include.php，可以很容易地更新而不會弄亂它(反勾號里面是什么)。

現在，您可以像鏈接任何其他javascript文件一樣鏈接該文件，并在& lt導航角色= & quot導航& quot& gt& lt/nav & gt；通過

let barnav = document.querySelector('nav[role="navigation"]');
    barnav.innerHTML = nav;

如果您添加或刪除頁面，您只需更新一次nav.js

基本HTML頁面可以是:

// code standing inside nav.js for easy edit
const nav = `
    <a href="/" class="here"><img src="image.png" alt="Home"/></a>
    <a href="/about.html" >About</a>      
    <a href="/services.html" >Services</a>          
    <a href="/pricing.html" >Pricing</a>    
    <a href="/contact.html" >Contact Us</a>
`;

nav[role="navigation"] {
  display: flex;
  justify-content: space-around;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <!-- update title   if not home page -->
  <meta name="description" content=" HTML5 ">
  <meta name="author" content="MasterOfMyComputer">
  <script src="nav.js"></script>
  <!-- load an html template through a variable -->
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>

<body>

  <nav role="navigation">
    <!-- it will be loaded here -->
  </nav>
  <h1>Home</h1>
  <!-- update h1 if not home page -->

  <script>
    // this part can also be part of nav.js 
    window.addEventListener('DOMContentLoaded', () => {
      let barnav = document.querySelector('nav[role="navigation"]');
      barnav.innerHTML = nav;
    });
  </script>
</body>

</html>

也可以將腳本和鏈接加載到標題中。 我會把它作為上面的一個例子...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/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>

自從這個問題被首次提出以來，另一種可用的方法是使用reactrb-express(參見http://reactrb.org)。這將允許你在客戶端用ruby編寫腳本，用用ruby編寫的react組件替換html代碼。

使用ajax 主頁. js

fetch("./includes/header.html")
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.querySelector("header").innerHTML = data;
    });

fetch("./includes/footer.html")
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.querySelector("footer").innerHTML = data;
    });

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Liks</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
        <script src="/js/main.js"></script>
    </body>
</html>

你可以在不使用JavaScript的情況下使用HTML的對象標簽。

<object data="header.html" type="text/html" height="auto"></object>

學分:W3學校如何包含HTML

保存要包含在中的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

包含HTML是通過使用w3-include-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>