區塊鏈如何隱藏其HTML源代碼？

Question

當您導航至： blockchain.info

您會注意到，如果單擊頁面上的view-source ，它將顯示與您inspect-element不同的HTML上下文。 我的問題是，他們如何做到這一點？

我了解他們使用的是AngularJS框架中的.pug模板。 但是，如果未從客戶端（瀏覽器）端加載它們，我的瀏覽器如何知道從何處讀取它們？

另外，如果我要在頁面上插入jQuery，jQuery是否會知道何時觸發事件on('click', 'submit', 'whatever') etc ... ？

Answer 1

單擊View Source ，您將看到服務器發回的內容。 許多頁面不會發送回完整的HTML頁面，而是發送一些框架HTML並通過JavaScript添加其余功能

當您Inspect Element ，您正在查看瀏覽器的DOM表示形式，其中包括通過JavaScript完成的所有操作。 有關直觀的解釋，請參閱CSS技巧上的這篇文章： https : //css-tricks.com/dom/

Answer 2

任何呈現HTML客戶端（React，Angular，Vue）的框架都可以做到這一點。 實際的源代碼實際上可以只是一些基本的html樣板文件和一個div，然后可以通過Javascript之類的應用程序加載該div。 因此，當您查看頁面的源代碼時，就會看到此基本模板。 但是，當檢查元素時，Chrome開發工具（和其他工具）正在檢查正在客戶端渲染的元素。 您的瀏覽器已將這些元素放在DOM上，直到執行代碼后，它們才在源代碼中不存在。 希望這有助於清理問題。