Question

我正在尝试通过从浏览器中移动到单独的弹出窗口来改进我为我的网站创建的音乐播放器，我创建/操作了我发现的代码以使jQuery占用href值并将其发送到一个新窗口，只有在点击<a>标签时才会出现问题，它会执行href click和jQuery操作（就像它一样）。我正在尝试找到一种有效的方法，以便在用户禁用JavaScript时，他们至少可以在新标签中使用音乐播放器，而不是根本不能听，但我不确定如何要解决这个问题。将元素href设置为var，然后删除href属性工作？或者这会导致错误吗？

示例HTML：

<a href="this_page.cfm?song=1" target="_blank" class="playSong" id="#artist# - #song#">Play Track</a>

示例jQuery：

<script type="text/javascript">
    $(document).ready(function(){
        $(".playSong").click(function(){
            var url = $(this).attr('href');
            var windowName = $(this).attr('id');

            window.open(url, windowName, "height=300,width=400");
        });
    });
</script>

Answer 1

或者使用e.preventDefault()或return false

$(document).ready(function(){
    $(".playSong").click(function(e){
        e.preventDefault(); // this will prevent the browser to redirect to the href
        // if js is disabled nothing should change and the link will work normally
        var url = $(this).attr('href');
        var windowName = $(this).attr('id');
        window.open(url, windowName, "height=300,width=400");
    });
});

Answer 2

使用data-*属性比将歌曲和艺术家数据存储在ID中更好。

<a href="this_page.cfm?song=1" target="_blank" class="playSong" data-info="#artist# - #song#">Play Track</a>

如果启用了Javascript，

.preventDefault()或return false;可用于阻止浏览器关注该链接：

$(".playSong").click(function(){
    var url = $(this).attr('href');
    var windowName = $(this).data('info'); // <-- using .data()

    window.open(url, windowName, "height=300,width=400");
    return false;
});

Answer 3

点击链接后，您需要返回false。如下：

    $(document).ready(function(){
        $(".playSong").click(function(){
            var url = $(this).attr('href');
            var windowName = $(this).attr('id');

            window.open(url, windowName, "height=300,width=400");
            return false;
        });
    });

Answer 4

以下是您问题的实际完整答案

如果禁用javascript或弹出窗口拦截器处于活动状态，如何使链接在新窗口中工作

$(function(){
  $(".playSong").on("click",function(e){
    var w = window.open(this.href, this.target, "height=300,width=400");
    if (w) e.preventDefault(); // prevent link but only if not blocked
  });
});

JQuery链接到打开新窗口

4 个答案: