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

Question

您好，我对前端开发非常陌生，我试图将一些数据从我的父窗口传递到我的子窗口，但它只是以[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); 
}; 

Answer 1

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

见在线演示 - https://plnkr.co/edit/nEjjzLC4pVvg1nOsXlgA?p=preview

---

的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']); 
}); 

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

---

请注意，它不认为是最佳做法，如果有可能使用相同的页面并更改视图异步（谷歌角SPA应用）

我猜你要隔离某些部分你的应用程序将图形渲染到不同的窗口，希望这可以帮助你想要什么

Answer 2

如果u访问一样，它会显示ü仅对象格式，尝试像这样在控制台

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

然后ü可以看到图s.html为第一控制台和宽度= 950，高度= 850为第二

Answer 3

可以使用window.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, '*'); 
}; 

在graphs.html

然后，添加消息事件侦听器：

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