Safari窗口打开（window.open()）无法工作。

Question

我需要在新窗口打开外部链接。当我点击视图中的编辑按钮时，我要处理点击事件：

module.exports = utils.Backbone.View.extend({
    events: {
        "click #edit": "onEditClicked"
    },

    "onEditClicked": () => PubSub.publish("EDITOR_REQUESTED");
});

然后我会检查用户是否已登录。 如果是，则发送通知“OPEN_EDITOR”，并期望在新窗口中打开外部链接。

TextEditorController.prototype.handleMessages = function () {

    PubSub.subscribe("OPEN_EDITOR", () => {
        var editor = window.open(this.$service.getEditorURL());
    });
});

在Safari中似乎阻止了新窗口？在我的情况下有解决方法吗？

- francesca

Answer 1

这是由于Safari内置的弹出窗口拦截器所导致的。

Safari中允许打开新窗口的唯一JavaScript是直接附加到用户事件的JavaScript。在你的情况下，你稍后调用了window.open。

这里的解决方法可以是：

• 在onEditClicked方法中创建一个没有URL的窗口

  safariWindow = window.open();

• 在handleMessages函数中更改该窗口的URL

  safariWindow.location.href = newUrl

- Peter Tristianche

---

我刚刚建立了一个为人们使用弹出窗口的系统。虽然它对其他所有用户都有效，但Safari用户可能会遇到弹出窗口无法正常工作的问题。一旦我找到了这个答案，我就明白了必须是用户的“事件”才能使其在Safari中正常工作。现在我可以调整我的代码以适应Safari浏览器，使得弹出窗口可以正常地为这些用户工作。但是，要找出这个问题真是太痛苦了，直到我找到了这个答案！:)非常感谢！ - MrTechie

Answer 2

如果您想在Safari浏览器中打开一个弹出窗口，需要遵循以下代码。 从后端获取URL之前打开弹出窗口。

const width = 500;
const height = 600;
const top = window.innerHeight / 2 - height / 2;
const left = window.innerWidth / 2 - width / 2;
const params = `modal=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`;
if (oauthPopup === null || oauthPopup.closed) {
  console.log(oauthPopup);
  oauthPopup = window.open("", "", params);
}

从后端获取URL后，更改弹出窗口的位置。

await request()
  .get(`/sources/authorizationEndpoint`, {
    headers: {
      authorizer: token,
    },
  })
  .then((response) => {
    const url = response.data.oauth_url;
    oauthPopup.location = url;
    oauthPopup.focus();       
  })
  .catch((err) => {
    oauthPopup.close();
  });

- user14734637