1

好的-首先我知道这并不理想-但是我们继承了一个问题并且一些经过深思熟虑的SSI html。

所以一些背景：我们已经实现了一个响应式站点，它必须包含来自客户端的一些 SSI 代码，用于全球顶部导航和页脚 - 到目前为止一切都很好。但是，当网站在移动设备上调整大小/加载时，SSI 需要从 DESKTOP 更改为 MOBILE。我们目前正在做所有这些客户端。我们在断点处有一个触发器来更改 dom 以执行所有响应式操作。

一个类似的例子在这里http://www.conrandesigngroup.com。（调整浏览器大小以查看会发生什么。）

通常我们会将 SSI 加载到保存页面中，并使用某种选择器将代码 AJAX 到适当的位置。

问题：SSI 不是完全形成的 HTML，它看起来像这样：

<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">

那么我们为移动站点提供的 SSI 是：

<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">

所以你会注意到有一个结束</head>和一个开口<body>，最后有一个开口<div>。所以我们无法选择它并使用 DOM 替换。我们正在考虑在代码的任一侧使用注释并使用 javascript 正则表达式来替换代码。我不确定这是否真的会更新浏览器。

所以在桌面模式下，整个页面将如下所示：

<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>

这很好 - HTML 都放在服务器端，我们可以正确打开和关闭标签。问题是我们如何使用客户端代码更改评论中的 HTML<!- START of ssi -->...<!-- END of SSI -->

最后，它并不是一个真正的 SSI 问题 - 而是一种更改一些 HTML 的方法，这些 HTML 没有很好地包含在一个元素中。

有人遇到过这个问题或有什么建议吗？

4

1 回答 1

0

共同点是这样的：

  • body元素包含内容
  • 移动和桌面内容都从 body 的第一个孩子开始

对于两个版本，清空第一个元素的代码是相同的：

document.getElementsByTagName("body")[0].firstChild.innerHTML = "";

将代码包装在一个pre元素中以便于修改。

参考

于 2013-03-08T00:40:17.013 回答