2012-11-16 90 views
9

当用户将商品添加到我们的购物车时,它会在新选项卡中打开我们的商店。不同的网站很奇怪。检查浏览器选项卡是否已打开,因此我不制作额外的选项卡

我想检查标签页是否已经打开,然后用第二个项目重新填充它,而不是用更新的购物车打开另一个标签页。

有没有办法检查这与js?我想我可以跟踪我们打开选项卡,但我没有看到我怎么能确认它没有关闭的时间添加项目之间的购物车没有做一些Ajax请求ping这两个页面,这似乎是矫枉过正。

那么简单地说,你如何检查浏览器选项卡是否已经打开?

一个解决方案编辑: 第一:

var tab = window.open('http://google.com','MyTab'); 

然后:

if(tab) { 
    var tab = window.open('http://yahoo.com','MyTab'); 
} 
+3

,我认为你需要做的就是命名窗口。 – Hemlock

+0

如果已经打开,您也可以在选项卡上设置焦点 'var win = window.open('http://google.com','tab');如果(赢){win35} }' – sohaiby

回答

13

window.open具有以下参数:var tab = window.open(url, name, specs, replace) 只要您使用相同的name的URL将被加载到该窗口/标签。

如果您想保留描述符/引用(tab以上),则返回window.open,一旦用户刷新页面,该引用将丢失。

+0

嘿,这个作品。更新我的问题 – BobB

+0

理想情况下,我可以坚持这超出用户所在的页面,因为产品在网站上的不同页面上。 – BobB

+0

@BobB如果这回答您的问题,请点击左侧的勾号标记。 =) –

1

我觉得你最好的选择可能是session storage/local storage,但它只能在新的浏览器。

+0

我想你是对的,如果我想坚持超出用户所在的页面。谢谢 – BobB

0

您所需要的只是保存对打开的选项卡的引用,您可以将它与某些对您有意义的ID相关联......然后,当您需要重新打开时,只需使用已保存的引用即可访问你的父窗口或opener窗口从window.opener。此外,要知道何时关闭子窗口,会有一个默认的浏览器事件“beforeunload”,当被调用时,它可以从您父级的引用对象中移除该窗口,这样您就知道必须重新打开该窗口而不是集中它。

0

我经历了每一个步骤,我想出了一些观点。我在IE上测试过它。 如果您使用像(htp://www.google.com)这样的URL,那么它没有像预期的那样工作,并且如果您使用域名页面,它就会工作。

虽然它适用于Firefox和Chrome。

下面的例子不工作:

<script type="text/javascript"> 
    function myfunction1() { 
     window.open('http://www.google.com', 'f'); 
    } 
    function myfunction2() { 
     window.open('http://www.yahoo.com', 'f'); 
    } 
</script> 
<body> 
    <form id="form2" runat="server"> 
    <div> 
     <a href="#" onclick='myfunction1();'>myfunction1</a> 
     <a href="#" onclick='myfunction2();'>myfunction2</a> 
    </div> 
    </form> 
</body> 
</html> 

而且下面的示例:

<script type="text/javascript"> 
     function myfunction1() { 
      window.open('WebForm1.aspx', 'f'); 
     } 
     function myfunction2() { 
      window.open('WebForm2.aspx', 'f'); 
     } 
</script> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <a href="#" onclick='myfunction1();'>myfunction1</a> 
     <a href="#" onclick='myfunction2();'>myfunction2</a> 
    </div> 
    </form> 
</body> 
</html> 
相关问题