javascript - 打开需要异步查找的新窗口时避免弹出窗口阻止程序

Question

我的 Meteor 应用程序中有一个按钮可以执行以下操作:

用户点击按钮 > 事件调用方法 > 方法使用 http 调用外部 api > 外部 api 返回单点登录链接 > 方法返回链接 > 事件打开新窗口(选项卡)，链接作为 url

我的问题是新选项卡被弹出窗口阻止程序阻止，即使它是基于用户操作

这是事件代码:

Template.welcome.events({
  'click #accessLms': function(e) {
    e.preventDefault();
​
    var submitButton = $('#accessLms').button('loading');
​
    Meteor.call('getLmsLink', function(error, portalLink) {
      if(error) {
        sAlert.error(error.message);
        submitButton.button('reset');
      } else if(portalLink) {
        window.open(
          portalLink,
          '_blank'
        );
        submitButton.button('reset');
      }
    }); 
  }
});

方法如下:

Meteor.methods({
  'getLmsLink': function () {

      [set vars...]

      try {
          var response = HTTP.call( verb, wceaApiAddress + endPoint, {
              headers: {
                  "Request-Time": timeStamp,
                  "Api-Key": key,
                  "Signature": hash
              }
          });
      } catch(error) {
          throw new Meteor.Error(501, 'There was a problem getting a link to the E-Learning Portal');
      }
​
      var result = JSON.parse(response.content);
      var portalLink = result.records.accessLink;
      return portalLink;
  }
});

Answer 1

基本方法:

1. 在您应用的点击事件中打开一个新窗口，其中包含指向您自己的应用的特定 URL
2. 包含一个可以在新窗口中使用的路由参数，例如/redirect/token/
3. 在该路由中使用的模板的 Template.onCreated 事件中，执行方法调用并获取第 3 方站点的 url 和身份验证 token 。
4. 最后只需在同一代码(在新窗口中)中设置 location = newSiteHref 并重定向用户