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

您好，我對前端開發非常陌生，我試圖將一些數據從我的父窗口傳遞到我的子窗口，但它只是以[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); 
};

來源

2016-06-30 user2402107

打開單頁應用程序（SPA）中的子窗口最多是不常見的。考慮使用類似於ui bootstrap模式的模式（https://angular-ui.github.io/bootstrap/），因爲它與AngularJS的mvc模式一致。 – jbrown

你可以把數據放在'localStorage'然後在孩子讀取它 –

在打開窗口之前，您可以將數據存儲在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應用）

我猜你要隔離某些部分你的應用程序將圖形渲染到不同的窗口，希望這可以幫助你想要什麼

來源

2016-06-30 17:48:17

如果兩個html頁面共享相同的控制器....我試圖完成的是打開一個兒童窗口，其中有更大的圖表...爲了做到這一點，我有一個圖表庫（這是一個指令），並支持需要的數據通過 – user2402107

即使您使用相同的控制器，上述技術也能正常工作。加載開始，保存之前打開 –

https://plnkr.co/edit/bNQjurR0wojqdjEKYjbD?p=preview – user2402107

如果u訪問一樣，它會顯示ü僅對象格式，嘗試像這樣在控制檯

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

然後ü可以看到圖s.html爲第一控制檯和寬度= 950，高度= 850爲第二

來源

2016-06-30 17:19:55

undefined ...我不認爲我的var被傳遞給子窗口 – user2402107

console.log（$ scope.data）;運行這個併發布數據，你從這個 –

可以使用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);

來源

2016-06-30 17:33:15 MarkoCen

得到的似乎是競爭條件（發佈前聆聽，因爲你不能依靠子窗口加載時間） –

是的，我沒有看到它通過 – user2402107

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

回答

相關問題