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

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>

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>

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 Priyanshu 1442 silver badges13 bronze badges

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

Sorted by: 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

5 Answers 5

与本文相关的文章

评论列表(0)