0

アプリケーションに Google ドライブ ピッカー API を統合したいと考えています。しかし、Google Picker API の onload 関数は呼び出していません。以下は私のコードです。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GoogleDriveApi</title>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>      
</head>
<body>
<div> 
</div>
<script type="text/javascript">
/**************************************************************** start of Google api code ************************************************************************************************/
    // The API developer key obtained from the Google Developers Console.
var developerKey = 'AIzaSyAZjLxjshv3FpkLK6517tiZ2nYwt6rJZHk';

// The Client ID obtained from the Google Developers Console.
var clientId = '814476538527-pijtu7ck89ofep1j4tqr2j38ltruahtd.apps.googleusercontent.com';

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

var pickerApiLoaded = false;
var oauthToken;

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

function onAuthApiLoad() {
    console.log("auth api success");
    window.gapi.auth.authorize(
        {
            'client_id': clientId,
            'scope': scope,
            'immediate': false
        },
        handleAuthResult);
}

function onPickerApiLoad() {
    console.log("picker load");
    pickerApiLoaded = true;
    createPicker();
}

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

// Create and render a Picker object for picking user Photos.
function createPicker() {
    console.log("create picker");
    if (pickerApiLoaded && oauthToken) {
        var picker = new google.picker.PickerBuilder().
            addView(google.picker.DocsUploadView()).
            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 = 'You picked: ' + url;
    document.getElementById('result').innerHTML = message;
}



/**************************************************************** end of Google api code ************************************************************************************************/
</script>

ページ内のボタンをクリックすると、上記の .cshtml ページが呼び出されます。

 $("#button").click(function(){
     window.location.href = "/Contact/GoogleApi";
 });

コントローラーコード

 public ActionResult GoogleApi(){
      retunr View("GoogleApi");
 }

GoogleApi.cshmtl ページが読み込まれていますが、ononApiLoad関数が呼び出されていません。GooglePickerApi をオンに設定しました。これで何が悪いのか誰でも知っていますか。

4

1 に答える 1

0

スクリプトの使用: 

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

頭ではなく体で私のために働きました。ただし、これの正確な理由はわかりません。この投稿は約 6 か月前のものなので、今までに理解していただければ幸いです。これらのスクリプトがどのように実行されるかを知っている場合は、私に知らせてください! 実行とは、実行の順序を意味します!

于 2014-12-03T18:23:18.560 に答える