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

Hello I am very new to front-end development and I am trying to pass some data from my parent window to my child window but it just comes up as [object][object]

你好，我是前端开发的新手我想把一些数据从父窗口传递到子窗口但它只是以[object][object] [object]的形式出现

 $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);
 };

3 个解决方案

#1

You can store the data in window.localStorage before you open the window. then read it back on load of the new window.

您可以将数据存储在窗口中。打开窗口之前的localStorage。然后在加载新窗口时读取它。

See online demo - https://plnkr.co/edit/nEjjzLC4pVvg1nOsXlgA?p=preview

参见在线演示- https://plnkr.co/edit/nejzlc4pvg1nosxlga?

index.html

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

graphs.html

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

https://plnkr.co/edit/nEjjzLC4pVvg1nOsXlgA?p=preview

Do note that it's not considered best practice, if possible use the same page and change views asynchronously (google angular SPA application)

请注意，这并不是最佳实践，如果可能的话，请异步使用相同的页面并更改视图(谷歌角SPA应用程序)

I'm guessing you want to isolate some part of your app that renders a graph to a different window, hopes this help you with what you want

我猜你想要把你的应用程序的某个部分分离出来，这个部分可以将图形显示到另一个窗口，希望这能帮助你得到你想要的

#2

if u access like that it will show u as object format only,try like this in your console

如果你像那样访问它，它将只显示你作为对象格式，尝试像这样在你的控制台

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

then u can see graphs.html for first console and width=950,height=850 for second

这样你就能看到图形。第一控制台的html和宽度=950，第二控制台的高度=850

#3

you could use window.postMessage to transfer data between windows:

您可以使用窗口。在windows之间传输数据的postMessage:

$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, '*');
};

Then in graphs.html, add message event listener:

然后在图表。添加消息事件监听器:

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

#1