How to open a new html page and also a link at one button click

user_13071321 0
Viewed 205

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.com">Download</a>
        </button>
    </div>
</li>
html javascript
5 Answers

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.com" 
          href="https://example2.com">Download</a>
  </div>
</li>

user_2957830

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.com');"  id="buttton1" class="buttton7"   href="https://www.w3schools.com"  >Download</a>
    </button>
</div>
</li>

user_59230690

Below should do the job:

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

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

user_26476710

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.com/'">Go to another page in an URL</button>
user_140147240 

<!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.com">Download</a>
        </button>
    </div>
</li>
</body>
</html>

user_67091110
Related