我们可以永久修复HTML页面并且无法再次编辑吗？

Question

我希望没有人可以编辑或更改我的 html 文件，尤其是在浏览器上？？？

尝试新的提示和技巧，并获得更多有关网络开发和网站设计的知识..

想了解更多关于 HTML , CSS , JAVASCRIPT , PHP , C# , SQL , PYTHON....

Answer 1

如果您想要一个快速解决方案，阻止您的朋友通过检查页面来更改网站的 HTML，您可以使用 MutationObserver。

以下示例展示了如何检测页面的 HTML 何时已更新：

window.addEventListener('load', function() {
  const observer = new MutationObserver(function() {
    console.log('stop');
  })

  observer.observe(document.body, {
    characterData: true,
    childList: true,
    attributes: false,
    subtree: true
  });
})

<h2>Open Dev Tools and Edit</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

如果您想在 HTML 更新时恢复更改，一个肮脏的解决方案是在加载时存储主体的

innerHTML

，然后在更改时进行替换。

window.addEventListener('load', function() {
  const startHTML = document.body.innerHTML;
  const observer = new MutationObserver(function() {
    document.body.innerHTML = startHTML;
  })

  observer.observe(document.body, {
    characterData: true,
    childList: true,
    attributes: false,
    subtree: true
  });
})

<h2>Open Dev Tools and Edit</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>