簡體   English   中英

如何打開一個新的 html 頁面以及一鍵點擊鏈接

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

所以,我想做的是打開我在href中提供的 URL,同時打開一個新的 html 頁面。 單擊按鈕時,它會導致新的 window 中的 URL 和target="_blank" 但是我想做的是在新的window中打開鏈接,同時在之前的window中打開一個新的HTML頁面。

下面是我的代碼,

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

像這樣的東西

測試頁

單擊將使用 data-href 打開一個新的 window 並使用 href 更改現有的 window

 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>

您需要使用 window.open() 方法。

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

下面應該做的工作:

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

不需要_blank ,因為window.open()為我們做了這個,而當前的 window 從href屬性更新了它的位置

你可以使用這個

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

或者你可以使用這樣的鏈接

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

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM