我必须使用包含 Logo 、页眉和页脚等的完整源 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 的任何进一步更改自动反射(reflect)在网页上，而无需我执行任何操作。
该应用程序当前正在使用 vue 和 webpack。
最佳答案
您可以通过在 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>
关于javascript - 如何从外部url加载html源模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56829086/