Question

我希望为新标签页创建Chrome扩展程序。我已经编写了该页面，并且只有在我将Javascript从内联移动到外部时遇到问题。

目前index.html看起来像这样：

<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>

<div class="container">
    <form onSubmit="return process();">
        <input type="text" class="form-control" id="goog" placeholder="Google Search">
        <input type="submit" style="display:none"/>
    </form>

我尝试了一些不同的方法将其移动到外部文件中，但我对Javascript不太满意。我想我需要使用某种事件监听器。我已尝试将其放入search.js：

var form = document.getElementById("search");
form.addEventListener("submit", function() {
    var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
    location.href=url;
    return false;
});

用这个修改过的html：

<form id="search">
    <input type="text" class="form-control" id="goog" placeholder="Google Search">
    <input type="submit" style="display:none"/>
</form>

但无济于事。有人可以帮忙吗？

Answer 1

您正在附上“提交”＃39; event到文本输入元素。您应该将其附加到表单，因为它是提交的表单，而不仅仅是特定的输入。（您已在当前的index.html文档中正确执行此操作）。

您可以在表单元素中添加id：

 <form id="your-form-id">

然后将事件附加到它上面，就像你已经在做的那样：

var form = document.getElementById("your-form-id");
form.addEventListener("submit", function() { ...

另请注意，除非您在将JS代码移动到外部文件时更改了html，否则请在“提交”中进行操作。事件回调你试图从id =＆＃34; url＆＃34;的元素中获取搜索字符串。你的文字输入元素有id =＆＃34; goog＆＃34;，所以你不能检索它。

修改

问题似乎是表单提交已执行，您可以在运行代码之前使用新的空白输入重定向到同一页面。您可以在接收事件时避免在事件上调用preventDefault（），这样就不会提交表单并运行代码，而不是在结尾处返回false。

form.addEventListener("submit", function(event) { event.preventDefault(); ... your code ...

Answer 2

我注意到没有任何Javascript可能。我可以使用GET方法创建一个表单，并将表单的内容传递给GET请求，如下所示：

<form method="GET" action="https://google.co.uk/search">
    <input type="text" name="q" class="form-control" placeholder="Google Search">
    <input type="Submit" style="display:none">
</form>

上述解决方案是正确的，但使用它可以避免任何Javascript。

外部提交Javascript函数？

2 个答案: