Question

我知道这个问题在这里已经问过很多遍了，我尝试了每个问题，但都行不通。

我有一个托管在https://app.yyy.com下的网站应用程序，还有另一个基本上只是收据模板的应用程序，我将其放置在mine.com Web服务器中。收据模板上有自己的脚本，其URL为https://yyy.com/receipt/receiptTemplate.html。我告诉所有这些详细信息是因为我读到试图将数据从一个窗口传递到另一个窗口时，托管在同一域下的模板可能会遇到CORS问题。

我的要求是将数据对象从网站应用程序传递到收据模板，其中脚本将获取对象数据并将其呈现给模板。

我在wesbite应用程序脚本中具有以下内容，该脚本将进行调用以获取数据，并在成功调用后打开收据模板。我还尝试使用window.opener附加数据（这是我在这里找到的答案之一所建议的。

$.get('/getdata', function(data) {
    var invoice = window.open('https://yyy.com/receipt/receiptemplate.html');
    window.opener.receiptdata = data;
});

在收据脚本上，我有以下

$(document).ready(function(){
    var data = window.receiptdata;
    generateReceipt(data);
});

但是上面的方法不起作用。

这次我在localStorage上尝试了以下方法，这也是我在这里找到答案的建议。

$.get('/getdata', function(data) {
    var invoice = window.open('https://yyy.com/receipt/receiptemplate.html');
    localStorage.setItem('receiptdata', data);
});

$(document).ready(function(){
    var data = localStorage.getItem('receiptdata');
    generateReceipt(data);
});

但是也没有用。

我不知道如何将对象数据传递到另一页... =（

Answer 1

您有一个 typo 开头：window中的window.opener.receiptdata = data;是当前窗口，您要访问刚创建的窗口对象：invoice

$.get('/getdata', function(data) {
  var invoice = window.open(generateURL(), '');
  invoice.receiptdata = data;
}

As a fiddle，因为StackSnippets不允许弹出窗口。

但是要使此方法有效，由于您将两个页面托管在不同的子域中，因此您可能需要change their origin：

document.domain = 'yyy.com';

现在，如果这些托管在完全不同的域中，则必须使用postMessage：

var invoice = window.open('https://yyy.com/receipt/receiptemplate.html');
invoice.postMessage(receiptdata, 'app.yyy');

并在您的模板中

addEventListener('message', e => {
  if(e.origin === 'http://app.yyy.com') {
    window.receiptdata = e.data;
  }
});

将对象从一个窗口传递到另一个窗口

1 个答案: