html 文件的 <head> 中的 Javascript 不工作

Question

所以我有这段代码，应该连接到 google api 并获取用户的一些信息。然而，问题是启动登录功能的 link 不起作用。

这是一个 java RESTful 项目，因此它是通过 Maven 构建的，如果有帮助的话，它会部署在 tomcat 服务器上。

<!DOCTYPE html>
<html>
<head>
    <script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
    <script type='text/javascipt'>
    $(document).ready(function(){
  var OAUTHURL = 'https://accounts.google.com/o/oauth2/auth?';
  var VALIDURL = 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=';
  var SCOPE = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';
  var CLIENTID = 'sercret';
  var REDIRECT = 'myredirect';
  var LOGOUT = 'http://accounts.google.com/Logout';
  var TYPE = 'token';
  var url1 = OAUTHURL + 'scope=' + SCOPE + '&client_id=' + CLIENTID + '&redirect_uri=' + REDIRECT + '&response_type=' + TYPE;
  var acToken;
  var tokenType;
  var expiresIn;
  var user;
  var loggedIn = false;
  function login(){
      var win = window.open(url1, 'windowname1', 'width=800, height=600'); 
      var pollTimer = window.setInterval(function() {
          try {
              console.log(win.document.URL);
              if (win.document.URL.indexOf(REDIRECT) != -1) {
                  window.clearInterval(pollTimer);
                  var url =   win.document.URL;
                  acToken =   gup(url, 'access_token');
                  tokenType = gup(url, 'token_type');
                  expiresIn = gup(url, 'expires_in');
                  win.close(); 
                  validateToken(acToken);
              }
          } catch(e) {
          }
      }, 500);
  });
  function validateToken(token) {
      $.ajax({
          url: VALIDURL + token,
          data: null,
          success: function(responseText){
              getUserInfo();
              loggedIn = true;
              $('#loginText').hide();
              $('#logoutText').show();
          }, 
          dataType: 'jsonp'
      });
  }
  function getUserInfo() {
      $.ajax({
          url: 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + acToken,
          data: null,
          success: function(resp) {
              user    =   resp;
              console.log(user);
              $('#uName').text('Welcome ' + user.name);
              $('#imgHolder').attr('src', user.picture);
          },
          dataType: 'jsonp'
      });
  }
  /*credits: http://www.netlobo.com/url_query_string_javascript.html*/
  function gup(url, name) {
  name = name.replace(/[\\[]/,'\\[').replace(/[\]]/,'\\]');
      var regexS = '[\#&]'+name+'=([^&#]*)';
      var regex = new RegExp( regexS );
      var results = regex.exec( url );
      if( results === null )
          return ;
      else
          return results[1];
  }
  function startLogoutPolling() {
      $('#loginText').show();
      $('#logoutText').hide();
      loggedIn = false;
      $('#uName').text('Welcome ');
      $('#imgHolder').attr('src', 'none.jpg');
  }
 });
</script>
</head>
<body>
    <a href="#" onclick='login()' id='loginText'> Click here to login </a>
    <a href="#" style='display:none' id='logoutText' target='myIFrame' onclick="myIFrame.location='https://www.google.com/accounts/Logout'; startLogoutPolling();return false;"> Click here to logout </a>
    <iframe name='myIFrame' id='myIFrame' style='display:none'></iframe>
    <div id='uName'></div>
    <img src='' id='imgHolder'/>
</body>
</html>

Answer 1

这是在寻找一个名为 login 的函数：

onclick='login()'

但是，当前作用域中不存在这样的函数。它仅在 document.ready 处理程序的范围内定义：

$(document).ready(function () {
    function login() {
        //...
    }
});

所以它在处理程序之外是不可见的。为了让它可见，在外面定义：

function login() {
    //...
}

$(document).ready(function () {
    //...
});

你一般不需要在document.ready中定义你的函数，主要是为了等到DOM被加载后再计算选择器。您可以在其中定义函数，如果这些函数不需要存在于其范围之外的话。

另一种选择是将其绑定在它定义的范围内，而不是在标记中嵌入。像这样：

$(document.ready(function () {
    function login() {
        //...
    }

    $('#loginText').click(login);
});

Answer 2

小错误，大浪费时间:)

 <script type='text/javascript'>

您错过了 javascipt

中的 'r'

html 文件的 <head> 中的 Javascript 不工作

Javascript in <head> of html file not working

javascript

html

maven

tomcat