javascript - window.open 有时会打开链接,有时不会

标签 javascript jquery

我有一个像这样的按钮:

<button class="facebook text-white" href='http://www.facebook.com/sharer.php?u=url.com'>
    <img src="{{ asset('assets/img/facebook.png') }}"> 
    <span>{{"share" | trans}}</span>
</button>

我有一个名为social.js的js文件,其中包含以下内容:

$(document).ready(function(){
  $(".twitter").click(function(e) {
        e.preventDefault();
        var href = $(e.target).attr('href');
        window.open(href, "Share your stats on Twitter!", "height=300,width=550") 
    });

  $(".facebook").click(function(e) {
      e.preventDefault();
      var href = $(e.target).attr('href');
      window.open(href, "Share you stats on Facebook!", "height=300,width=550") 
  });
});

这会导致奇怪的行为,因为有时指定的链接会加载并打开,有时它只是停留在 about:blank 上。

每次点击后,是否打开链接似乎完全是随机的。

如何解决这种不稳定的行为?

最佳答案

使用jQuery UI dialog相当简单:(动态)创建一个 div 并调用 $(div).dialog():

$('.dialog-button').click(function (ev) {
    ev.preventDefault();
    $('<div/>', {
        title: 'Your facebook link here!',
        css: {
            position: 'relative'
        },
        append: $('<iframe/>', {
            src: $(ev.target).data('href'),
            css: {
                position: 'absolute',
                left: 0, right: 0,
                top: 0, bottom: 0,
                width: '100%', height: '100%',
                border: 0
            }
        })
    }).dialog({
        modal: true, resizable: false,
        height: 200, width: 350
    });
});
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
    <button class="dialog-button" data-href="http://example.com">Click me!</button>
</body>

关于javascript - window.open 有时会打开链接,有时不会,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29044581/

相关文章:

javascript - 使用 jQuery 或 javascript 从字符串中删除特殊字符(& 符号)

javascript - 如何让Chrome重绘SVG动态添加的内容?

javascript - 使用 PHP 变量打开 Bootstrap 模态框,无需重新加载网站

jquery - 使用 jQuery 一次切换一项

javascript - 如果高度大于/使用 Bootstrap 折叠导航

javascript - 缩放网页时出现问题

javascript - React 中 axios 请求失败

PHP、MySQL 和 Google Maps API 按城市和州名称生成 POI?

javascript - json 调用受 Access-Control-Allow-Origin 阻碍

javascript - 在html5 canvas中显示和绘制