网站如何使用Javascript而不在浏览器中显示任何结构HTML

How can a site Use Javascript and NOT display any structural HTML in the browser?

本文关键字：显示 任何 结构 HTML 浏览器 何使用 Javascript 网站      更新时间：2023-09-26

http://thelovemagazine.co.uk

我已经查看了这个网站的浏览器来源，并通过Charles Proxy进行了调查。我使用Wappalyzer来查看他们在使用什么，它看起来像Cowboy、Erlang、NodeJS、Express、React和Modernizr。

我看不到任何结构化HTML。看起来它只是向浏览器抛出JavaScript，并使用JSON（也许？）来显示内容。此外，CSS文件有一些非常奇怪的类名，它们看起来毫无意义，比如.jkhl4350s

我的问题是，他们是怎么做到的？也许是某种混淆事物的CMS？JavaScript可以呈现没有HTML结构的内容吗？

我试图弄清楚这一点，因为我想看看网站的结构，以及他们是如何使用diffJS库的。

我被难住了，如果有任何见解，我将不胜感激。

谢谢！

我的问题是，他们是怎么做到的？

他们正在使用React，正如你在整个源代码中看到的许多data-reactid属性所证明的那样（React创建了用户界面的声明性模型，因此每当数据发生变化时，UI都会重新呈现以反映这些更新。幕后有一些优化，所以我建议你看看他们的文档，以更好地理解。）

JavaScript可以呈现没有HTML结构的内容吗？

JavaScript可以呈现DOM元素。在React中，您通常会在组件的render函数中看到它：

render() {
  return <div>Something here</div>;
}

看起来毫无意义的非常奇怪的类名，比如.jkhl4350s

它们并非毫无意义。他们可能正在使用类似CSS模块的东西，它去掉了全局CSS命名空间。这就是为什么类名看起来像一堆胡言乱语的原因。

我试图弄清楚这一点，因为我想看看网站的结构，以及他们是如何使用diffJS库的。

如果没有看到他们预先编译的源代码，这将是非常困难的，所以除非他们的代码是开源的，否则你很可能会在理解它时遇到困难（正如你所指出的，编译的代码看起来有点奇怪）。看看React文档，你会有更好的运气。

这是一个非常宽泛的问题，所以我建议从阅读上面提供的两个链接中的文档开始。

通过Shadow DOM：Mozilla开发人员Shadow DOM

相关文章：