跨浏览器标签页调用JavaScript函数

Question

我有两个浏览器标签页，分别是tab1和tab2。

在tab1中有一个名为execute的函数，我想从tab2页面调用它。

这是否可能，如果可能的话该怎么做？

- kumar

---

现在您可以使用localStorage存储事件或使用使用该事件的库来实现此操作。 - jcubic

Answer 1

JavaScript在浏览器中不能进行跨标签页脚本操作（这将存在安全风险）。

然而，如果第二个标签页是通过window.open()调用打开的，并且浏览器设置为在新标签页中打开弹出窗口，则是的，“tab1”可以与“tab2”通信。

第一个标签页/窗口被称为opener，因此新标签页可以使用以下格式调用打开者上的函数：

opener.doSomething();

同样地，打开者可以通过使用创建弹出窗口时创建的变量，在新标签/弹出窗口上调用函数。

var myPopup = window.open(url, name, features);
myPopup.doStuffOnPopup();

- scunliffe

---

实际上，可以使用window.postMessage()或BroadcastChannel进行“交叉选项卡脚本编写”，以在选项卡之间发送消息。 - Anderson Green

@AndersonGreen，有些人就是喜欢说“你做不到”、“这不可能”。感谢您在回答问题时提供了实用的东西。 - Adrian M.

@AndersonGreen 和 Adrian M. - 我们应该添加一个关于如何使用 postMessage() / Broadcast Channel 的答案。当我在2010年写下我的答案时，IE8是微软最新的浏览器，Chrome版本为4.1，Firefox <5等等。所以在当时，这是不可能的。请随意添加一个现代解决方案的答案，或者让我知道您是否希望我添加一个答案。 - scunliffe

Answer 2

有一个微小的开源组件可以在多个标签页中同步/锁定/调用代码，允许您在标签页之间发送消息（免责声明：我是其中的贡献者之一！）

https://github.com/jitbit/TabUtils

可以这样调用：

TabUtils.BroadcastMessageToAllTabs("messageName", data);

然后在另一个选项卡中：

TabUtils.OnBroadcastMessage("messageName", function (data) {
    //do something
});

基于onstorage事件，您可以简单地修改需要的代码，这非常简单。

- Alex from Jitbit

---

它支持哪些网络浏览器（包括版本）？ - Peter Mortensen

@PeterMortensen 任何支持localStorage的浏览器 - Alex from Jitbit

Answer 3

你应该先展示你的 HTML 代码，但假设你的选项卡有一个链接，你可以这样做：

<a href="some-path" id="tab2">Tab 2</a>

jQuery：

$('#tab2').click(function(){
  // Your function code here

  // Prevent the default action
  return false;
})

- Sarfraz

---

我认为他指的是真正的制表符，而不是伪制表符。 - Jonathan

Answer 4

你可以将 JavaScript 函数引用作为参数传递给其他函数（注意对象执行上下文）。

因此，在初始化“tab2”时，你可以将“tab1”的execute函数引用发送到“tab2”中。

- The Machine

---

我的基本问题是如何在其他窗口或选项卡中调用一个函数？ - kumar

我不知道有什么方法可以做到那样！ 难道JavaScript窗口对象不是我们可以使用的最顶层对象吗？你怎么能访问另一个窗口中的代码？！（在我看来，这违反了浏览器工作原理的基本原则） 你能详细解释一下你的需求吗？也许我可以提供一个解决方法。 - The Machine