Chrome App onSubmit [英] Chrome App onSubmit
问题描述
我有一个非常简单的Chrome应用程序。它显示一个带有搜索框的弹出窗口。提交搜索框会在新标签页中打开我的网站。
搜索框默认为空。当它是空的，点击提交不应该做任何事情。我的popup.html如下所示：
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> foo< / title>
< link rel =stylesheettype =text / csshref =popup.css/>
< / head>
< body>
< div id =srch>
< form target =_ blankaction =foo.phpmethod =getonsubmit =if（document.getElementById（'box'）.value.length< 1）return false;> ;
< input type =textid =boxname =foovalue =/>
< input type =submitvalue =foo/>
< / form>
< / div>
< / body>
< / html>
如果我在浏览器中打开popup.html，那么点击提交就什么也不做。但是，如果我将它作为Chrome应用程序打开，那么点击提交仍然会提交表单，而没有任何内容。所以似乎JavaScript被忽略了。
Chrome扩展程序不允许在HTML代码中内联JS或< script> 标签，因此您的代码 onsubmit =if 不会超过CSP，因为消除了这些让我的脚本运行。
代码示例演示
manifest.json
注册浏览器操作清单文件。
{
name：chrome-app-onsubmit，
description：http://stackoverflow.com/questions/14263946/chrome-app-onsubmit ，
version：1，
manifest_version：2，
browser_action：{
default_popup：popup.html
}
}
popup.html
删除内嵌脚本
< html>
< head>
< meta http-equiv =Content-Type内容=text / html的; charset = utf-8/>
< title> foo< / title>
< script src =popup.js>< / script>
< / head>
< body>
< div id =srch>
< input type =textid =boxname =foovalue = />
< / div>
< / body>
< / body>
< < / html>
popup.js
你的功能在这里。
function _clickHandler（）{
if .getElementById（'box'）.value.length< 1）{
return false;
} else {
console.log（In Hand Handler ..）;
//在此处执行AJAX请求
$ b document.addEventListener（DOMContentLoaded，function（）{
document.getElementById（submit）。onclick = _clickHandler;
}）;
检查如何加载扩展来测试脚本。
参考
I have a very simple Chrome App. It displays a popup with a search box. Submitting the search box opens my site in a new tab.
The search box is empty by default. When it is empty, clicking submit shouldn't do anything. My popup.html looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foo</title>
<link rel="stylesheet" type="text/css" href="popup.css" />
</head>
<body>
<div id="srch">
<form target="_blank" action="foo.php" method="get" onsubmit="if (document.getElementById('box').value.length < 1) return false;">
<input type="text" id="box" name="foo" value="" />
<input type="submit" value="foo" />
</form>
</div>
</body>
</html>
If I open popup.html in a browser, then clicking submit does nothing. But if I open it as the Chrome App, then clicking submit still submits the form, without anything in it. So it seems that the JavaScript is being ignored.
Problem in your Script
Chrome Extensions do not allow inline JS or <script> tag in HTML Code, so your code onsubmit="if will not surpass CSP, after Eliminating these i got your script running.
Sample Demonstration of your code
manifest.json
Registered Browser action to manifest file.
{
"name": "chrome-app-onsubmit",
"description": "http://stackoverflow.com/questions/14263946/chrome-app-onsubmit",
"version": "1",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html
Eliminated Inline Script
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foo</title>
<script src="popup.js"></script>
</head>
<body>
<div id="srch">
<input type="text" id="box" name="foo" value="" />
<input type ="submit" id="submit" value="foo" />
</div>
</body>
</html>
popup.js
Your functionality goes here.
function _clickHandler() {
if (document.getElementById('box').value.length < 1) {
return false;
} else {
console.log("In Success Handler..");
//Do Your AJAX Request Call here
}
}
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("submit").onclick = _clickHandler;
});
Check How to Load an Extension for testing your script.
Reference
这篇关于Chrome App onSubmit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
