從父窗口傳遞數據到子窗口

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