如何在 HTML 中创建“MasterPage”答案

【问题标题】：How to create a "MasterPage" in HTML如何在 HTML 中创建“MasterPage”
【发布时间】：2014-04-27 06:33:58
【问题描述】：

有没有一种方法可以创建一个网站中的其他页面可以在 HTML 中使用的页面？类似于 ASP.NET 中的母版页所做的那样。

任何有用的帮助将不胜感激。

【问题讨论】：

标签： html asp.net master-pages

【解决方案1】：

HTML 本身是一种静态语言。其他框架创建动态 HTML (DHTML)，例如 ASP.NET。

因此，在 HTML 中纯实现“母版页”是不可能的。

您可以使用 JavaScript 框架 such as AngularJS 来帮助您实现 HTML 中的“母版页”。

如果您对 .NET 感兴趣，您仍然可以在 HTML 中创建母版页，并在 .NET 中添加一些钩子，以便它知道如何呈现主容器。

在 ASP.NET MVC 中，您的母版页（在 ASP.NET MVC 中称为布局）可以有很少的挂钩回到框架和服务器。 Most of it can be HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My Movie Site</title>
    <link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
        <div id="header">
          <h1>My Movie Site</h1>
        </div>
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; @DateTime.Now.Year My Movie Site
        </div>
    </div>
  </body>
</html>

另一个选项（如 Ondrej 所述）是Server Side Includes (SSI)。大多数服务器应该有这个选项。它将允许您将其他 HTML 文件注入页面，从而允许您创建没有特定框架的母版页。

<html>
<title>My Website</title>

<!--#include virtual="/rootPage.html" -->

</html>

最后，我真的建议使用框架，而不是尝试将一堆 SSI 链接在一起。

就iframes 而言，我强烈建议不要使用单独的iframes 一起构建网站。这将变得无法控制和维持。因为您可能无法控制 iframe 内容。此外，如果页面上需要所有 HTML，则应为页面重新创建它，而不是使用 iframes 填充。

所以，使用一个框架。不要写一些疯狂的方法来替换页面上的内容。一个框架将很容易维护并且当你在路上回到它时才有意义。

【讨论】：

+1，服务器端包含（任何像样的网络服务器都有）可以做类似的工作
啊！好电话@OndrejSvejdar。我也会更新我的答案。

【解决方案2】：

您可以通过CSS 管理应用程序的外观和布局。如果你想让你的代码有一些可重用性，你可以尝试使用iframes 来实现类似的东西。

IFrame 有助于将引用的网页与当前页面结合起来，从而允许您重用代码。例如，您可以创建一个 menu.html 文件，然后嵌入到其他页面中 -

<iframe src="menu.html" seamless></iframe>

这里是关于使用 iframe 是否是一种好的做法的平衡讨论 - Are iframes considered 'bad practice'?

【讨论】：

iframe 可能是应用程序中非常有用的部分。像 codepen 和 cssdeck 这样的网站必须使用 iframe 来展示他们的内容。但是，使用它们来模拟母版页可能不是一个好主意。
@David：完全同意。但是，在我看来，OP 似乎很了解 asp.net 网页，并且仍在寻求在框架之外模拟 masterpage 功能。因此提出建议。如果 OP 澄清了，那么我很乐意记下这个答案

【解决方案3】：

使用框架或 Iframe。您也可以使用 javascript 加载 html。如果这不是您的想法，请使用服务器端母版页。

【讨论】：

【解决方案4】：

不是真的。没有 SSI 的纯 HTML 很困难，但可以实现。由于浏览器安全设置，这可能无法在本地运行，但如果您将其上传到谷歌文档或免费虚拟主机或您自己的服务器，它应该可以工作。

您可以使用 javascript 和 ajax 请求来填补空白，通过 javascript 文件加载所有脚本和内容...但如果这是您想要的。

这应该会引导您进行概率实现。可能您必须将 jQuery 源代码添加到 master.js，因为实际文件加载速度可能太慢。

master.js

function add_script(file)
    {
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = file;
    document.body.appendChild(js);
    }
function add_stylesheet(file)
    {
    var css = document.createElement("style");
    css.type = "text/css";
    css.src = file;
    document.body.appendChild(css);
    }
add_script('jquery.js');
add_script('jquerui.js');
add_script('whatever.js');

add_style('masterstyle.css');
add_style('jqueryui.css');
window.realcontent = null;// content per page
window.head = null// content to be added above the dynamic content
window.leftcolumn = null//content for left column
window.rightcolumn = null // content for right column
window.bottom = null //footer stuffs

jQuery(document).ready(function()
    {
    window.realcontent = jQuery('body').html();
    jQuery.ajax('masterhead.html').done(function(data)
        {
        window.header = data;
        jQuery.ajax('masterleftcolumn.html').done(function(data)
            {
            window.leftcolumn = data;
            jQuery.ajax('masterrightcolumn.html').done(function(data)
                {
                window.rightcolumn = data;
                jQuery.ajax('masterfooter.html').done(function(data)
                    {
                    window.bottom = data;
                    //finally we can load up everything
                    jQuery('body').html(window.header + window.leftcolumn + window.realcontent + window.rightcolumn + window.bottom);
                    // sanitise memory
                    window.header = null;
                    window.leftcolumn = null;
                    window.realcontent = null;
                    window.rightcolumn = null;
                    window.bottom = null;
                    });
                });
            });
        });
    });

【讨论】：