Question

有没有办法可以创建网页中其他网页可以在HTML中使用的页面？像ASP.NET中的主页那样。

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

Answer 1

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

所以＆＃34;主页的纯粹实现＆＃34;在HTML中是不可能的。

您可以使用JavaScript框架such as AngularJS来帮助您实现＆＃34;主页＆＃34;在HTML中。

如果你对.NET感兴趣，你仍然可以用HTML创建一个HTML主页，这样它就知道如何渲染主容器。

在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，则应该为页面重新创建HTML，而不是使用iframes填充。

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

Answer 2

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

Answer 3

您可以通过CSS管理应用的外观和布局。如果您希望代码具有一定的可重用性，可以尝试使用iframes来实现类似的功能。

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

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

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

Answer 4

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

你可以使用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;
                    });
                });
            });
        });
    });

如何在HTML中创建“MasterPage”

4 个答案: