如何在 php 中包含 html 文件，例如 include？答案

【问题标题】：How to include html files like include in php?如何在 php 中包含 html 文件，例如 include？
【发布时间】：2014-01-07 13:08:30
【问题描述】：

我们如何在 html 中包含文件，就像我们通常在 Php 中包含文件一样。

<?php include "nav.php";?>

【问题讨论】：

不，你不能在 html 中包含文件
您在寻找 iframe 吗？ developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
我想你正在寻找这个stackoverflow.com/questions/8988855/…
您可以将文件包含到 html 中，前提是您告诉服务器将 html 视为 PHP

标签： php html file header include

【解决方案1】：

可以使用Ajax，见JQuery load function，例子：

<div id="moreData"></div>
$( "#moreData" ).load( "otherPage.html" );

【讨论】：

【解决方案2】：

使用 ifrmae

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

或者使用框架集

<!DOCTYPE html>
<html>

<frameset cols="25%,*,25%">
  <frame src="http://www.w3schools.com/frame_a.php">
  <frame src="http://www.w3schools.com/frame_b.php">
  <frame src="http://www.w3schools.com/frame_c.php">
</frameset>

</html>

【讨论】：

【解决方案3】：

我的建议是使用 jQuery。

<html> 
 <head> 
  <script src="jquery.js"></script> 
    <script> 
      $(function(){
      $("#includeCont").load("file.html"); 
      });
    </script> 
  </head> 

 <body> 
  <div id="includeCont"></div>
 </body> 
</html>

【讨论】：

【解决方案4】：

你可以使用 jQuery：

HTML

<div id="container"></div>

jQuery

$("#container").load('somepage.html');

在documentation 中详细了解load 函数以及您可以使用它执行的更多操作。

【讨论】：

【解决方案5】：

有一个使用http://httpd.apache.org/docs/current/howto/ssi.html的round about方法

服务器端包括

例如

【讨论】：

聪明的解决方案，虽然这可能不适用于共享主机。
是的，正确。需要先将服务器配置为接受 SSI。
旁注：该文件需要具有.shtml 扩展名才能正常工作。这需要在您的回答中指出，而不仅仅是供某人访问的链接。
@Fred -ii 关于旁注。我想你不应该在这里写错信息。请仔细阅读链接。任何类型的文件都可以配置为使用 SSI。不仅是.shtml。 AddType text/html .shtml AddOutputFilter INCLUDES .shtml
是的，我知道这一点，在您发表评论之前我会提到这一点，但是当 OP 可以像对待 PHP 一样对待 html 时，这样做有什么意义呢？ ;-)

【解决方案6】：

使用 webpack 和 html-webpack-plugin 是可能的。这是 index.html。您可以创建多个文件。

像这样。

<%= require('html-loader!./views/partial/nav.html') %>

还有更多。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Your Site Title</title>
  </head>

  <body>

    <%= require('html-loader!./views/partial/nav.html') %>

    <main id="mainDiv">
      <!-- Section Banner -->
      <%= require('html-loader!./views/partial/index/section-banner.html') %>

      <!-- Section Services -->
      <%= require('html-loader!./views/partial/index/section-services.html') %>

      <!-- Section About us -->
      <%= require('html-loader!./views/partial/index/section-aboutus.html') %>

      <!-- Section Call To Action -->
      <%= require('html-loader!./views/partial/index/section-call-to-action.html') %>

      <!-- Section Footer -->
      <%= require('html-loader!./views/partial/footer.html') %>
    </main>
  </body>
</html>

【讨论】：