在函数中调用函数（Javascript）_Javascript_Google Api

在函数中调用函数（Javascript）

javascript google-api

在函数中调用函数（Javascript）,javascript,google-api,Javascript,Google Api,简而言之，我希望在单击此按钮时执行以下功能： <input type="button" value="upload" onclick="generateUpload();" /> 下面是在主体中找到的按钮： <input type="button" value="Create Short" onclick="generateUpload();" /> <br/> 更新：下面是整个代码： <!DOCTYPE html> <html&

简而言之，我希望在单击此按钮时执行以下功能：

<input type="button" value="upload" onclick="generateUpload();" />

下面是在主体中找到的按钮：

<input type="button" value="Create Short" onclick="generateUpload();" /> <br/>

更新：下面是整个代码：

<!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>
   Parse.initialize("ID", "ID");



var module = angular.module("AuthApp", []);
module.controller("MyCntrl", function($scope) {
      $scope.currentUser = Parse.User.current();

   $scope.userIdChanged = function () {
       $scope.loading = true;

       // now access $scope.userId here
       var query = new Parse.Query(Parse.User);

       query.get($scope.userId, {
           success: function(userInfo) {
               // The object was retrieved successfully.
               var address = userInfo.get("Address");
               $scope.address = 'address: ' + address;

               var email = userInfo.get("Email");
               $scope.email = 'Email: ' + email;


                    var phone = userInfo.get("Phone");
               $scope.phone = 'Phone: ' + phone;

                 var scanURL = '<a href="scan.html">Scan</a>';
               $scope.scanURL = scanURL;
                          $scope.loading = false;


           },
           error: function(object, error) {
               // The object was not retrieved successfully.
               // error is a Parse.Error with an error code and message.
                          $scope.loading = false;

           }
       });
   };
});
</script>

     <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 ng-app="AuthApp">


<div>
    <div class="row row-centered">
        <div class="col-xs- col-centered col-fixed"><div class="item"><div class="content">
    <div ng-controller="MyCntrl">
          <div ng-show="currentUser">
             <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">

                    <div id="navbar" class="navbar-collapse collapse">

            <h2> Admin Panel </h2>
          </div></div></div></div>


                    <div id="content">


            <h3> Upload a new user document </h3>

        <h4><b> Step 1: <input type="text" class="form-control" ng-model="userId" ng-blur="userIdChanged()"/>

            <div>{{email}}</div>

                 <br />

                        <input type="text" id="subjectP" placeholder="Subject line">
<textarea cols="50" rows="4" name="comment" id="notesP" placeholder="notes"></textarea>


<br />
        <h4><b> Step 2</b></h4>
                                <input type="button" value="Create Short" onclick="generateUpload();" /> <br/> <br/>


<div id="result"></div>



</div></div></div></div>

</div>
            </div>
    </body>
</html>


初始化（“ID”，“ID”）；
var module=angular.module（“AuthApp”，[]）；
模块控制器（“MyCntrl”，功能（$scope）{
$scope.currentUser=Parse.User.current（）；
$scope.userIdChanged=函数（）{
$scope.loading=true；
//现在在此处访问$scope.userId
var query=newparse.query（Parse.User）；
query.get（$scope.userId{
成功：函数（userInfo）{
//已成功检索该对象。
var address=userInfo.get（“地址”）；
$scope.address='地址：'+地址；
var email=userInfo.get（“电子邮件”）；
$scope.email='email:'+电子邮件；
var phone=userInfo.get（“电话”）；
$scope.phone='phone:'+phone；
var scanURL=''；
$scope.scanURL=scanURL；
$scope.loading=false；
},
错误：函数（对象，错误）{
//未能成功检索该对象。
//错误是一个解析。错误包含错误代码和消息。
$scope.loading=false；
}
});
};
});
函数generateUpload（）
{
//从Google开发者控制台获得的浏览器API密钥。
var developerKey='ID'；
//从Google开发者控制台获得的客户端ID。
var clientId='ID'；
//用于访问用户照片的范围。
变量范围=['https://www.googleapis.com/auth/photos'];
var pickerApiLoaded=false；
var oauthToken；
//使用API加载程序脚本加载google.picker和gapi.auth。
函数onapioad（）{
load（'auth'，{'callback'：onAuthApiLoad}）；
load（'picker'，{'callback'：onPickerApiLoad}）；
}
函数onAuthApiLoad（）{
window.gapi.auth.authorize(
{
“客户端id”：客户端id，
“范围”：范围，
“立即”：真
},
手工（结果）；
}
函数onPickerApiLoad（）{
pickerApiLoaded=真；
createPicker（）；
}
函数handleAuthResult（authResult）{
if（authResult&！authResult.error）{
oauthToken=authResult.access\u令牌；
createPicker（）；
}
}
//创建并渲染用于拾取用户照片的拾取器对象。
函数createPicker（）{
if（pickeraploraded&&oauthToken）{
var picker=new google.picker.PickerBuilder（）。
enableFeature（google.picker.Feature.MULTISELECT\u已启用）。
addView（google.picker.ViewId.pdf）。
setOAuthToken（oauthToken）。
setDeveloperKey（developerKey）。
setCallback（pickerCallback）。
build（）；
picker.setVisible（true）；
}
}
//一个简单的回调实现。
函数选择器回调（数据）{
var url='无'；
if（数据[google.picker.Response.ACTION]==google.picker.ACTION.PICKED）{
var doc=data[google.picker.Response.DOCUMENTS][0]；
url=doc[google.picker.Document.url]；
var message='解析中存储了以下内容：'+url；
document.getElementById（'result'）.innerHTML=message；
}
}
AddOnAnapiloadedCallback（onApiLoad）；//注册API加载
}
var gapi_loaded=false，gapi_buffered_回调=[]；
函数onApiLoad（）{//此函数由Google API调用
gapi_loaded=true；
//运行缓冲回调
对于（var i=0；i


步骤2

乍一看，您似乎用错误的名称调用函数，您是用gBenerateUpload调用它的，在JQuery文件中它声明为generateUpload

我想我明白了。您已经将google API设置为在加载完成后调用onApiLoad。但是该函数在全局范围内不存在，因此您将得到一个错误

棘手的部分是，当您单击按钮并且GoogleAPI已完成加载时，您希望运行代码

有两种方法可以实现这一点：

1）在GoogleAPI完成加载之前不要渲染按钮。这涉及渲染（或使其可见）onApiLoad函数中的按钮

这可能不可行，因为UI/UX的东西，所以有一个更复杂的解决方案：

2）为

onApiLoad

事件编写处理程序：

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

现在你可以看到，这需要相当多的簿记。为了使这一点更容易，人们已经提出了一些想法<代码>承诺就是其中之一。如果你想探索更多，我建议你从那里开始

以下是完整的代码：

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

函数generateUpload（）
{
//从Google开发者控制台获得的浏览器API密钥。
var developerKey='id'；
//从Google开发者控制台获得的客户端ID。
var clientId='id'；
//用于访问用户照片的范围。
变量范围=['https://www.googleapis.com/auth/photos'];
皮克拉皮洛德酒店
addOnOnApiLoadedCallback(onApiLoad);

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

function generateUpload() 
{
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://apis.google.com/js/api.js?onload=onApiLoad';
    document.getElementsByTagName('head')[0].appendChild(script);
}