Master page in HTML | 易学教程

问题

Is there any way to create a similar idea as master/content page in ASP.NET in pure HTML?

I want to create several pages in HTML, but I want that all of them look the same with some contents different. Is there any way to do this without creating several pages which are very similar to each other?

回答1:

//wait until the dom is loaded
$(document).ready(function () {
    //adds menu.html content into any "#menu" element
    $('#menu').load('menu.html');
});

In reference to some of the other answers, iframes should be used carefully and sparingly. http://rev.iew.me/help-moving-from-iframes

http://fsvieira.com/2013/06/11/iframes-bad-for-a-website/

Duplicate question here with answer: How to create a master page using HTML?

回答2:

The simple way to do that is to use server side includes or SSI. However easier and, probably, much better solution would be usage of PHP with includes. This way you will always have additional PHP functionality then you need it. But both of this solutions require server that will preprocess the pages. If you want collection of pages, say, on a local hard drive, then only solution I know is already proposed iframe tag.

回答3:

You can use iframe. That would be purely html.

回答4:

I resolved with a Third party c# form application.

Header and footer different page insert key to all other page. (###footer###) Replace files contents with form Application.

footer.html

<h2>this place is footer.</h2>

default.html

<h1>Default page</h1>
bla bla bla
###footer###

Result default.html

<h1>Default page</h1>
bla bla bla
<h2>this place is footer.</h2>

Source Code below

List list = new List();

private void sourceBtn_Click(object sender, EventArgs e)
{
    DialogResult result = openFileDialog1.ShowDialog(this);
    if (result == DialogResult.OK)
    {
        sourceTxt.Text = openFileDialog1.FileName;
    }
}

private void fileListSelect_Click(object sender, EventArgs e)
{
    var result = openFileDialog2.ShowDialog(this);
    if (result == DialogResult.OK)
    {
        fileList.Items.AddRange(openFileDialog2.FileNames);
    }
}

private void addSourceBtn_Click(object sender, EventArgs e)
{
    list.Add(new sourceKey() { filename = sourceTxt.Text, key = keyTxt.Text });
    sourceTxt.Clear();
    keyTxt.Clear();
    sourceTxt.Focus();
    sourceList.DataSource = null;
    sourceList.DataSource = list;
}


private void ConvertBtn_Click(object sender, EventArgs e)
{
    foreach (var filename in fileList.Items)
    {
        string text = File.ReadAllText(filename.ToString());
        foreach (var item in sourceList.DataSource as List)
        {
            text = text.Replace(item.key, File.ReadAllText(item.filename));
        }
        File.WriteAllText(filename.ToString(), text);
    }
    infoLabel.Text = "Done";
}

Source Code Download Link

回答5:

Well, just as an ugly solution, try <iframe> tags. They load remote pages into your website, so you could define a "master template" like this:

...
<body>
  <div id="content">
    <iframe src="content1.html"></iframe>
  ...

Now, inside of content1.html, you could just write the content without the main layout.

来源：https://stackoverflow.com/questions/5332751/master-page-in-html

标签

html

master-pages