Events 将工作系统转换为chrome应用程序_Events_Callback_Google Chrome App_Listeners

Events 将工作系统转换为chrome应用程序

events

Events 将工作系统转换为chrome应用程序,events,callback,google-chrome-app,listeners,Events,Callback,Google Chrome App,Listeners,在遇到基于浏览器的标准应用程序的一些限制后，我决定将其转换为不使用浏览器的chrome应用程序以下是所有相关部分。我试图解决的问题是为在浏览器中工作但在应用程序架构下不工作的按钮添加加载侦听器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>POS Data Entry Sheet</title> <link href="./

在遇到基于浏览器的标准应用程序的一些限制后，我决定将其转换为不使用浏览器的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>

这是我第一次尝试使用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应用程序架构中回调不起作用？

我认为您遇到了CSP问题，它不允许内联脚本或脚本块。有关详细信息，请参阅

您只需创建一个

page.js

文件（包括通过

script src='page.js'

标记），就可以转换您的第一次尝试，并将脚本块的内容放入其中：

addLoadListener(addHandlerForLoginButton);

您的第二个版本不起作用，因为回调的

win

参数不是DOM窗口，而是

AppWindow

。它通过

contentWindow

属性附加了一个DOM窗口，有关详细信息，请参阅

最后，您不需要在清单的

app.background.scripts

字段中列出所有这些脚本，只需列出后台脚本

background.js

。其他文档将在您打开页面时根据需要加载。

我读到没有内联脚本，但它们的示例使用了它们，因此我认为这些文档只是落后于时代，我可能会侥幸逃脱。当这不起作用时，我对内联进行了注释，并尝试了另一种方法。谢谢你指出我以为是窗户的东西不是。我尝试枚举AppWindow的属性，但一无所获。我确实必须在清单中包含一个.js文件，因为addHandlerForLoginButton就位于此。我知道我可以省略其余的，但我包含了所有内容，以防出于某种安全原因需要它们。

addLoadListener(addHandlerForLoginButton);