如何根据URL更改HTML内容？

I have a HTML page where I have two IFrames, and there are two buttons controlling which of them is visible.

Here is the index.html:

<!DOCTYPE html>
<html>
<head>
  <title>MyPage</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body onload="init()">
  <div class="main">
    <div class="leftbar">
        <button id="btn_1" class="leftbar-button" onclick="openTab(event, 'sec1')">Section1</button>
        <button id="btn_2" class="leftbar-button" onclick="openTab(event, 'sec2')">Section2</button>
    </div>

    <div id="sec1" class="tabcontent">
      <iframe src="section1.html"></iframe>
    </div>

    <div id="sec2" class="tabcontent">
      <iframe src="section2.html"></iframe>
    </div>    
  </div>

  <div id="clear" class="clear" style="clear: both; height: 0;"></div>

  <script src="main.js"></script>
</body>
</html>

Here is the main.js:

function onSwInit()
{
    // Set the home page to be displayed
    document.getElementById("sec1").style.display = "block";
    document.getElementById("btn_1").className += " active";
}

function openTab(evt, tabName)
{
  // Hide all content
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++)
  {
    tabcontent[i].style.display = "none";
  }

  // Display the clicked section
  tablinks = document.getElementsByClassName("leftbar-button");
  for (i = 0; i < tablinks.length; i++)
  {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Now, as one can see, by default, the page begins with btn_1 active and the corresponding IFrame section1.html visible. Now the problem is, suppose I want to share the URL of the page with the IFrame section2.html visible, how do I do it?

I am fine with a HTML, Javascript or PHP solution.

JavaScript:

Avoid using inline on* handlers (onclick, oninput, etc) and use event listeners within your JavaScript itself. Remove the onclick handlers and use querySelectorAll to retrieve all the buttons and assign them to a variable, say btns.
Use forEach() to add a click event listener to each button in your btns variable that will load a function called say, toggleFrames().
Inside that function, retrieve all the elements with class name tabcontent using querySelectorAll again and assign them to a variable, say frames.
Use subtr() to retrieve the number from your button id e.g. the 2 in btn_2 which you will use to compare with the ids of each tab content in the variable frames.
Use forEach() on the variable frames and check if the number in the id of the clicked button matches the number in the id of each tabcontent e.g. the 2 in sec2 and if they do, add the active class name and change the css display property of that element to block.
Use window.location.href to retrieve the current page url and then use the search() method to check if the url string contains the id of one of your iframes. If there is a match, display that iframe and hide the other iframe.

Check and run the Code Snippet below for a practical example of the above:

//Check URL

function checkUrl() {
  var url = window.location.href;
  var frames = document.querySelectorAll('.tabcontent');
  frames.forEach(frame => {
    if( url.search( frame.id ) > 0 ) {
      frame.style.display = "block";
      frame.classList.add("active");
    } else {
      frame.style.display = "none";
      frame.classList.remove("active");
    }
  })
}

window.onload = checkUrl();

//Check Button Click

var btns = document.querySelectorAll(".leftbar-button");

function toggleFrame(e){
  var frames = document.querySelectorAll('.tabcontent');
    var x = e.target.id.substr(-1);
  frames.forEach(frame => {
    if(frame.id.includes(x)){
        frame.style.display = "block";
        frame.classList.add("active");
    } else {
        frame.style.display = "none";
        frame.classList.remove("active");
    }
  });
  
}

btns.forEach(btn => {
    btn.addEventListener("click", toggleFrame);
})

.tabcontent {padding:20px 10px;text-align:center;background-color: #000;color:#FFF;}

 <div class="main">
    <div class="leftbar">
        <button id="btn_1" class="leftbar-button">Section1</button>
        <button id="btn_2" class="leftbar-button">Section2</button>
    </div>
    <hr />
    <div id="sec1" class="tabcontent">
      <h1>
      Iframe 1 here
      </h1>
    </div>

    <div id="sec2" class="tabcontent" style="display: none;">
      <h1>
      Iframe 2 here
      </h1>
    </div>    
  </div>

</div>

PHP:

You can't; that's the whole point of a single page application (SPA). If you want to be able to share individual iframes, you'll need to navigate to section2.html directly. Naturally, that won't have any of the surrounding content.

If you want that surrounding content (to be visible on each page), you'd be better off making use of HTML Imports, jQuery.load(), or better yet, PHP includes:

Page 1:

<?php include('header.php'); ?>
<!-- iframe content -->
<?php include('footer.php'); ?>

Page 2:

<?php include('header.php'); ?>
<!-- iframe content -->
<?php include('footer.php'); ?>

header.php:

<!DOCTYPE html>
<html>
<head>
  <title>MyPage</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body onload="init()">
  <div class="main">
    <div class="leftbar">
        <button id="btn_1" class="leftbar-button" onclick="openTab(event, 'sec1')">Section1</button>
        <button id="btn_2" class="leftbar-button" onclick="openTab(event, 'sec2')">Section2</button>
    </div>

footer.php:

  <div id="clear" class="clear" style="clear: both; height: 0;"></div>

  <script src="main.js"></script>
</body>
</html>