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

默认情况下，搜索框为空。当它是空的，点击提交不应该做任何事情。我的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被忽略了。

来源

2013-01-10 Andrew

问题在你的脚本

Chrome浏览器扩展不允许内联JS或<script>标签在HTML代码，所以你的代码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" 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; 
});

检查How to Load an Extension测试您的脚本。

参考

Content Security Policy

来源

2013-01-10 19:39:11 Sudarshan

完美，谢谢！ – Andrew

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

onsubmit="if (document.getElementById('box').value.length < 1) {return false;};">

来源

2013-01-10 17:51:45

没有不幸的是工作。在Chrome中打开popup.html。但是，当它作为Chrome扩展打开时无法使用。 – Andrew

Chrome App onSubmit

回答

参考

相关问题