Javascript 如何将弹出窗口中的数据中继到vue.js应用程序中_Javascript_Vue.js

Javascript 如何将弹出窗口中的数据中继到vue.js应用程序中

javascript vue.js

Javascript 如何将弹出窗口中的数据中继到vue.js应用程序中,javascript,vue.js,Javascript,Vue.js,问题我正在打开一个弹出窗口，允许用户登录第三方网站以获取OAuth令牌。该登录正在重定向到我的Lambda函数，我希望该函数将数据中继回父窗口，并用它更新VueJS模型当前尝试我目前正在尝试在父窗口上使用一个函数并调用该函数，但这只在VueJS开发模式下有效（我假设在构建和部署时关闭了访问权限？）这就是我在lambda代码中返回的调用该函数的内容。这是用户登录后弹出窗口重定向到的内容： return callback(null, { statusCode: 200,

问题我正在打开一个弹出窗口，允许用户登录第三方网站以获取

OAuth

令牌。该登录正在重定向到我的Lambda函数，我希望该函数将数据中继回父窗口，并用它更新VueJS模型

当前尝试 我目前正在尝试在父窗口上使用一个函数并调用该函数，但这只在VueJS开发模式下有效（我假设在构建和部署时关闭了访问权限？）

这就是我在lambda代码中返回的调用该函数的内容。这是用户登录后弹出窗口重定向到的内容：

  return callback(null, {
    statusCode: 200,
    body:
      '<html><head><title>HTML from API Gateway/Lambda</title></head><body>' +
      '<script> window.opener.popupCallback(' +
      JSON.stringify(userData) +
      '); window.close();</script></body></html>',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
      'Content-Type': 'text/html'
    }
  });

注意：如果我在本地运行网站，并在浏览器控制台中调用

popupCallback（）

，则该功能正常工作。当我在部署之后执行此操作时，它会声明未定义Vue

有更好的方法吗？我在玩，但当我在VueJS create函数中设置侦听器时，它似乎不起作用。我假设浏览器和VueJS之间存在我不理解的隔离。关于这方面的任何资源都会有帮助。

答案是使用。它更适合这个问题。这也意味着交叉原点约束更少

或者，如果我将

window.opener.popupCallback（）

调用包装在try-catch块中，它也会起作用，因为在未定义的Vue上发生错误。我不完全理解为什么这样就允许父窗口成功完成

Vue.$set

无论如何，

postMessage（）

似乎是一种更好的方法

感谢您向我介绍

Window.postMessage（）

。

  return callback(null, {
    statusCode: 200,
    body:
      '<html><head><title>HTML from API Gateway/Lambda</title></head><body>' +
      '<script> window.opener.popupCallback(' +
      JSON.stringify(userData) +
      '); window.close();</script></body></html>',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
      'Content-Type': 'text/html'
    }
  });

ReferenceError: Vue is not defined