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>