admin管理员组

文章数量:1023738

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.

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
  • php
  • html
  • single-page-application
Share Improve this question edited Jan 9, 2019 at 12:11 AndrewL64 16.3k8 gold badges50 silver badges85 bronze badges asked Jan 8, 2019 at 22:29 maheshmahesh 1,09812 silver badges25 bronze badges 4
  • 1 You can add parameters at the end of a url that can be accessed in the code. Here is documentation on how to get these parameters in php: php/manual/en/reserved.variables.get.php – lfitzgibbons Commented Jan 8, 2019 at 22:38
  • 1 As an aside, don't concatenate classnames like you're doing with getElementById("btn_1").className += " active"; use the element.classList instead. If you have var btn1 = document.getElementById("btn_1") you can add and remove classes with btn1.classList.add('active') and btn1.classList.remove('active') – Stephen P Commented Jan 8, 2019 at 22:55
  • @Logiwan992 Thanks! That would be a good solution. Perhaps you could write it as an answer? – mahesh Commented Jan 9, 2019 at 10:07
  • @StephenP That is a good hint. Looks much more elegant! – mahesh Commented Jan 9, 2019 at 10:08
Add a ment  | 

2 Answers 2

Reset to default 3

JavaScript:

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

  2. Use forEach() to add a click event listener to each button in your btns variable that will load a function called say, toggleFrames().

  3. Inside that function, retrieve all the elements with class name tabcontent using querySelectorAll again and assign them to a variable, say frames.

  4. Use subtr() to retrieve the number from your button id e.g. the 2 in btn_2 which you will use to pare with the ids of each tab content in the variable frames.

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

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

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>

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.

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
  • php
  • html
  • single-page-application
Share Improve this question edited Jan 9, 2019 at 12:11 AndrewL64 16.3k8 gold badges50 silver badges85 bronze badges asked Jan 8, 2019 at 22:29 maheshmahesh 1,09812 silver badges25 bronze badges 4
  • 1 You can add parameters at the end of a url that can be accessed in the code. Here is documentation on how to get these parameters in php: php/manual/en/reserved.variables.get.php – lfitzgibbons Commented Jan 8, 2019 at 22:38
  • 1 As an aside, don't concatenate classnames like you're doing with getElementById("btn_1").className += " active"; use the element.classList instead. If you have var btn1 = document.getElementById("btn_1") you can add and remove classes with btn1.classList.add('active') and btn1.classList.remove('active') – Stephen P Commented Jan 8, 2019 at 22:55
  • @Logiwan992 Thanks! That would be a good solution. Perhaps you could write it as an answer? – mahesh Commented Jan 9, 2019 at 10:07
  • @StephenP That is a good hint. Looks much more elegant! – mahesh Commented Jan 9, 2019 at 10:08
Add a ment  | 

2 Answers 2

Reset to default 3

JavaScript:

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

  2. Use forEach() to add a click event listener to each button in your btns variable that will load a function called say, toggleFrames().

  3. Inside that function, retrieve all the elements with class name tabcontent using querySelectorAll again and assign them to a variable, say frames.

  4. Use subtr() to retrieve the number from your button id e.g. the 2 in btn_2 which you will use to pare with the ids of each tab content in the variable frames.

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

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

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>

本文标签： javascriptHow to change HTML content based on URLStack Overflow

版权声明：本文标题：javascript - How to change HTML content based on URL? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745607562a2158812.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。