Question

我们有一个由CMS生成的本地运行的HTML应用程序，用于在本机IOS应用程序中运行的第3方系统。

每个主页都必须是一个单独的独立HTML文件。

所有页面上使用的共享资源（常见的HTML局部代码，js css等）位于共享文件夹中。

加载CSS和JS很好，但是我们需要一种方法来在页面的第一个渲染之前将共享的HTML加载，就像它是页面的一部分一样（否则，您会看到页面没有共享内容）瞬间/白色闪烁）。

我们想出了几种方法，但是都没有很好的方法，所以有什么想法吗？

1）document.write

我们将每个共享的html部分包装在JS中：

document.write('<div class=\'title\'>The Title</div>');

然后在HTML主页中，我们将其包含JS标签。

<script src="../shared/template.html"></script>

这可行，但是使用document.write会在控制台中收到很多警告，我们将不得不对.html文件进行一些处理以转义它们并将其包装在JS中。

2）同步Ajax-（Sjax？）

在结束XMLHttpRequest标记之前用body加载文件，但将sync标志设置为false，然后在加载时将其插入主页的占位符节点。 / p>

const xhr = new XMLHttpRequest();
  xhr.addEventListener('load', () => {
    document.getElementsByClassName('template-container')[0].innerHTML = xhr.responseText;
  });
  xhr.open('GET', '../shared/template.html', false);
  xhr.send();

这是更好的选择，因为我们根本不需要触摸.html页面，并且也没有进行document.write操作。

但是，据说不赞成在主线程上进行同步-但是，何时/如果IOS删除了它，我不知道。

3）iframe

将部分内容包括为iframe。

<iframe src="../shared/template.html"></iframe>

问题在于，我们再次必须修改部分，以便它们包含相关的CSS才能呈现，我们需要修改父文件/ css才能正确呈现iFrame，并且需要更多往返操作才能实现与点相同的想法1。

4）Ajax / fetch 两者都是异步的，因此在主渲染和加载外部html之间总是会有一点延迟。

目前，我正在考虑将其2作为最干净的实现，但担心它是否真的会被弃用。

还有其他方法吗？

同步加载外部HTML文件

0 个答案: