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

Question

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

我想做什么： 单击上面的按钮后，用户将被重定向到三个站点之一，具体取决于 his/her 位置。但是，下面的脚本会立即执行并在页面加载后立即重定向用户，而不是在单击按钮时（按预期）。我究竟做错了什么？请帮我解决这个问题。

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

实际上，看起来您真正需要做的是在用户单击锚点时执行 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>