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

Question

http://thelovemagazine.co.uk

I have looked at this site's browser source and investigated via Charles Proxy. I used Wappalyzer to see what they are using and it looks like Cowboy, Erlang, NodeJS, Express, React and Modernizr.

I'm not able to see any structural HTML. It looks like it's just throwing JavaScript at the browser and using JSON (maybe?) to display the content. Also the CSS file has very odd class names that are seemingly meaningless like .jkhl4350s

My question is, how are they doing this? Perhaps some kind of CMS that is obfuscating things? Can JavaScript render content without HTML structure?

I'm trying to figure this out because I wanted to see the website structure and how they used to the diff JS libraries.

I'm stumped and would appreciate any insight.

Thank you!

Answer 1

My question is, how are they doing this?

They're using React , as evidenced by the many data-reactid attributes you'll see throughout the source code (React creates a declarative model of the user interface, so any time data is changed, the UI is re-rendered to reflect those updates. There are some optimizations behind the scenes, so I'd recommend taking a look at their docs to get a better understanding.)

Can JavaScript render content without HTML structure?

JavaScript can render DOM elements. In React, you'll see it generally in a component's render function:

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

very odd class names that are seemingly meaningless like .jkhl4350s

They're not meaningless at all. They may be using something like CSS modules , which gets rid of the global CSS namespace. That's why the class names appear to be a bunch of gibberish.

I'm trying to figure this out because I wanted to see the website structure and how they used to the diff JS libraries.

It's going to be very difficult to do that without seeing their pre-compiled source code, so unless their code is open-source somewhere, you'll likely run into difficulties understanding it (as you've pointed out, the compiled code looks a bit strange). You'll have better luck looking at the React docs.

This is a pretty broad question, so I'd recommend starting by reading the documentation in the two links I've provided above.

Answer 2

Via Shadow-DOM : Mozilla Developer Shadow-DOM