在不使用选择器的情况下使用javascript更改HTML_Javascript_Html_Ajax_Responsive Design_Ssi

在不使用选择器的情况下使用javascript更改HTML

javascript html ajax responsive-design

在不使用选择器的情况下使用javascript更改HTML,javascript,html,ajax,responsive-design,ssi,Javascript,Html,Ajax,Responsive Design,Ssi,好的-首先我知道这并不理想-但是我们继承了一个问题和一些考虑不周的SSI html 因此，一些背景：我们已经实施了一个响应网站，其中必须包括一些来自全球顶级导航和页脚客户端的SSI代码-到目前为止还不错。但是，随着站点在移动设备上的大小调整/加载，SSI需要从桌面更改为移动。我们目前在客户端完成所有这些工作。我们在断点处有一个触发器来改变dom，以完成所有响应的工作这里有一个类似的例子。调整浏览器大小以查看发生了什么通常我们会将SSI加载到保存页面中，并使用某种选择器将代码AJAX加载到适当

好的-首先我知道这并不理想-但是我们继承了一个问题和一些考虑不周的SSI html

因此，一些背景：我们已经实施了一个响应网站，其中必须包括一些来自全球顶级导航和页脚客户端的SSI代码-到目前为止还不错。但是，随着站点在移动设备上的大小调整/加载，SSI需要从桌面更改为移动。我们目前在客户端完成所有这些工作。我们在断点处有一个触发器来改变dom，以完成所有响应的工作

这里有一个类似的例子。调整浏览器大小以查看发生了什么

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

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

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

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

那么移动站点的SSI是：

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

所以你会注意到有一个关闭和一个打开，最后有一个打开。因此，我们无法选择它并使用DOM替换它。我们考虑在代码的任意一侧使用注释，并使用javascript正则表达式替换代码。我不确定这是否真的会更新浏览器

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

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

<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

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

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

共同点是：

body元素包含内容移动和桌面内容都是从身体的第一个孩子开始的清空第一个元素的代码对于两个版本都是相同的：

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

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

参考资料

第二个是故意的吗？是的-2位代码来自2个不同的服务器端。我们无法控制这些文件。关闭头是问题的一部分。为什么响应元素是从服务器端驱动的？是否正在使用媒体查询？也许我很难理解这个问题？这是一个遗留问题。SSI文件是我们必须包含的内容——它们是公司网站的全局导航。响应元素不是由服务器端驱动的，而是由SSI驱动的静态HTML和客户端完成的响应。因此，我们必须提供带有SSI的静态HTML。但是SSI中的html必须针对移动和桌面进行更改。我们无法更改SSI-它们基本上是静态的。因此，我们需要能够有效地在不同的SSI中加载不同的前端模式。