Question

我有一个HTML页面，其中有两个IFrame，并且有两个按钮控制其中的哪个可见。

这里是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>

这里是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";
}

现在，可以看到，默认情况下，该页面以btn_1处于活动状态开始，并且相应的IFrame section1.html可见。现在的问题是，假设我想与可见的IFrame section2.html共享页面的URL，我该怎么做？

我可以使用HTML，Javascript或PHP解决方案。

Answer 1

JavaScript：

避免使用内联on *处理程序（onclick，oninput等），并在JavaScript本身中使用事件侦听器。删除onclick处理程序，然后使用querySelectorAll检索所有按钮并将它们分配给变量，例如btns。
使用forEach()向click变量中的每个按钮添加btns事件侦听器，以加载名为toggleFrames()的函数。
在该函数内部，再次使用tabcontent检索类名称为querySelectorAll的所有元素，并将它们分配给变量，例如frames。
使用subtr()从按钮ID中检索number，例如2中的btn_2，您将使用它与变量frames中每个选项卡内容的ID进行比较。
在变量forEach()上使用frames，并检查所单击按钮的ID中的数字是否与每个tabcontent的ID中的数字匹配。 2中的sec2，如果确实如此，则添加active类名，然后将该元素的CSS display属性更改为block。
使用window.location.href检索当前页面的网址，然后使用search()方法检查网址字符串是否包含其中一个iframe的ID。如果存在匹配项，则显示该iframe并隐藏其他iframe。

检查并运行下面的代码段，以获取上述示例：

//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>

Answer 2

PHP：

您不能；这就是单页面应用程序（SPA）的重点。如果您希望能够共享单个iframe，则需要直接导航至::zero。自然，它不会包含任何周围的内容。

如果您希望周围的内容（在每个页面上都可见），最好使用 HTML Imports ， jQuery.load() ，或者更好的是， PHP includes ：

第1页：

section2.html

第2页：

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

header.php：

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

footer.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>

如何根据URL更改HTML内容？

2 个答案:

JavaScript：

PHP：