如何获取常见的大块经常重用的 HTML 源代码？

Question

我为我的一个 Web 项目编写的大量页面共享大约 144 行相同的代码，并在每个文件中复制。如果我更新其中一行，我必须返回所有共享代码的页面并更新每个页面。有没有一种直接的方法可以从单独的文件中包含 HTML？

对于奖励积分，由于有很多页面使用此代码，因此不必为每个页面重新加载它会很好。有没有一种简单的方法可以将其存储在浏览器的缓存中，或者只加载页面的“内容”部分，而让页面的其余部分保持静态？

感谢您在这方面的任何智慧。

迈克

Answer 1

要包含来自单独文件的 HTML，请使用 SSI（服务器端包含）。但是，这需要在服务器上安装 SSI 支持。

你会在你的文件中写下这样的内容： <!--#include file="included.html" --> 当页面被访问时，这将包括文件included.html。

要仅加载每个页面的内容，请使用 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;
}

Answer 2

如果我们假设您说的是纯 html 页面，没有服务器代码（asp.net、php 或服务器端包含能力），那么为了同时执行包含和缓存，您将需要使用 iframe。

复制 144 行内容的每个页面都应使用 iframe 替换，如下所示：

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

pagewithcontent.html 显然是您将内容移动到的位置。浏览器会适当地缓存页面，这样每个父页面就可以简单地获取共享内容，而无需再次请求。

There's an article here 深入了解 html 包括，以及一些 javascript 方法。我强烈建议不要使用 javascript 方法。

我的回答反映了您无法在服务器端做任何事情的假设。但是，到目前为止，最好的解决方案是尽可能这样做。