Subdomains for html file-CodePudding

I want to be able to test my html file using "someDirectory/someHTML.html/someSubDomain" Is there a way to implement this without using the div tag and javascript?

The best I got to this was using hidden div tags, javascript, and a div tag with the id of screen by just changing the innerHTML variable of the screen div tag to the innerHTML variable of the current page's div tag:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .page {
        display: none;
      }
    </style>
    <p id="display">
      Current page:
      p1
    </p>
    <div id="screen"></div>
    <div id="page1" >
      <!--- Page one code instead of button --->
      <button type="button" onclick="nav('p2')">Click me</button>
    </div>
    <div id="page2" >
      <!--- Page two code instead of button --->
      <button type="button" onclick="nav('p1')">Don't click me</button>
    </div>
    <script>
      var currPage = 'p1';
      var disp = document.getElementById('display');
      var screen = document.getElementById('screen');
      var pages = {
        p1:document.getElementById('page1'),
        p2:document.getElementById('page2')
      };
      function nav(page) {
        screen.innerHTML = pages[page].innerHTML;
        currPage = page;
        disp.innerHTML = `Current page:\n${page}`;
        console.log('showed ' page);
      }
      nav('p1');
    </script>
  </body>
</html>

The only thing is that it is EXTREMLY inefficient and I just want to use a slash

CodePudding user response：

I think you want to load page contents dynamically so you can use AJAX. create your index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
</head>

<body>

    <nav>
        <a href="/index.html"> <button id="index">Page 1</button></a>
        <button id="page2" onclick="loadPage(this)">Page 2</button>
        <button id="page3" onclick="loadPage(this)">Page 3</button>
    </nav>
    <p id="display">
        Contents from page 1
    </p>
    <script>
        function loadPage(p) {
            let URL = "./"   p.id   '.html';
            let Container = document.getElementById("display");

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    Container.innerHTML = this.responseText;
                }

                
                console.log('Request send')
            }
            xhttp.open("GET", URL, false);
            xhttp.send();

        }
    </script>
</body>

</html>

Then create the files you want to load the contents in index.html

Page1.html

<h1> Contents from page 1.</h1>
<p> Your paragraphs here</p>

Page2.html

<h1> Contents from page 2. </h1>
<p> Your paragraphs for page 2 are written here. </p>

CodePudding user response：

Would a hash (#) do instead of a slash (/) in the address bar?

That would fit your needs if those are that you whish to have only one HTML file located on your hard drive. The address bar would look like c://users/AverseMoon/myHTMLpage#page2.

You can show/hide any div with it using a hash in the adresse bar. (A subdomain really is somthing else).

It would look like this:

// The current page display
var disp = document.getElementById('display');

// The hashchange event handler
window.addEventListener("hashchange", function() {

  // Update display
  let currentHash = location.hash
  disp.innerHTML = "Current page: "   currentHash.substring(1)

  // Hide all .page
  document.querySelectorAll(".page").forEach(function(page) {
    page.style.display = "none";
  })
  
  // Show the current page
  document.querySelector(currentHash).style.display = "block";
})


// Page1 visible on load
document.getElementById('page1').style.display = "block";

.page {
  display: none;
}
.page a{
  border: 1px solid grey;
  border-radius: 4px;
  padding: 4px;
  background: lightgrey;
  text-decoration: none;
  color: black;
}

<p id="display">
  Current page: page1
</p>

<div id="page1" >
  <a href="#page2"> Go to page #2</a>
</div>
<div id="page2" >
  <a href="#page1"> Go to page #1</a>
</div>