How to open a new html page and also a link at one button click
Question
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>
5 answers
solution1
4 ACCPTED 2020-07-29 07:23:14
Something like this
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>
solution2
1 2020-07-29 07:22:07
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>
solution3
1 2020-07-29 07:47:57
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
solution4
1 2020-07-29 09:11:35
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>
solution5
-1 2020-07-29 07:42:25
<.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.