显示 html 和源页面的正确结构是什么？答案

【问题标题】：What the right structure to display html plus a source page?显示 html 和源页面的正确结构是什么？
【发布时间】：2013-08-17 03:42:30
【问题描述】：

我想在 HTML 页面上方显示一个源网页，其中包含一些关于它的信息。我最初虽然使用框架来执行此操作，但据我所知，框架只能显示 HTML src，而不是原始 html。需要明确的是，如果允许框架标签包含原始 html，我想做类似的事情

<frameset rows="200,2*">
   <frame name="info>
      <h3>Stack Overflow</h3>
      <p>A site for programming questions</p>
  </frame>
  <frame name="site" src="http://stackoverflow.com">
</frameset>

这样做的正确方法是什么？

【问题讨论】：

标签： html html-frames

【解决方案1】：

有几种方法可以做到这一点：

您可以将 HTML 源代码放在 <pre> 块中，这样会使其保持原始状态，但如果您的 HTML 源代码本身包含 <pre> 块，它可能会中断。
您预先转义 HTML 代码，例如使用http://www.htmlescape.net/htmlescape_tool.html 等在线工具之一
您可以使用 javascript 加载 HTML 代码，例如使用 jQuery 并使用 jQuery text 函数将其放入 <div> 中

【讨论】：

【解决方案2】：

你可以这样使用：

在您的 HTML 页面中，使用：

<iframe src="get.php?url=http://google.com"></iframe>

然后，您创建一个 php（或您的服务器语言）页面：

<?php
header('Content-Type: text/plain; charset=utf-8');
echo file_get_contents($_GET['url']);
?>

这样您可以加载任何网页，甚至可以使用 javascript 更改它而无需重新加载您的 html 页面。但请注意，每个人都可以使用您的 get.php 页面获取任何网页。

【讨论】：

【解决方案3】：

因为这不是 1994 年，所以最好的方法是不使用框架。开玩笑，有时框架仍然有用，但应尽可能避免。原因是

您创建了一个全新的窗口对象。除非你需要一个新的窗口对象，否则你就是在浪费内存。
过去，一些搜索引擎不遵循框架中的 URL。对于同一域中的目的地，这可能不再是这种情况，但仍然可以改变您的网页的排名方式，除非您知道自己在做什么，否则您不应该为要编入索引的网站使用框架。

如果您必须使用框架，则必须为每个框架使用单独的 html 文件，或者您可以使用 Iframe。但是 iframe 仍然带有上述警告。

您还可以使用 JavaScript 动态加载 div 或 td（jQuery、prototype、mootools 等。可以提供帮助），但从 SEO 的角度来看，这甚至比框架更糟糕，并且应该保留给需要登录的应用程序，甚至然后，他们将停止工作。

从定位的角度来看，最接近框架集的是桌子。您可以不指定一列宽度并将表格宽度设置为 100%，该列将占用可用的最大空间，如行属性中的框架集“*”。但是，如果没有 javascript，表格的高度不能设置为窗口的 100%，因此您不能对高度和行执行相同的操作。这里绝对定位将比一张桌子更有帮助。例如

<div style="position: absolute; top: 0px; bottom: 0px; width: 100%">
    <div style="height: 200px; width: 100%; background: red;">Fixed Row</div>
    <div style="position: absolute; top: 200px; bottom: 0px; width: 100%; background: blue">Fluid Row</div>
</div>

如果它们是根元素，则其行为类似于框架行。要在另一个元素内工作，该元素必须具有宽度、高度和定位：相对。

在前面的示例中，以任何元素的样式（如 td 或 div）设置固定高度和 overflow:scroll 将为其提供像框架一样的滚动条。然后，您可以将所有数据放在一个页面上，或者在不同的 url 上包含一个宽度和高度为 100% 的 iframe，尽管正如我提到的，同样的警告适用于框架集。

【讨论】：