我如何使用常见的大量经常被重用的HTML源代码?

A slew of pages I've written for one of my web projects share some 144 identical lines of code, reproduced in each file. If I update one of those lines, I have to go back through ALL of the pages that share the code and update for each page. Is there a straightforward way to include HTML from a separate file?

我为我的一个web项目编写的大量页面共享144行相同的代码，并在每个文件中复制。如果我更新其中的一行，我必须返回共享代码的所有页面，并对每个页面进行更新。是否有一种简单的方法将HTML从单独的文件中包含?

And for bonus points, since so many pages use this code, it would be nice not to have to reload it for each page. Is there an easy way to store it in the browser's cache or only load the "content" section of the pages while leaving the rest of the page static?

另外，由于很多页面都使用这个代码，所以最好不要为每个页面重新加载它。是否有一种简单的方法可以将它存储在浏览器的缓存中，或者只加载页面的“内容”部分，而让页面的其余部分保持不变?

Fountains of Thanks for any wisdom on this.

感谢你在这方面的智慧。

Mike

迈克

3 个解决方案

#1

To include HTML from a separate file, use SSI (Server-Side Includes). This requires SSI support to be installed on the server, however.

要从单独的文件中包含HTML，请使用SSI(服务器端包含)。然而，这需要在服务器上安装SSI支持。

You would write something like this in your files:  and that would include the file included.html when the page is accessed.

您可以在您的文件: ，包含文件。当访问页面时html。

To load only the content of each page, use the XMLHTTPRequest object from JavaScript:

要加载每个页面的内容，请使用JavaScript中的XMLHTTPRequest对象:

function LoadContent(url)
{
    if (typeof(XMLHttpRequest) == "undefined")
    {
        try
        {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                // fallback for browsers without XMLHttpRequest
                window.location.href = "no-ajax.php?url="+escape(url);
                return;
            }
        }
    }
    else
    {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.open("GET", url, false); // this request will be synchronous (will pause the script)
    xmlhttp.send();
    if(xmlhttp.status > 399) // 1xx, 2xx and 3xx status codes are not errors
    {
        // put error handling here
    }
    document.getElementById("content").innerHTML = xmlhttp.responseText;
}

#2

I would recommend reading this article on includes

我建议阅读这篇文章。

#3

If we're assuming that you're talking straight html pages, with no server code (asp.net, php, or server side include ability), then in order to do both the including and the caching, you're going to need to use an iframe.

如果我们假设您正在讨论的是纯html页面，没有服务器代码(asp.net、php或服务器端包含能力)，那么为了实现包含和缓存，您将需要使用一个iframe。

Each of your pages that duplicate the 144 lines of content should replace it with an iframe like so:

每一个复制144行内容的页面都应该用一个iframe替换它:

<iframe src="pagewithcontent.html"></iframe>

pagewithcontent.html would obviously be where you move the content to. The browser will cache the page appropriately, so that each parent page will simply get the shared content without making another request.

pagewithcontent。很明显，html是你将内容移动到的地方。浏览器会适当地缓存页面，这样每个父页面就可以在不发出另一个请求的情况下获得共享内容。

There's an article here that goes into great depth about html includes, and some javascript methods of doing it. I would strongly recommend against the javascript methods.

这里有一篇关于html include的文章，以及一些javascript方法。我强烈建议不要使用javascript方法。

My answer reflects the assumption that you can't do anything on the server side. However, by far the best solution is to do so if you can.

我的回答反映了这样一种假设，即您在服务器端无法执行任何操作。然而，到目前为止，最好的解决方案是尽可能地这么做。

#1