2. Algorithm
  3. javascript - How to open a new html page and also a link at one button click - Stack Overflow

javascript - How to open a new html page and also a link at one button click - Stack Overflow

admin2025-04-19  1

So, what I want to do is open a URL that I am providing in href and at the same time open a new html page. On button click it leads to the URL in a new window with target="_blank". But what I want to do is open the link in the new window and also open a new HTML page in the previous window.

Below is my code,

<li class="search-li">
    <div class="collapsible-header collapsible-noborder sakura-lighter-bg">
        <i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
    </div>
    <div class="collapsible-body collapsible-noborder sakura-midlight-bg">
        <button class="primary download">
            <a id="buttton1" class="buttton7" target="_blank" href="example">Download</a>
        </button>
    </div>
</li>

So, what I want to do is open a URL that I am providing in href and at the same time open a new html page. On button click it leads to the URL in a new window with target="_blank". But what I want to do is open the link in the new window and also open a new HTML page in the previous window.

Below is my code,

<li class="search-li">
    <div class="collapsible-header collapsible-noborder sakura-lighter-bg">
        <i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
    </div>
    <div class="collapsible-body collapsible-noborder sakura-midlight-bg">
        <button class="primary download">
            <a id="buttton1" class="buttton7" target="_blank" href="example.">Download</a>
        </button>
    </div>
</li>
  • javascript
  • html
Share Improve this question edited Jul 29, 2020 at 7:17 jonatjano 3,7381 gold badge16 silver badges20 bronze badges asked Jul 29, 2020 at 7:15 PriyanshuPriyanshu 1442 silver badges13 bronze badges 1
  • It's better to avoid nesting interactive elements, like link inside button and vice versa. Besides being invalid HTML, such code can confuse browsers which element's action should trigger first. – Ilya Streltsyn Commented Jul 29, 2020 at 7:29
Add a ment  | 

5 Answers 5

Reset to default 4

Something like this

Test page

The click will open a new window with the data-href and change existing window with href

window.addEventListener("load", function() {
  document.getElementById("button1").addEventListener("click", function() {
    window.open(this.getAttribute("data-href"), "_blank")
  })
})
<li class="search-li">
  <div class="collapsible-header collapsible-noborder sakura-lighter-bg">
    <i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
  </div>
  <div class="collapsible-body collapsible-noborder sakura-midlight-bg">
    <a id="button1" class="primary download button7" 
     data-href="https://example1." 
          href="https://example2.">Download</a>
  </div>
</li>

You need to use window.open() method.

<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
    <i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
    <button  class="primary download">
        <a   onclick="window.open('http://google.');"  id="buttton1" class="buttton7"   href="https://www.w3schools."  >Download</a>
    </button>
</div>
</li>

You can use This

<button onclick="window.location.href='page2.html'">Go to another page in your folder</button>

or you can use a link like that

<button onclick="window.location.href='https://example./'">Go to another page in an URL</button>

Below should do the job:

<a onclick="window.open('http://google.');" id="buttton1" 
     class="buttton7" href="http://yahoo.">Download</a>

No need of _blank since window.open() does that for us, while the current window updates its location from href attribute

<!DOCTYPE html>
<html>
<body>
<li class="search-li">
    <div class="collapsible-header collapsible-noborder sakura-lighter-bg">
        <i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
    </div>
    <div class="collapsible-body collapsible-noborder sakura-midlight-bg">
        <button class="primary download">
            <a id="buttton1" onmouseup="window.location.replace('/blank.html');" class="buttton7" target="_blank" href="example.">Download</a>
        </button>
    </div>
</li>
</body>
</html>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745000856a279216.html

javascriptHow to open a new html page and also a link at one button clickStack Overflow

最新回复(0)