【问题标题】:How to make other tabs click an element when I click a button in the activated tab?当我单击已激活选项卡中的按钮时,如何使其他选项卡单击元素?
【发布时间】:2016-01-28 04:01:22
【问题描述】:

我打开了许多具有相同域和相同内容的页面,我需要的是,当我单击一个选项卡中的特定按钮时,其他选项卡也会响应并单击相同的按钮,所以我会节省很多时间。 我在这里读到这个功能叫做“对讲机”。

【问题讨论】:

  • 我看了,可惜没看懂,因为我是初学者,我需要一个简单的解决方案,但谢谢你的帮助!
  • 您可以专门尝试这种方法link,但使用 HTML localstorage
  • 你需要支持旧的IE吗?
  • 完全没有,我使用的是 Chrome(最新版本)

标签: javascript intercom intercom.js


【解决方案1】:

抱歉延迟回答,但我想写一个好方法,而不仅仅是快速回答积分。仅当页面都在同一个域下时,这才有效。 LocalStorage 就是这样工作的。让我知道这是否适合您,并且可能需要稍作调整,但应该给您一个工作的想法。可能有更好的方法,但我一开始就是这样处理的。

这将在每一页上进行。然后,您可以使用页面 url 或类似隐藏字段之类的东西来使每个页面都独一无二,并且可以在您当前访问该页面时进行跟踪。但总体思路应该可行。

编码愉快!希望对您有所帮助!

这是有效的,因为该脚本在每个页面上运行。它知道它在哪个页面上的唯一原因, 是由于脚本执行时隐藏字段值表示当前页面的原因。

这是一个非常普遍的例子。但应该给你的概念。 由于此脚本在每个页面上运行,并且是通用编写的,因此可以解决。只需确保触发事件的按钮名称在每一页上都相同!

附:您还可以使用 window.location 来获取您所在的页面而不是隐藏字段。

****每页的HTML示例*****

<!-- Each Page -->
<!-- Page 1-->
<div>
  <input type="hidden" value="page1"/>
  <input type="button" id="cmdButtonThatTriggersEvent" value="Test Buttom"/>

</div>

<!-- Page 2-->
<div>
  <input type="hidden" value="page2"/>
  <input type="button" id="cmdButtonThatTriggersEvent" value="Test Buttom"/>

</div>

<!-- Page 3-->
<div>
  <input type="hidden" value="page3"/>
  <input type="button" id="yourButton" value="Test Buttom"/>

</div>


//Make sure ever button name or id is the same on each page. 
//That way it is generic. You will also have to track what page //triggered the click event. So make a localstorage hold if the action was clicked to occur, and a localstorage key that holds an array fo all the pages you want this done on. So that way the code can be on every page, and you mark the page off if all page entries were affected, then reset the switch back to null. 

****Javascript example for each page*****


<script> 


       var globalAllPages = ["Page1, "Page3", "Page3"]; //etc.

       $(document).on("click", "#yourButton", function(){
         localStorage.setItem("trigger_state", "true");
         HandleLocalStorageSwitch();
       });

       $(document).ready(function(){           
            setInterval(function(){              
                HandleLocalStorageSwitch();                
            }, 500);
        });



        function HandleLocalStorageSwitch()
        {
             var trigger = localStorage.getItem("trigger_state");
             var location = localStorage.getItem("location");

             if(trigger != undefined && trigger == "true"){
               //now see if this page has ran yet
                var dictPages = JSON.parse(localStorage.getItem("current_pages")); //gets the array  
                var exists = false;

                for(var x=0;x<dictPages;x++){
                   if(dictPages[x]=="this_page"){
                      exists=true;
                      break;
                    }                    
                }

                //if it wasnt found then insert it
                if(!exists){
                   dictPages.add("this_page");
                   $("#this_page_Button").click(); //now trigger this button
                }

                if(dictPages.length == globalAllPages.length){
                    //we hit all pages
                    //then all have been ran, and remove the switch and clear dict
                   localStorage.setItem("shouldTriggerEvent", "false");
                   //so now reset and won't run untill one of buttons clicked, then starts process again
                   localStorage.removeItemKey("current_pages");
                }                
              }                                  
           }
        }

【讨论】:

  • 如果选项卡的数量不固定,这确实会有所帮助,并且可能会注意到必须在每个页面上更改“this_page”,这需要生成服务器端代码。而且他也没有提到他正在使用 jQuery。
  • 感谢兄弟的代码。我将解释更多情况,它们是具有相同 URL 的 22 个选项卡(它们都是表单)。我只想单击第一个选项卡中的按钮,因此只有第一个选项卡将用于单击“提交”按钮,然后所有其他 21 个选项卡都应响应并单击“提交”按钮。
  • 因此我只需要一个简单的脚本而不考虑其他前景。
  • 抱歉,但这听起来有点阴暗,22 个标签的 URL 完全相同……你为什么需要那个……
  • 在我们为我们预订足够的门票之前,足球比赛的场地总是很快就用完了。所以我们必须尽快预订。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-06
  • 2018-10-07
  • 2011-11-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多