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

【问题标题】：JavaScript / jQuery - Open current link in pop-up windowJavaScript / jQuery - 在弹出窗口中打开当前链接
【发布时间】：2010-07-10 13:18:03
【问题描述】：

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

如何在弹出窗口中打开此链接？并防止浏览器屏蔽

【问题讨论】：

标签： javascript jquery popup

【解决方案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。所以我会这样修改达人的例子：

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

如果弹出窗口被阻止，onclick 会返回true，它会跟随他们单击的链接，在新窗口或标签中打开它。这是一个后备，所以至少内容是可访问的（如果不漂亮的话）。

【讨论】：

我还应该补充一点，如果它在全尺寸浏览器窗口中打开，最好不要完全破坏您的弹出内容，因为这种回退，并且因为用户总是可以正确-单击链接并“在新选项卡或窗口中打开”，这完全绕过了 onClick 处理程序。

【解决方案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>

【讨论】：

根据window.open，我注意到一个有趣的错误。如果网址以http://... 开头，则在ie 中不起作用...

【解决方案3】：

这将打开一个新窗口。

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

【讨论】：

如果您使用的是 XHTML Strict，target 属性无效，您应该附加一个事件（例如“onclick”）。如果您使用的是较旧的文档类型，则可以使用 target="_blank"。
@Andrew - IMO 对 W3C 来说是一个绝对荒谬的决定（弃用 target）...在 HTML5 中已被撤销，以防万一有人发现这后来想知道。
我最近没有关注 HTML5 规范，但 latest revisions on W3C 说 target 仍然“没有必要。完全忽略它。”我不是为此辩护，但想法是 HTML 应该用于布局（定义页面数据之间的关系），CSS 用于表示，而 JS 用于行为。而在这个系统下，点击链接打开窗口是一种行为。也就是说，HTML5的CSS扩展充满了这种违规，所以我看不出是什么问题。

【解决方案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

【讨论】：

live 已在 jquery 1.6 中被弃用我相信，使用 .on("click", function(){});

【解决方案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>";

试试这个希望它能解决你的问题

【讨论】：

【解决方案6】：

你可以试试下面的代码，

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

【讨论】：