Javascript 函数在没有被调用的情况下执行？

Question

<a onclick="determineCountry(data)" class="installbtn">Install</a>

我正在尝试做的事情:单击上面的按钮后，用户将根据他/她的位置重定向到三个站点之一。但是，下面的脚本将立即执行，并在页面加载后立即重定向用户，而不是在单击按钮时(按预期)。我究竟做错了什么？请帮我解决这个问题。

<script>
function determineCountry(data){
   switch(data.address.country_code){
      case "US" :
         window.location.href = "https://www.usa.com";
      break;
      case "GB" :
         window.location.href = "https://www.gb.com";
      break;
      default :
         window.location.href = "http://www.google.com";
   }    
}
</script>

<script type="text/javascript" src="http://api.wipmania.com/jsonp?callback=determineCountry></script>

Answer 1

您的最后一行加载 JSONP 网站。 JSONP 的工作原理是让服务器发回调用函数的 Javascript。当您指定callback=determineCountry时，告诉它在 Javascript 中调用该函数。因此最后的脚本包含一个顶级调用，例如:

determineCountry({ some JSON object });

当您加载脚本时，它会立即运行该函数。

通常 JSONP 用于 AJAX 调用中，而不是直接在 <script> 中使用标签。所以你可能只想删除该行

<script type="text/javascript" src="http://api.wipmania.com/jsonp?callback=determineCountry></script>

实际上，您真正需要做的是当用户单击 anchor 时执行 JSONP AJAX 调用:

<a onclick="ajaxDetermineCountry();" href="#" class="installbtn">Install</a>

<script>
function ajaxDetermineCountry() {
    var script = document.createElement('script');
    script.src = "http://api.wipmania.com/jsonp?callback=determineCountry";
    document.head.appendChild(script);
}
function determineCountry(data){
   switch(data.address.country_code){
      case "US" :
         window.location.href = "https://www.usa.com";
        break;
      case "GB" :
         window.location.href = "https://www.gb.com";
        break;
      default :
         window.location.href = "http://www.google.com";
   }    
}
</script>