JavaScript / jQuery - 在弹出窗口中打开当前链接

Question

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

我该如何在弹出窗口中打开这个链接？同时又避免浏览器拦截它

- Alex

Answer 1

有"新窗口"和"弹出窗口"两种情况。使用target=_blank会在一个新的窗口中打开链接，但现代浏览器默认会把新窗口打开在新的标签页里，这似乎不是你想要的。

如果你想要一个真正的弹出窗口，你需要使用window.open()，并且一定要指定具体的宽度和高度，否则一些浏览器仍然会把新的窗口打开在一个新的标签页中。Darin提供的示例看起来不错。

至于弹出窗口阻止的问题，浏览器通常采用的方法是允许用户进行的弹出窗口（例如点击），而通过脚本自动弹出的弹出窗口会被阻止，比如这个例子。

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

然而，由于广告拦截成为一场逐渐升级的战争，你无法确定弹出窗口是否会打开。如果你的弹出窗口被拦截，window.open 调用将返回 null。因此，我会像这样修改 Daren 的示例：

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

如果弹出窗口被阻止，onclick将返回true，通过在新窗口或标签页中打开链接来遵循他们点击的链接。这是一种备用方法，因此至少可以访问内容（即使不太美观）。

- jpsimons

---

另外，我应该补充一点，最好让弹出内容在打开全屏浏览器窗口时不会完全崩溃，因为这种情况需要应对备选方案，并且用户可以始终右键单击链接并选择“在新标签页或窗口中打开”，从而完全绕过onClick处理程序。 - jpsimons

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>

- Darin Dimitrov

---

我注意到一个有趣的错误，涉及 window.open。如果 URL 以 http://... 开头，在 IE 中它不起作用。 - Simon

Answer 3

这将会打开一个新窗口。

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

- Codler

---

如果您正在使用XHTML Strict，target属性无法通过验证，因此您应该改为附加事件（例如“onclick”）。如果您使用的是旧版文档类型，则可以使用target="_blank"。 - Andrew

我认为W3C取消target属性是一个非常荒谬的决定，这个决定在HTML5中被撤销了。如果有人后来看到这条信息，请注意。 - Nick Craver

我最近没有关注HTML5规范，但是W3C的最新修订说target仍然是“不必要的。完全省略它。”我并不是在为此辩护，但这个想法是HTML应该用于布局（定义页面数据之间的关系），CSS用于呈现，JS用于行为。在这个系统下，点击链接打开窗口是一种行为。话虽如此，HTML5的CSS扩展充满了这种违规行为，所以我不明白问题出在哪里。 - Andrew

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

- user285594

---

live在jQuery 1.6中已被弃用，建议使用.on("click", function(){});。 - mahatmanich

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

试一下，希望能解决你的问题。

- Arunav dutta gupta

Answer 6

你可以尝试下面的代码：

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

- creativedirektor