“HTML Header Loads via HTTP into main html file from a container html file but Fails with File Protocol ” [duplicate]

I loaded the header from container.html using following code in my main html file but it cannot load header locally with the file system (fails to load header when I run it with file://). Could you help me to update it so that it works with both file:// and http://? Thank you.

  <!-- Load Header Navigation -->
            <div id="header-container"></div>
      
      <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery.dropotron.min.js"></script>
        <script src="assets/js/browser.min.js"></script>
        <script src="assets/js/breakpoints.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>


    <!-- Script to Load Header and Initialize Dropdowns -->
    <script>
        $(document).ready(function(){
            $("#header-container").load("container.html", function() {
                // Reinitialize dropdown menus if needed
                // Example: If using dropotron for dropdowns, reinitialize it here
                $('#nav > ul').dropotron();
            });
        });
    </script>

html header loading in main html is not working locally with file://