【问题标题】:How to open new window/tab but focus on opener window?如何打开新窗口/标签但专注于开启者窗口?
【发布时间】:2014-12-26 17:15:34
【问题描述】:

我想模拟 ctrl + 单击交互以在所有浏览器的背景选项卡中打开链接。

稍有不同的是链接是基于一个被选中的复选框。

这是 JSbin + 问题的代码以供将来参考:

JSBin 链接

http://jsbin.com/hisozawibu/2/

代码

<input class="ad-check" data-url="http://www.google.com" type="checkbox" id="test" name="test" />
<label for="test">Test</label>

$('body').on('click', '.ad-check' ,function(){
    var self = $(this);
    window.open(self.attr('data-url'), "_blank");
    window.blur();
});

我看过图书馆,但对于这么简单的事情似乎没有必要。

当您搜索酒店并选择供应商时,可以在 Kayak 上看到我想要实现的技术。

http://www.kayak.co.uk/hotels

B

【问题讨论】:

  • 你为什么说背景??
  • 标签没有获得焦点。
  • 复制了ctrl的方法,鼠标点击链接。
  • 打开新窗口,聚焦当前窗口
  • 打开新标签,关注当前标签。但是,如果只能使用新窗口,那将同样有用

标签: javascript jquery new-window


【解决方案1】:

这就是你需要的。

http://jsfiddle.net/5fz2u6Lq/

$('body').on('click', '.ad-check' ,function(){
    var self = $(this);
    var win = window.open(self.attr('data-url'), "_blank", 'modal=yes');
    win.blur();
});

编辑:

如果你也关注旧的怎么办。

http://jsfiddle.net/5fz2u6Lq/1/

$('body').on('click', '.ad-check' ,function(){
    var self = $(this);
    var current = window;
    var win = window.open(self.attr('data-url'), "_blank", "modal=yes");
    win.blur();
   current.focus();

});

【讨论】:

  • 这不是我需要的,它会打开一个新窗口并将焦点放在新窗口上。这与我提供的没有什么不同,除了它是一个新窗口,而不是一个标签
  • 它没有将焦点放在新窗口上……我使用的是 IE9,它可以工作。你想要没有焦点的新标签?
  • 这不是 Chrome 中的行为。
  • 你想要没有焦点的新标签或新窗口?
  • 两者都可以,但它必须跨浏览器工作。这似乎是目前唯一的解决方案 - github.com/hpbuniat/jquery-popunder
【解决方案2】:

注意,使用这个http://jsfiddle.net/azproduction/LRc7Z/ 模式

试试

html

<input class="ad-check" data-url="http://www.google.com" type="checkbox" id="test" name="test" />
<label for="test">Test</label>
<a id="ad-check-link" href=""></a>

js

var simulateClick = function (ctrl, shift, isMiddle) {
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click'
                       , true, true, window
                       , 0, 0, 0, 0, 0, ctrl
                       , false, shift, false
                       , isMiddle ? 1 : 0, null );
    document.getElementById('ad-check-link').dispatchEvent(evt);
};
// substituted `.one()` for `.on()` to prevent calling action
// if clicked second time, after being initially checked by first click
$('body').one('click', '.ad-check' ,function(){
    var self = $(this);
    var link = $("a#ad-check-link")
               .prop("href", self.attr('data-url'))[0];

    link.onclick = simulateClick(true, false, false);
});

jsfiddle http://jsfiddle.net/guest271314/awjvbLt5/1/

【讨论】:

  • 一件事 - 你如何用多个复选框做到这一点?
  • @PI。对于多个复选框,可以在input.ad-check 元素上调用.each(),利用nameida 元素的其他属性;将属性作为simulateClick 的元素id 参数传递。谢谢
猜你喜欢
  • 2014-11-05
  • 2020-05-03
  • 2017-04-07
  • 2012-08-26
  • 2011-07-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多