將工作系統轉換爲Chrome應用程序

在基於標準瀏覽器的應用程序中遇到一些限制後，我決定將其轉換爲不使用瀏覽器的Chrome應用程序。將工作系統轉換爲Chrome應用程序

以下是所有相關部分。我試圖解決的問題是爲在瀏覽器中工作的按鈕添加一個負載監聽器，並且在應用程序體系結構下不起作用。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>POS Data Entry Sheet</title> 
<link href="./POS.css" rel="stylesheet" type="text/css" /> 
<script src="./POS.js"></script> 
<script src="./POS.underDevelopment.js"></script> 
<script src="./POS.generateTable.js"></script> 
<script src="./POS.menu.js"></script> 
<script src="./POS.portion.js"></script> 
<script src="./POS.formula.js"></script> 
<script src="./POS.dialog.js"></script> 
</head> 

<body> 
<script> 
    addLoadListener(addHandlerForLoginButton); 
</script> 

<section id="login"> 
<h1>Please login:</h1> 

<p> 
    <label>User ID:</label><input type="text" id="userID"> 
    <label>Password:</label><input type="password" id="password"> 
    <button type="submit" id="loginButton">Login</button> 
</p> 
</section> 

<div id="main"></div> <!--Everything gets attached to this div.--> 

</body> 
</html>

上面的一切都通過瀏覽器工作。我創建的清單：

{ 
    "name": "Point of Sale System", 
    "description": "Dual currency Point of Sale System", 
    "version": "0.1", 
    "app": { 
    "background": { 
     "scripts": ["POS.dialog.js", 
        "POS.formula.js", 
        "POS.generateTable.js", 
        "POS.js", 
        "POS.menu.js", 
        "POS.portion.js", 
        "POS.underDevelopment.js", 
        "background.js"] 
    } 
    } 
}

這是我在background.js 第一次嘗試它帶來了簡陋的頁面，但在行腳本不能正常工作。

chrome.app.runtime.onLaunched.addListener(function() { 
    chrome.app.window.create('POS.html', { 
     'bounds': { 
     'width': screen.availWidth, 
     'height': screen.availHeight 
     } 
    }); 
});

所以，我註釋掉內嵌腳本，並嘗試添加一個回調函數這也不起作用。根據調試工具沒有記錄事件監聽器。

chrome.app.runtime.onLaunched.addListener(function() { 
    chrome.app.window.create('POS.html', { 
     'bounds': { 
     'width': screen.availWidth, 
     'height': screen.availHeight 
     } 
    }, function(win) {win.addEventListener('load', addHandlerForLoginButton, false);}); 
});

經過幾個小時的嘗試我能想到的所有事情之後，我不知所措。爲什麼原始內嵌腳本無法工作，爲什麼回調在Chrome應用程序架構中不起作用？

來源

2013-08-04 Bill Gradwohl

我認爲你遇到了CSP問題，它不允許內聯腳本或腳本塊。詳情請參閱http://developer.chrome.com/apps/contentSecurityPolicy.html。

您應該能夠通過簡單地創建一個page.js文件，包括它通過script src='page.js'標記您的第一次嘗試轉換，並把你的腳本塊的內容吧：

addLoadListener(addHandlerForLoginButton);

你的第二個versoin沒」 t工作，因爲回調的win參數不是DOM窗口，而是AppWindow。它具有通過contentWindow屬性附加的DOM窗口，詳情請參閱http://developer.chrome.com/apps/app_window.html#type-AppWindow。

最後，您不需要在清單的app.background.scripts字段中列出所有這些腳本，只需要後臺腳本background.js。其他人將打開您的網頁時根據需要加載。

來源

2013-08-05 09:59:57

我讀過關於沒有內聯腳本的內容，但他們的例子使用它們，所以我認爲這些文檔只是在時代背後，我可能會擺脫它。如果這樣做不起作用，我會將內聯註釋掉，然後嘗試另一種方法。謝謝你指出我認爲是一個窗口，不是。我嘗試枚舉AppWindow的屬性並沒有得到任何東西。我確實必須在清單中包含一個.js文件，因爲這是addHandlerForLoginButton所在的位置。我知道我可以省略其餘部分，但爲了安全起見，我只包括了一切，以防需要它們。 –

將工作系統轉換爲Chrome應用程序

回答

相關問題