我有一个 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 解决方案很满意。
最佳答案
JavaScript:
避免使用内联 on* 处理程序(onclick、oninput 等)并在 JavaScript 本身中使用事件监听器。删除
onclick处理程序并使用querySelectorAll检索所有按钮并将它们分配给一个变量，例如btns。使用
forEach()向btns变量中的每个按钮添加一个click事件监听器，该变量将加载一个名为比如说，toggleFrames()。在该函数内，再次使用
querySelectorAll检索类名为tabcontent的所有元素，并将它们分配给一个变量，例如frames>.使用
subtr()从按钮 ID 中检索数字，例如btn_2中的2，您将使用它与变量frames中每个选项卡内容的 ID 进行比较。在变量
frames上使用forEach()并检查单击按钮的 id 中的数字是否与每个选项卡内容的 id 中的数字匹配，例如sec2中的2，如果存在，请添加active类名并更改该类的 cssdisplay属性要阻止的元素。使用
window.location.href检索当前页面URL，然后使用search()方法检查 url 字符串是否包含您的 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>关于javascript - 如何根据URL改变HTML内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54100654/