功能无响应按钮单击

时间:2015-01-26 19:28:28

标签: javascript jquery html google-api

我试图在点击按钮时加载以下功能:

<button onclick="generateUpload()">Upload</button> 



<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

<script type="text/javascript">
function generateUpload() 
{

    // The Browser API key obtained from the Google Developers Console.
      var developerKey = 'ID';

      // The Client ID obtained from the Google Developers Console.
      var clientId = 'ID';

      // Scope to use to access user's photos.
      var scope = ['https://www.googleapis.com/auth/photos'];

      var pickerApiLoaded = false;
      var oauthToken;

      // Use the API Loader script to load google.picker and gapi.auth.
      function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }

      function onAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,

              'immediate': true
            },
            handleAuthResult);
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
              addView(google.picker.ViewId.PDFS).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      }

      // A simple callback implementation.
      function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
                 var message = 'The following(s) were stored in Parse: ' + url;
        document.getElementById('result').innerHTML = message;

        }
      }

      addOnOnApiLoadedCallback(onApiLoad); // register API load
}

var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
    gapi_loaded = true;
    // run buffered callbacks
    for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
        gapi_buffered_callbacks();
    }
}
function addOnOnApiLoadedCallback(callback) {
    if (gapi_loaded) {
        callback(); // api is loaded, call immediately
    } else {
        gapi_buffered_callbacks.push(callback); // add to callback list
    }

}

</script>

然而,它没有响应,控制台上没有显示错误。任何帮助将不胜感激。我不确定它是如何被调用的,但是在控制台上没有显示任何错误,所以我不确定问题出在哪里。按钮位于正文中,脚本位于标题内。

更新: 以下是整个代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>

  <script src="angular.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
<!--======================================================================-->
<!--Custom website css file is linked here-->
<link href="css/style1.css" rel="stylesheet">
<!--Font Awesome CSS link-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

<script type="text/javascript">
function generateUpload() 
{

    // The Browser API key obtained from the Google Developers Console.
      var developerKey = 'ID';

      // The Client ID obtained from the Google Developers Console.
      var clientId = 'ID';

      // Scope to use to access user's photos.
      var scope = ['https://www.googleapis.com/auth/photos'];

      var pickerApiLoaded = false;
      var oauthToken;

      // Use the API Loader script to load google.picker and gapi.auth.
      function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }

      function onAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,

              'immediate': true
            },
            handleAuthResult);
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
              addView(google.picker.ViewId.PDFS).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      }

      // A simple callback implementation.
      function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
                 var message = 'The following(s) were stored in Parse: ' + url;
        document.getElementById('result').innerHTML = message;

        }
      }

      addOnOnApiLoadedCallback(onApiLoad); // register API load
}

var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
    gapi_loaded = true;
    // run buffered callbacks
    for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
        gapi_buffered_callbacks();
    }
}
function addOnOnApiLoadedCallback(callback) {
    if (gapi_loaded) {
        callback(); // api is loaded, call immediately
    } else {
        gapi_buffered_callbacks.push(callback); // add to callback list
    }

}

</script>





</head>
<body >



                                <button onclick="generateUpload()">Upload</button> <br/> <br/> 



    </body>
</html>

1 个答案:

答案 0 :(得分:1)

generateUpload中,您正在声明函数,但您不会从某处调用它们。我认为你应该删除所有这些功能,并从generateUpload内部调用它们。例如

function generateUpload() 
    {

        // The Browser API key obtained from the Google Developers Console.
          var developerKey = 'ID';

          // The Client ID obtained from the Google Developers Console.
          var clientId = 'ID';

          // Scope to use to access user's photos.
          var scope = ['https://www.googleapis.com/auth/photos'];

          var pickerApiLoaded = false;
          var oauthToken;

          // Use the API Loader script to load google.picker and gapi.auth.
          //just call the function          
          onApiLoad();

          //call the rest of your functions
    }

以及generateUpload之外的oauthToken函数

function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }