Javascript 将数据从父窗口传递到子窗口

您好，我对前端开发非常陌生，我正在尝试将一些数据从父窗口传递到子窗口，但它只是显示为[object][object]

js

 $scope.openLargeGraph = function() {
   var childWindow = window.open('graphs.html', "", "width=950,height=850");
   var testData = $scope.data;
   childWindow.data = testData;

   childWindow.document.write(childWindow.data);
   console.log(testData)

   console.log(childWindow.data);

   // childWindowForGraph.moveTo(300, 50);
 };

---

如果您这样访问，它将仅以对象格式显示您，请在控制台中这样尝试

 console.log(childWindow.data[0]);
 console.log(childWindow.data[1]);

然后，您可以看到第一个控制台的graphs.html，第二个控制台的width=950，height=850，您可以使用它在窗口之间传输数据：

$scope.openLargeGraph = function () {
    var childWindow = window.open('graphs.html', "", "width=950,height=850");
    if(childWindow) //in case the new window blocked by browser
        childWindow.postMessage($scope.data, '*');
};

然后在graphs.html中，添加消息事件侦听器：

//graphs.html
window.addEventListener("message", function(event){
    document.write(event.data);
}, false);

---

在打开窗口之前，可以将数据存储在

window.localStorage

中。然后在新窗口加载时重新阅读

请参阅在线演示-

---

index.html

app.controller('MainCtrl', function($scope) {
  $scope.data = {
    layout: 'spring',
    nodes: [{name:'Node 1', x: 2, y: 4 },{name:'Node 2', x: 2, y: 4 }] 
  };

  $scope.openLargeGraph = function() {
    // Save data on local storage
    window.localStorage['graph:data'] = angular.toJson($scope.data);
    window.open('graphs.html', "", "width=950,height=850");
  };

});

graphs.html

app.controller('MainCtrl', function($scope) {
  $scope.data = angular.fromJson(window.localStorage['graph:data']);
});

---

请注意，这不是最佳实践，如果可能，请使用同一页面并异步更改视图（google angular SPA应用程序）

---

我猜你想将应用程序中的某个部分分离出来，将图形呈现到另一个窗口，希望这能帮助你实现你想要的

未定义的功能。。。我认为我的var没有被传递到子windowconsole.log（$scope.data）；运行此程序并在单页应用程序（SPA）中发布从此打开的子窗口获取的数据，这在最好的情况下是不寻常的。考虑使用类似于UI引导模式的模式，可以在这里找到（），因为它与盎格鲁语的MVC模式一致。你可以把数据放在 LoalSturt中，然后在子负载读取中，它看起来像竞争条件（在收听之前张贴，因为你不能依赖子窗口加载时间）我看不出来如果两个html页面共享同一个控制器会发生什么。。。。我想做的是打开一个包含较大图形的子窗口。。。为了做到这一点，我有一个图表库（这是一个指令），需要通过上述技术传递的支持数据将起作用，即使您使用相同的控制器。启动时加载，打开前保存