Can we permanently fixed HTML page and cannot edit again?

Question

i want that no one can edit or change my html file especially on browser ???

Try new tips & tricks and get more knowledge about web-development and website design..

want to know more ab HTML , CSS , JAVASCRIPT , PHP , C# , SQL , PYTHON....

Answer 1

You can achieve this by disabling right click Disable Right-Click: While this won't prevent experienced users from modifying your HTML, it can deter casual users. You can add a script to disable the right-click context menu, making it more challenging for users to view or edit the page source.

 html
   <script>
     document.addEventListener('contextmenu', function (e) {
       e.preventDefault();
     });
   </script>

Keep in mind that this is not foolproof and can be bypassed easily.

Answer 2

If you want a quick solution that stops your friends from changing the site's HTML by inspecting the page, you can use a MutationObserver.

The following example shows how you can detect when the page's HTML has been updated:

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>

If you want to revert the change when the HTML is updated, a dirty solution would be to store the body's innerHTML on load, then replace on change.

This is mostly a for-fun thing though - don't use this on a real site, since completely overwriting innerHTML will break your site. This is because you are essentially destroying every element and recreating it, causing previously bound event listeners to be lost.

window.addEventListener('load', function() {
  const startHTML = document.body.innerHTML;
  const observer = new MutationObserver(function() {
    if(document.body.innerHTML != startHTML){
      alert('nice try bro');
      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>