JavaScript / jQuery - 在彈出窗口中打開當前鏈接 window

Question

<a href="http://google.com">Link</a>

如何在彈出窗口中打開此鏈接 window？ 並防止瀏覽器阻止它

Answer 1

有“新窗口”，還有“彈出窗口”。 使用target=_blank將在新窗口中打開，但現代瀏覽器默認將新窗口放在新選項卡中 。 聽起來這不是你想要的。

對於實際彈出窗口，您需要window.open() ，並確保包含一些特定的寬度和高度，否則某些瀏覽器仍會將新窗口放在新選項卡中。 達林的例子對我來說很好看。

至於彈出窗口阻止，瀏覽器采用的一般方法是允許用戶操作啟動的彈出窗口（例如單擊），而阻止通過腳本自發啟動的彈出窗口：

<script type="text/javascript">
    window.open("http://www.google.com/", "Google", "width=500,height=500");
</script>

但是，廣告攔截是一場不斷升級的戰爭，您永遠無法確定彈出窗口是否會打開。 如果彈出窗口被阻止，則window.open調用返回null。 所以我會像這樣修改達人的例子：

<a href="http://www.google.com/"
    onclick="return !window.open(this.href, 'Google', 'width=500,height=500')"
    target="_blank">

如果彈出窗口被阻止，則onclick將返回true ，這將在他們單擊的鏈接之后通過在新窗口或選項卡中打開它來實現。 這是一個后備，所以至少內容是可訪問的（如果不是很漂亮）。

Answer 2

<a href="http://google.com" onclick="window.open(this.href, 'windowName', 'width=1000, height=700, left=24, top=24, scrollbars, resizable'); return false;">Link</a>

Answer 3

這將打開一個新窗口。

<a href="http://google.com" target="_blank">Link</a>

Answer 4

jQuery的：

<script>
$('#button2').live("click",function(e){    
  window.open("http://www.google.com", "yyyyy", "width=480,height=360,resizable=no,toolbar=no,menubar=no,location=no,status=no");
return false;
});
</script>

<a href="#" id="button2" ><img src="images/online.png"></a><br/>Online

Answer 5

我的工作正常

        <style>
        td,
th {
    border: 2px solid rgb(190, 190, 190);
    padding: 20px;
}

td {
    text-align: center;
}

tr:nth-child(even) {
    background-color: #eee;
}

th[scope="col"] {
    background-color: #696969;
    color: #fff;
}

th[scope="row"] {
    background-color: #d7d9f2;
}

caption {
    padding: 20px;
    caption-side: bottom;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 2px;
    font-family: sans-serif;
    font-size: 1.5rem;
}

下面的JS

</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

下面的腳本

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

代碼

echo "<td><ul class='list-inline'>";      
           echo "<li><a href=# title=Increaseby".$d."%&nbsp;".$h."%&nbsp;".$k."% data-toggle=popover data-placement=top data-content=".$p4."&nbsp;".$p6."&nbsp;".$p8.">View Increase</a></li>";
           
            echo "</ul></td>";

試試這個希望它能解決你的問題

Answer 6

你可以試試下面的代碼，

<script type="text/javascript">
     window.open(location.href, "Google", "width=500,height=500");
</script>