Question

我必须使用包含徽标，页眉和页脚等的完整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的情况下包含我的应用程序？

例如我要达到的目标：

使用上述模板和模板网址来转换以下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。

Answer 1

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

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

<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>

如何从外部网址加载HTML源模板

1 个答案: