Google Chrome打包的應用程序窗口

Question

我正在創建一個有兩個頁面的Chrome打包應用程序（目前）。 按頁面表示的是實際的.html文件。 一個叫做login.html，另一個叫做index.html。

現在，與用戶相關的所有內容都存儲在chrome.storage.local中。

這是在chrome.js中啟動頁面的代碼。

chrome.app.runtime.onLaunched.addListener(function () {
    var dimensions = getDimensions(screen),
        positions = getPositions(screen);

    chrome.storage.local.get('login', function (result) {
        if(result.login.status === "loggedOut") {
            chrome.app.window.create('login.html', {
                id: 'loginWindow',
                'bounds': {
                    'width':    400,
                    'height':   600
                },
                minWidth: 400,
                minHeight: 600,
                maxWidth: 400,
                maxHeight: 600,
                frame: 'none'
            });
        } else {
            chrome.app.window.create('index.html', {
                id: 'mainWindow',
                'bounds': {
                    'top':      positions.top,
                    'left':     positions.left,
                    'width':    dimensions.width,
                    'height':   dimensions.height
                },
                minWidth: dimensions.width,
                minHeight: dimensions.height,
                maxWidth: dimensions.width,
                maxHeight: dimensions.height,
                frame: 'none'
            });
        }
    });
});

現在，因為chrome.storage.local.get login.status === loggingOut，它會使用登錄表單彈出登錄頁面。 因此，當用戶放置正確的憑據時，我該如何進行。 如何關閉登錄窗口，然后打開主窗口。 上面的代碼僅是下次打開index.html，而不再次顯示登錄名。

我已經完成了檢查憑據的代碼，並且可以正常工作，但是現在我想關閉登錄表單窗口，並打開一個新的index.html，其邊界，最大寬度，最小寬度和高度與您在上面的代碼中看到的相同。

這是我要尋找的內容：[現在在login.js中，這在login.html中被稱為]

if(login === success) {
    // close login window and goto mainWindow
} else {
    // Username or password is wrong
}

提前致謝！

Answer 1

為此，您需要做的是添加此檢查以檢查是否在chrome.storage.local內部發生了更改。

chrome.storage.onChanged.addListener(function(changes, namespace) {
    chrome.storage.local.get('login', function (result) {
        if (result.login.status === "loggedIn") {
            chrome.app.window.get('loginWindow').close();
            chrome.app.window.create('index.html', {
                id: 'mainWindow',
                'bounds': {
                    'top':      positions.top,
                    'left':     positions.left,
                    'width':    dimensions.width,
                    'height':   dimensions.height
                },
                minWidth: dimensions.width,
                minHeight: dimensions.height,
                maxWidth: dimensions.width,
                maxHeight: dimensions.height,
                frame: 'none'
            });
        }
    });
});

當然，您可以使用這些更改和名稱空間，但我選擇不使用它們。

Answer 2

MiroRauhala已經回答了您的直接問題，但是也許您應該重新考慮應用程序的結構。

Chrome應用沒有常規站點那樣的導航。 它們有窗口，每個窗口對應一個不同的html頁面。 不必關閉一個窗口並以完全相同的界限打開一個新窗口，您可以只在一個文檔中設置不同的div，並根據需要隱藏和顯示它們。

從長遠來看，我認為更改您的結構將使應用程序更簡單。

如果您采用單獨的窗口方法，則需要小心。 例如，如果將ID添加到窗口並指定范圍，則僅在第一次顯示時才應用范圍。 之后，它會記住界限。 您可以通過隱藏它，然后移動它，然后顯示它來解決它。 在使用chrome應用程序平台時，您可能會遇到其他並非如此的情況。