触发弹出窗口的主干事件被阻止。答案

【问题标题】：Backbone Event Triggering a Popup getting blocked.触发弹出窗口的主干事件被阻止。
【发布时间】：2014-08-25 21:43:43
【问题描述】：

我遇到了一个问题，我想在端点上调用 GET，并根据其结果，呈现模式或跟随链接。

目前，当我收到点击事件时，我禁用了锚标记的默认行为（我不想在检查结果之前重定向。）。
如果返回参数之一为真，我会在端点上执行 GET 并从回调中抛出一个事件。这个事件有一个监听器将触发渲染和显示模式。

这种方法的问题是：GET 回调不允许我重定向到链接，除非我禁用弹出窗口阻止程序并且我想要我的让用户拥有良好的用户体验。

我在轮询策略（效果不佳，并不总是准确）或让点击事件打开一个跟随锚标记的窗口之间进行辩论或渲染模态。

如果有任何其他想法或建议，我们将不胜感激。谢谢！

模板定义如下：

var template = _.template('\
  <a href="<%-linkUrl%>?fromHome=true" draggable="false" data-type="app-button" data-se="app-button" target="_blank" \
    class="app-button">\
    <img draggable="false" src="<%-logoUrl%>" class="logo">\
    <span data-action="show-settings" class="icon-button <%-showIcon%>">\
      <span class="icon icon-settings-dark"></span>\
    </span>\
  </a>\
<p class="app-button-name" data-se="app-button-name"><%-label%></p>\
');

事件定义如下：

events: function () {
  var events = {};
  events['click [data-type=app-button]'] = '_firstLoginSettings';

  return events;
},

现在这里是被调用的函数本身。

_firstLoginSettings: function (e) {
  if (this.model.get('__notVerified__')) {
    this.state.trigger(Events.SHOW_CONFIRMATION, this.model);
  } else {
    e.preventDefault();
    e.stopPropagation();
    this.state.trigger(Events.CHECK_VPN_DIALOG, this.model);
  }
},

我的主路由器上有一个监听器。

  this.listenTo(this.state, Events.CHECK_VPN_DIALOG, this._checkVpnDialog);

这是其余的路由器代码：

_checkVpnDialog: function (appLink, appLinkSettings) {
  var self = this;
  var vpnSettings = new VpnSettings({
    appLink: appLink,
    '__appInstanceId__' : appLink.get('__appInstanceId__')
  });
  vpnSettings.fetch({}).done(_.bind(function(vpnSettings) {
    if (vpnSettings.checkVpn) {
      self.state.trigger(Events.SHOW_VPN_DIALOG, appLink);
    } else {
      appLink._firstLoginSettings();
      //This doesn't work because it's not associated with a user action, so it won't let me open this window.  This isn't part of the click event loop any more.
      var linkUrlTemplate = _.template('<%-linkUrl%>?fromHome=true');
      window.open(linkUrlTemplate({linkUrl: appLink.get('__linkUrl__')}));
    }

  }));
},

_showVpnDialog: function (appLink, appLinkSettings) {
  this.credsDialog && this.credsDialog.remove();
  if (!appLinkSettings) {
    appLinkSettings = new AppLinkSettings({
      id: appLink.get('id'),
      '__tab__': appLink.get('__tab__')
    });
    appLinkSettings.fetch().done(_.bind(this._renderVpnDialog, this, appLink, appLinkSettings));
  } else {
    this._renderVpnDialog(appLink, appLinkSettings);
  }
},

_renderVpnDialog: function (appLink, appLinkSettings) {
  if (appLink.get('__needsVpn__')) {
    this.vpnDialog = new VpnDialog({
      model: appLink,
      appLink: appLink,
      settings: this.settings,
      state: this.state
    });
    this.vpnDialog.render();
  }
},

【问题讨论】：

浏览器会在没有来自用户的直接同步交互（例如点击事件）的情况下阻止弹出窗口。通过在打开弹出窗口之前创建异步 XHR，您违反了该规则。

标签： javascript jquery events backbone.js click

【解决方案1】：

所以我所做的是通过单击打开一个新窗口，然后更改窗口的位置，以便它转到新位置或自行关闭。有点老套的解决方案，但它确实有效！

【讨论】：