插入外部 html 内容 HTML5 兼容的最佳方式？ php vs HTML5 vs javascript方法答案

【问题标题】：Optimum way to insert external html content HTML5 compliant? php vs HTML5 vs javascript methods插入外部 html 内容 HTML5 兼容的最佳方式？ php vs HTML5 vs javascript方法
【发布时间】：2012-11-03 03:41:57
【问题描述】：

我知道这对你们大师来说可能看起来很简单，但我已经搜索了一个多小时无济于事......

目标：为我的所有网页使用一个页脚文件和菜单文件。考虑到阻塞、速度等。我的菜单内容是纯html/css，我的页脚内容是纯html/css。最佳解决方案会根据注入的内容而改变吗？例如如果涉及视频、jscript等。

两部分问题： 1）哪种方法是最优的？某种 php 包括，使用标签，使用 jscript 等。 2) 保持 HTML 5 标准的精确度如何？即，为了使 php 方法起作用，我的调用网页是否需要是 .php，然后这是否使 HTML5 标准成为一个有争议的问题？例如如果我想将 footer.php 注入 index.html，我的索引文件是否也必须是 .php？同样对于标记，外部文件可以是 .html 文件（我不喜欢使用 .css 调用重新加载所有标头信息的想法）还是应该是 .php？

在 index.html 文件中，我尝试了以下操作：

<object id="footerArea" width="100%" height="20%" 
  type="text/html" data="footer.html">
</object>

和

<?php include 'footer.php' ?>

这些似乎都不适合我。

如果您想知道...这是我的页脚代码，我正尝试注入示例数据以使其更短且更易于阅读：

<div class="footer box">
<p class="f-right t-right">
 <a href="#">www.mysite.com</a><br />
  Address: Medford, OR<br />
  Phone: (541) 555-5555
</p>

<p class="f-left">
 Copyright &copy;&nbsp;2011 <a href="#">My Name</a><br />
</p>

<p class="f-left" style="margin-left:20px;">
 <a href="http://sampleurl.com" target="_blank">
  <img style="border:0;width:88px;height:31px"
   src="http://sampleurl.com"
   alt="Valid CSS3!" />
 </a>
</p>

<p class="f-left" style="margin-left:20px;">
 <a href="http://sampleurl" target="_blank">
 <img src="http://sample.png" width="228" height="50" alt="sample alt" title="sample title">
 </a>
</p>
</div>

请原谅我的格式。我仍然是在论坛上发布代码的新手。我尽力了:)

【问题讨论】：

您说：“这些似乎都不适合我”。你能告诉我们如何他们没有工作吗？具体来说，PHP 方法可能是正确的方向......那么，您收到了什么错误？页面是什么样的？当您在浏览器中“查看源代码”时，页脚代码是否可见，或者您的页脚区域只是空的？
抱歉，我没有详细说明我的特定错误。当我使用所示的注入页脚代码的对象时，没有任何样式应用于它，这让我意识到，为了使用对象标签来注入页脚，我必须再次调用同一页面适当的 css 文件。我的代码不应该让对象标签按照我想要的最佳方式工作（不必创建带有在标题中调用的 css 的 html 标签）。正在寻找一种仅调用一次服务器文件（例如 css）并将其应用于页面上的所有内容（包括动态内容）的方法。
当我尝试 php 包含时，我的页面上只有页脚应该位于的空白区域。没有尺寸适合它或任何东西。当我检查代码时，它显示了注释掉的 php include 语句。我的 php 文件是上面的确切代码，除了开始和结束标签之外的每一行前面都有一个开始标记“”和“echo”。

标签： php javascript performance html

【解决方案1】：

您在 url 中看到的文件名的扩展名与下载该文件时浏览器将如何处理该文件完全NOTHING。这一切都归结为文件随附的Content-type 标头。网站管理员可以简单地配置他们的服务器以将所有.exe 文件视为纯 HTML 页面。他们还可以告诉网络服务器通过 PHP 解析器运行.html 页面。事实上，使用“现代” SEO 优化的 url，您几乎不会看到文件扩展名。都是example.com/some/wonky/path，而不是example.com/page.php?id=wonky。

PHP 已构建并输出页面这一事实也与 HTML 合规性无关。归结为浏览器接收到的页面是否符合标准。所有标签都正确关闭了吗？属性定义正确？标签正确嵌套？呸呸呸呸。

如果您正确构建了代码，则输出的 html 将具有正确的结构并且是有效的 html。如果它不是有效的 html，那不是 PHP 的错——那是你把不能产生正确输出的代码放在一起的错。

URL 中的文件扩展名可能唯一相关的情况是网络服务器输出通用内容类型，例如“应用程序/八位字节流”。浏览器可以使用可检测的文件扩展名来猜测内容的类型并尝试对其进行处理。但这既不保证也不可靠。

【讨论】：

在我尝试注入页脚和导航菜单之前，根据我使用的验证网站，该页面是 100% HTML5 和 css3 兼容的。直到那时我才决定将页脚和导航菜单放入单独的文件中，这样每当我决定进行更新时，我就不必更新所有其他页面。非常感谢您提供的有用信息。从未想过来自服务器的“内容类型”标头。我确实有 php 为不同站点上的其他应用程序工作，但在同一台服务器上。如果这甚至适用于您的信息。
因此，尽管我没有得到太多关于哪种方式最佳的意见，但您的信息似乎是最有帮助的。要回答我自己关于 HTML5 的问题之一：我的 index.html 需要是 index.php 才能使“包含”语句起作用，并且根据验证器站点检查为 HTML5 兼容。优化的一个侧面说明，我认为一个解决方案允许在其他页面上使用注入的内容进行缓存，或者使用注入动态代码的单个模板页面，并且 URL 会根据用户正在查看的内容而更改（seo）。

【解决方案2】：

PHP include 应该是这样的：

<?php include 'footer.php'?>

据我所知，您在问题中的代码是将字符串“footer.php”分配给变量include。但是，您是否考虑过使用 Smarty 之类的东西，而不是滚动您自己的模板系统？

【讨论】：

【解决方案3】：

如果调用的代码类似于固定的页脚，您可能希望创建您想要的简单页脚，然后包括：

<?php
readfile("yourfile.htm");
?>

【讨论】：

【解决方案4】：

以下内容应该可以满足您的要求：

index.php

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <!-- other css, scripts etc -->
  </head>
  <body>
    <!-- your main content here -->
    <?php include 'footer.html' ?>
  </body>
</html>

footer.html

<div class="footer box">
  <!-- your footer content here -->
</div>

当您在浏览器中加载 index.php 并“查看源代码”时，您应该会看到上面显示的内容，但应该将 <?php include "footer.html" ?> 替换为文件“footer.html”中的内容。

当您通过网络浏览器查看源代码时，您应该不看到 php 代码本身。如果您确实在“查看源代码”中看到 php 代码，这表明您的服务器未配置为正确运行 php。

对于从浏览器加载内容并且不使用 php 的替代方法，我将向您指出 this related question and answer。

【讨论】：

是的，我很愚蠢，因为我有不正确的 include 语句。我将其更改为 '' 但当我在现场检查时它仍然显示为已注释掉。我在同一个站点上的 php 表单工作得很好。我上传了一个新的 php 文件，运行 '' 它可以很好地显示我的 php 信息。