使用javascript / jquery打开新背景选项卡中的链接

时间:2014-02-25 10:37:07

标签: javascript jquery

我希望功能在用户点击链接时默认打开网站中的所有链接到新的背景标签。我已经检查了所有,但没有一个提供适用于所有浏览器的解决方案。我已经引用了以下两个链接来编写我的代码:

Working example in chrome

Suggested modifications for ie

我有以下代码:

<html>
<head>
<style type="text/css">
.link{ color: #0055ff; cursor: pointer; text-decoration: underline; }
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".link").on('click', function(event){
var $this = $(this);
    var a = document.createElement("a");

    a.href = $this.href;


    if( document.createEvent ) {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                            true, false, false, true, 1, a);
        a.dispatchEvent( evObj );

    } else if( document.createEventObject ) {
        var evObj = document.createEventObject();
        evObj.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                            true, false, false, true, 1, a);
        a.fireEvent( 'onclick', evObj );
    }
});
});
</script>
</head>
<body>
<span class="link" data-href="http://www.google.com">Go to Google</span>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

jQuery(将被弹出窗口拦截器阻止)

<html>
<head>
<style type="text/css">
.link{ color: #0055ff; cursor: pointer; text-decoration: underline; }
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".link").on('click', function(event){
var $this = $(this);

    window.open($this.href, '_blank');

});
});
</script>
</head>
<body>
<span class="link" data-href="http://www.google.com">Go to Google</span>
</body>
</html>

Javascript(不会被弹出窗口拦截器阻止)

<html>
<head>
<style type="text/css">
.link{ color: #0055ff; cursor: pointer; text-decoration: underline; }
</style>
</head>
<body>
<span class="link" onclick="window.open('http://www.google.com', '_blank')">Go to Google</span>
</body>
</html>

根据问题的主题发表评论:

人们可以选择他们的浏览器应该如何操作,这对我们的开发人员来说不应该覆盖...更好的方法是通过询问他们是否想要在新的选项卡/窗口中打开来为他们提供一种方式或者不首先......其次,告诉他们为什么他们应该按照您的喜好去做,以及在您的网站上这样做的好处。这可能会让你到达你想要的地方