0

我有一个非常简单的 Chrome 应用程序。它显示一个带有搜索框的弹出窗口。提交搜索框会在新选项卡中打开我的网站。

搜索框默认为空。当它为空时，单击提交不应该做任何事情。我的 popup.html 看起来像这样：

<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>

如果我在浏览器中打开 popup.html，然后单击提交什么也不做。但是，如果我将其作为 Chrome 应用程序打开，则单击提交仍会提交表单，其中没有任何内容。所以似乎 JavaScript 被忽略了。

4

2 回答 2

1

脚本中的问题

Chrome 扩展不允许内联 JS 或<script>HTML 代码中的标签，因此您的代码onsubmit="if 不会超过 CSP，在消除这些后我让您的脚本运行。

您的代码的示例演示

清单.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" 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

你的功能在这里。

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;
});

检查如何加载扩展以测试您的脚本。

参考

于 2013-01-10T19:39:11.733 回答
0

试试这个...不同的浏览器可能对 javascript 格式很挑剔...只是一个想法

onsubmit="if (document.getElementById('box').value.length < 1) {return false;};">
于 2013-01-10T17:51:45.460 回答