Question

HTML，JavaScript和Jquery的新手，但我希望通过谷歌浏览器扩展程序来学习并最终希望制作一个“鞋机器人”程序。

现在，我只想链接我的“Go！”按钮将用户带到google.com。当我直接将我的HTML文档加载到Chrome中时它会起作用，但是当我尝试在我创建的扩展程序中执行相同操作时，没有任何反应。

这是我的清单文件：

 {
  "manifest_version": 1,

  "name": "Shoe bot",
  "description": "This extension will provides an ATC & purchase service
               for shoes",
  "version": "1.0",

  "browser_action": {
   "default_icon": "yeezy.png",
   "default_popup": "popup.html"
  },

  "content_scripts":[{

  "js": ["jquery.js","popup.js"],
  "matches": ["http://*/*", "https://*/*"]
  }]
}

然后我的HTML（popup.html）：

<!doctype html>
<html>
  <head>
  <script src="jquery.js"></script>
  <script src="popup.js"></script>
    <h1>Size</h1>
    <p>
    </p>
    <select>
      <option value = "5.0">5.0</option>
      <option value = "6.0">6.0</option>
      <option value = "7.0">7.0</option>
      <option value = "8.0">8.0</option>
      <option value = "9.0">9.0</option>
      <option value = "10.0">10.0</option>
      <option value = "11.0">11.0</option>
      <option value = "12.0">12.0</option>
    </select>
    <p>
    </p>
  </head>
  <body>
  <p>
  </p>
    <button>Go!</button>
  </body>
</html>

然后是我的JavaScript文件（popup.js）：

  $(document).ready(function(){
    $("button").click(function(){
        window.location.href = "http://www.google.com";
    });
});

感谢任何提示/帮助

Answer 1

我同意第一个答案，应该使用HTML而不是JavaScript来进行重定向：

<a href="http://www.google.com">Go!</a>

但是，如果你想使用JavaScript（因为你说你想学习），我列出了一些我在你的代码中注意到的问题：

头标记

head代码中有用户控件，而不是body代码。在head标记内，应该只有对用户不可见但与浏览器相关的内容，例如title，script和link。因此，请像这样移动</head>和<body>代码：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <title>Size</title>
</head>
<body>
    <!--Site content begins here-->
    <h1>Size</h1>

外部网址

对于外部网站的任何URL，应始终以＆＃34; http：//＆＃34;开头。或＆＃34; https：//＆＃34;。否则你将以http://example.com/google.com结束。对于该功能，请更改为：

window.location.href = "http://google.com";

奖金调试提示

使用浏览器中的控制台检查错误。这通常可以通过在浏览器中点击F12来访问。检查所有红色错误并尝试理解它们。根据我的经验，学习编码的最佳方法是分析错误。

Answer 2

如果按钮的唯一功能是将用户重定向到另一个页面 - 将其作为链接并使用css将其设置为按钮样式：

<a href="http://google.com" id="runBot">Go!</a>

如果您使用的是Bootstrap - 您可以将按钮样式添加到链接中

<a href="http://google.com" id="runBot" class="button btn btn-primary">Go!</a>

Answer 3

只需使用html即可。我创建了一个简单的工作JSfiddle来演示：https://jsfiddle.net/tnw78uvc/

只需在<a>

周围添加<button>标记

Answer 4

您需要知道的button标记有一些内容，它会导致本机重新加载页面。基本上你用$('#runBot').click(function () { ... })做的事情是将一个函数（事件处理程序）分配给按钮的事件click。你到目前为止做得很好，但是button已经有一个由浏览器分配给它的事件处理程序，它会导致页面在事件处理程序完成它之前重新加载。

值得庆幸的是，浏览器提供了一种阻止本机事件处理程序触发（自行运行）的方法

当你这样做时

$('#runBot').on('click', function () { ... });

您要声明的功能，获取一个名为event参数的参数，该参数具有可让您更多了解所发生事件（点击）的属性和方法，并操纵浏览器处理该点击的方式，让＆＃39; s称之为ev。

$('#runBot').on('click', function (ev) { 
    window.location = "google.com";
});

ev有一个名为preventDefault的方法，可以完全满足您的需要，阻止浏览器为您刚刚收到的事件触发它的默认事件处理程序。

所以你必须这样做：

$('#runBot').on('click', function (ev) { 
    window.location = "google.com";
    ev.preventDefault();
});

注意 jQuery中的ev不是来自浏览器的本机事件，但它可以更轻松地修复浏览器之间的不兼容性，这些浏览器可以随意执行任何事情，特别是IE。

希望你明白了！现在让我们来看看你的代码无法正常工作的原因。基本上window.location不是你重定向到另一个页面的方式，你有two ways of doing that，让我们使用其中一个window.location.href

$('#runBot').on('click', function (ev) { 
    window.location.href = "google.com";
    ev.preventDefault();
});

Answer 5

这可能就像更改标记一样简单：

<button type=button id="runBot">Go!</button>

按钮的默认类型“提交”会尝试提交表单。

Answer 6

您应该完全编写链接，否则它只会重定向为您的本地页面！您还在<script>标记中链接了jquery文件路径.Look就像路径https://一样，不要忘记将.href添加到锚链接....

$(document).ready(function(){   
$('#runBot').click(function() {    
    window.location.href = "https://google.com";
   });
 });

将页面重定向到URL Jquery Google Chrome Extension

6 个答案:

头标记

外部网址

奖金调试提示