0

標準のブラウザー ベースのアプリケーションでいくつかの制限にぶつかった後、ブラウザーを使用しない 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 アプリ アーキテクチャでコールバックが機能しないのはなぜですか?

4

1 に答える 1

1

インライン スクリプトまたはスクリプト ブロックを許可しない CSP の問題が発生していると思います。詳細については、 http://developer.chrome.com/apps/contentSecurityPolicy.htmlを参照してください。

page.jsタグを介してファイルを作成しscript src='page.js'、スクリプトブロックの内容をその中に入れるだけで、最初の試行を変換できるはずです。

addLoadListener(addHandlerForLoginButton);

コールバックへのwinパラメーターが DOM ウィンドウではなく、AppWindow. contentWindow属性を介して接続された DOM ウィンドウがあります。詳細については、 http://developer.chrome.com/apps/app_window.html#type-AppWindowを参照してください。

app.background.scripts最後に、これらすべてのスクリプトをマニフェストのフィールドにリストする必要はなく、バックグラウンド スクリプトのみをリストする必要がありますbackground.js。他のものは、ページを開いたときに必要に応じて読み込まれます。

于 2013-08-05T09:59:57.837 に答える