使用javascript更改HTML而不使用选择器

Ok - first of all I know this isn't ideal - however we have inherited a problem and some badly thought out SSI html.

好的 - 首先我知道这不是理想的 - 但是我们继承了一个问题,并且一些人仔细考虑过SSI html。

So some background: We have implemented a responsive site which has to include some SSI code from the client for global top nav and footer - so far so good. However the SSI needs to change from DESKTOP to MOBILE as the site is resized/loaded on a mobile device. We do all this client side at the moment. We have a trigger at break points to alter the dom to do all the responsive stuff.

所以有一些背景知识:我们已经实现了一个响应式站点,其中必须包含来自客户端的一些SSI代码,用于全球*导航和页脚 - 到目前为止一切顺利。但是,当站点在移动设备上调整大小/加载时,SSI需要从DESKTOP更改为MOBILE。我们目前正在做所有客户端。我们在断点处有一个触发器来改变dom以完成所有响应的东西。

A similar example is here http://www.conrandesigngroup.com. (Resize the browser to see what happens.)

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

Normally we would load the SSI into holding pages and AJAX the code in to the appropriate place using some kind of selector.

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

The problem: The SSI is not fully formed HTML, it looks something like this:

问题:SSI没有完全形成HTML,它看起来像这样:

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

Then the SSI we have for the mobile site is:

然后我们为移动网站提供的SSI是:

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

So you will notice there is a closing</head> and an opening <body> and at the end there is an opening <div>. So there is no way we can select this and replace using the DOM. We were thinking of using comments either side of the code and using a javascript regex to replace the code. Im not sure if this would actually update the browser.

所以你会注意到有一个结束和一个开口,最后有一个开头

。所以我们无法选择这个并使用DOM替换。我们考虑在代码的任何一侧使用注释并使用javascript正则表达式来替换代码。我不确定这是否真的会更新浏览器。

So in desktop mode the whole page will look like this:

因此在桌面模式下,整个页面将如下所示:

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

So thats fine - the HTML is all put together serverside and we can open and close the tags correctly. The problem is how would we change the HTML INSIDE the comments using client side code <!- START of ssi -->...

所以这很好 - HTML全部放在服务器端,我们可以正确打开和关闭标签。问题是我们如何使用客户端代码更改HTML INSIDE注释 ...

In the end its not really a SSI question - rather a way to change a bit of HTML which is not wrapped up nicely in an element.

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

Anyone come across this issue before or have any suggestions?

有人在遇到此问题或有任何建议吗?

1 个解决方案

#1

The common denominator is this:

共同点是这样的:

The body element contains the content

body元素包含内容

Both the mobile and desktop content start with the first child of the body

移动和桌面内容都是从身体的第一个孩子开始的

The code to empty the first element would be the same for both versions:

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

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

Wrap the code in a pre element to make it easy to modify.

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

References

W3C DOM4

#1