如何从外部 url 加载 html 源模板答案

【问题标题】：How to load html source template from external url如何从外部 url 加载 html 源模板
【发布时间】：2019-11-11 17:19:06
【问题描述】：

我必须使用包含徽标、页眉和页脚等的完整源代码 html 模板作为我网页的基础。

<html>
<head>
Template content
</head>
<body>
  <div>Template content</div>
  <div>Template Content</div>
  <div #id="customapp">Webpage Content</div>
  <div>Template Content</div>
</body>
</html>

我要用我的自定义应用程序替换页面中的一个元素，例如 <div #id="customapp"></div>。

有没有办法创建一个 html/javascript 页面动态加载和呈现模板 html 并在给定模板 html 的托管 url 的情况下包含我的应用程序？

例如我想要达到的目标：

使用上面带有模板url的模板转换下面的html应用程序，

<div>My Custom App Content</div>

进入

<html>
<head>
Template content
</head>
<body>
  <div>Template content</div>
  <div>Template Content</div>
  <div>My Custom App Content</div>
  <div>Template Content</div>
</body>
</html>

我的目标是让源 html 的任何进一步更改自动反映在网页上，而无需我采取任何行动。

应用目前正在使用 vue 和 webpack。

【问题讨论】：

你在考虑使用 iframe 吗？
@FarhadYasir 不确定 iframe 如何提供帮助。我想动态加载和呈现网页的模板，而不是内容
你能添加一个带有源模板的示例吗？
@FarhadYasir 它基本上是一个完整的工作 html 页面，只有一个要替换的 div 组件

标签： javascript html vue.js webpack

【解决方案1】：

您可以通过在 iframe 中调用外部模板来加载它。以下loadExternalWebpage 函数正在创建一个 iframe，在 iframe 中加载模板并将其附加到 customapp div。

但要使用 iframe，您应该在加载外部 URL 时注意安全风险。

<html>
  <head>
   Template content
  </head>
  <body>
    <div>Template content</div>
    <div>Template Content</div>
    <div #id="customapp">Webpage Content</div>
    <div>Template Content</div>
 </body>
 <script>
    function loadExternalWebpage() {
      const selector = document.getElementById('customapp');
      const iframe = document.createElement('iframe');
      iframe.src = 'your_external_url';
      selector.appendChild(iframe);
   }
   loadExternalWebpage(); 
 </script>
</html>

【讨论】：

不确定我是否清楚，但我正在尝试的是相反的。我可以控制我的 Web 应用程序，而不是模板 html 源代码。
@user113531 您是否尝试在构建时将 Web 应用程序注入到 html 模板中？
不是在构建时，而是在客户端浏览器中。我想构建一个将自身注入到 html 模板中的应用程序。我不想在每次模板更改时都重新构建我的应用程序。
TBH，不确定您要达到的目标。我的建议是创建一个服务器端渲染 Web 应用程序并将上面的 loadExternalWebpage 的 url 共享到模板 html。因此，如果您需要重建模板 html，它不会影响 Web 应用程序。这意味着有两个独立的应用程序将分别构建。