Как загрузить исходный шаблон HTML из внешнего URL - PullRequest
Новая
       2

Как загрузить исходный шаблон HTML из внешнего URL

0 голосов
/ 01 июля 2019

Я должен использовать 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 и включает мое приложение, учитывая размещенный URL-адрес шаблона html?

Например, что я пытаюсь достичь:

Преобразуйте следующее html-приложение, используя указанный выше шаблон с URL-адресом шаблона, 

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

1 Ответ

1 голос
/ 01 июля 2019

Вы можете загрузить внешний шаблон, вызвав его внутри 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...