通过JavaScript在HTML中包含HTML

Question

通过JavaScript在HTML中包含HTML

javascripthtmlheaderinclude

3

我有一个类似于这个问题的疑问：如何在不使用框架/iframe的情况下将HTML页面包含到另一个HTML页面中？

但是答案对我没有用。对象和iframes会创建带有滚动条的框，这不是我想要的，而且如果我有指向其他页面的链接，我希望整个页面都发生变化，而不仅仅是框内的内容。

这个指令不起作用：

我只想使用html，因为网站就是这样建立的，我们不会重新设计它。我只是为了修改内容而这么做。

在javascript文件中编写html头部（或底部），然后在所有html文件中包含.js文件，这样做是否不好？

第一次编辑

我有大约70个不同的静态html页面。我想更新内容，例如标志、菜单、网站的元描述、文本颜色等，但目前，我必须进行70次不同的修改。

我在菜单的html部分使用了javascript，因为菜单已经与javascript一起工作，并在所有html文件中包含了该文件。

function writeJS(){
    var strVar="";
    strVar += "<body bgcolor=\"#000000\">";
    strVar += "<div class=\"Main_container\">";
    ...
    document.write(strVar);
}
writeJS();

我不知道是否值得将同样的标签用于这些标记，例如。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" ...

第二次编辑

虽然使用html/javascript的选项是可行的，但我们决定投入几天时间去创建一个wordpress.org网站（长期来看更便宜且更好）。

- Catherine

你能详细说明一下你目前的情况是什么，你想要改变什么，以及哪些方面出现了问题吗？ - MickJ

 是 SSI，不是 HTML。 - Quentin

@Quentin 我想我还是要说明一下我已经尝试过了，以防有人建议。谢谢。 - Catherine

你可能会对 https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ 感兴趣。 - Brian Cannard

4个回答

1

这个指令完全不起作用。

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

你可能没有启用SSI，所以出现了这个问题。你之所以告诉我们这个问题，是因为你认为这样会得到你想要的结果——这意味着问题的一部分是为什么它没有起作用？你做了什么来调查？

在javascript文件中编写html头（或页脚），然后将.js包含在所有html文件中，这是不好的实践吗？

这不是关于不好的实践——它不起作用——你可以从javascript中注入html，但你需要javascript代码来进行注入。此外，这与你早先的声明相矛盾：

我想只使用html

你提供的代码并没有注入html，而是附加了它。document.write的问题在于它只写入文档输入流的末尾。如果该流已经关闭，它会重新打开并清除当前的HTML。没有理由使用document.write()。请考虑以下内容：

<html>
   <div id="header">
     <noscript>....</noscript>
   </div>
   <div id="page_specific_content">
   ...
   </div>
   <div id="footer">
     <noscript>....</noscript>
   </div>
 </html>

和...

 function addHeader()
 {
   var el=document.getElementById("header");
   if (el) {
      el.innerHTML="...";
   }
 }

但这仍然是编写动态网站的一种不好的方式。即使您不想在生产服务器上运行ASP、PHP、PERL或服务器端JS等，使用适当的CMS或模板系统进行开发，然后抓取HTML以获得静态版本进行发布会更有意义。

- symcbean

抱歉，我没有意识到矛盾。我的意思是我不想使用与已有的语言（html和javascript）不同的新语言。我看到javascript作为一种创建网站插件的语言，但我可能错了，也许有一些网站使用javascript就像其他人会使用PHP一样。我同意这个网站建设得很差，但它是由一个不再存在的外部公司制作的。这个网站并不重要，不能投入太多时间来重建它，尽管我很想这么做。 - Catherine

我只有几天时间来至少让它看起来不错（内容和CSS），我正在尝试简化我的工作。我没有对SSI进行任何调查，也不打算启用它，相反，在尝试并了解到这不应该起作用后，我暗示这对我不是一个解决方案。我想为读者简短地解释一下，但现在我还是要解释一下...我会尝试您的解决方案。谢谢。 - Catherine

1

是的，这是不好的做法。使用正确的工具来完成正确的工作。

对于您提到的大多数事情，您需要使用外部样式表（2013年的bgcolor？）。这将已经防止您不得不更改70个文件。

如果还有您希望在页面之间共享的内容，则正确的方法是使用服务器端脚本（如php）进行包含。

客户端包含它会很混乱，并且只能部分地工作。您只能加载进入DOM的内容（因此不能加载元信息或Head元素的内容）。此外，当用户未启用javascript时，您的站点将完全禁用（这种情况并不常见，但仍然存在）。

- Joeri Hendrickx

确实，但正如我告诉symcbean的那样，该网站是由一家不再存在的外部公司建造的，重新正确构建它并不是一个选项。使用了外部CSS，但对于某些元素，样式编写在每个页面中。我也考虑过用户禁用JavaScript的情况。哪个更好，这样做还是不使用JavaScript？ - Catherine

问题不仅在于成本，还在于未来的可维护性。如果这只是一次性的，你可以采用这样的hack（但它仍然是一个hack，不是好的实践，我想这才是真正的问题）。如果您想在将来维护页面，最好通过css正确添加样式。如果您的网站支持php，您可以仅将其用于包含（1行），并忽略其他任何内容。您甚至不会注意到它的存在。 - Joeri Hendrickx

我们决定选择一个wordpress.org网站 :) - Catherine

1

我想有很多方法可以实现这个目标：

使用SSI，如如何在不使用框架/iframe的情况下将HTML页面包含到另一个HTML页面中？所述的解决方案。
如果您有php或类似的脚本语言，并且感觉舒适，您可以使用它。
使用JQuery或本地JS代码进行简单的JS注入。请参见：https://dev59.com/23RB5IYBdhLWcg3wQVSV#676409
使用IFrame和一些CSS来摆脱滚动条
使用Javascript模板（Underscore，backbone和许多其他）。还请参阅：您推荐哪些Javascript模板引擎？和http://en.wikipedia.org/wiki/Javascript_templating

希望能对您有所帮助。

- MickJ

对于（1和2）：SSI不会在浏览器中启用缓存。整个内容都必须传输到客户端，即使只更改了一小部分。对于（3），只要内容被缓存，情况就不那么糟糕。对于（5），这是对经过深思熟虑的基于服务器的Web的可怕过度思考。添加它会迫使我们创建一个存储并使用所有后果获取数据。（4）运行良好，但我听说它的性能不佳。大多数广告都是以这种方式加载的。 - Brian Cannard

这是一篇完全专门讨论HTML包含限制的文章：https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ - Brian Cannard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- achillesminor · Accepted Answer

我相当确定那个包含解决方案只适用于服务器端。你是否尝试过该页面提供的jQuery解决方案？它似乎符合你的javascript需求：

如果你指的是客户端，那么你必须使用JavaScript或框架。一个简单的起点是尝试jQuery。

$("#links").load("/Main_Page #jq-p-Getting-Started li");

源代码注释。