Uncaught TypeError: Cannot read property 'urlshortener' of undefined

Question

我收到以下错误：

Uncaught TypeError: Cannot read property 'urlshortener' of undefined

我实际上是在尝试将 url 从 google 驱动器生成的已缩短的 url 存储到解析中。

完整代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>upload</title>

        <script type="text/javascript">
            // 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': false
                    },
                    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 =  url;
                    document.getElementById('result').innerHTML = message;
                }

                var longUrl=url;
                var request = gapi.client.urlshortener.url.insert({
                    'resource': {
                        'longUrl': longUrl
                    }
                });
                request.execute(function(response) {
                    if(response.id != null) {
                        str ="<a href='"+response.id+"'>"+response.id+"</a>";
                        document.getElementById("output").innerHTML = str;

                        Parse.initialize("ID", "ID");
                        var PDFUpload = new Parse.Object("Scan");

                        PDFUpload.set("PDFDocument", response.id);

                        PDFUpload.save(null, {
                            success: function(uploadResult) {
                                // Execute any logic that should take place after the object is saved.
                            },
                            error: function(uploadResult, error) {
                                // Execute any logic that should take place if the save fails.
                                // error is a Parse.Error with an error code and description.
                                alert('Failed to create new object, with error code: ' + error.description);
                            }
                        });
                    } else {
                        alert("error: creating short url");
                    }
                });
            }

            function load()
            {
                gapi.client.setApiKey('ID'); //get your ownn Browser API KEY
                gapi.client.load('urlshortener', 'v1',function(){});
            }
            window.onload = load;
        </script>
        <script src="https://apis.google.com/js/client.js"> </script>
    </head>
    <body>
        <div id="result"></div>
        <div id="demo">
        <div id="output">
        <!-- The Google API Loader script. -->
        <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
    </body>
</html>

特别是我尝试缩短 URL 以存储到 Parse:

var longUrl=url;
var request = gapi.client.urlshortener.url.insert({
    'resource': {
        'longUrl': longUrl
    }
});
request.execute(function(response) {
    if(response.id != null) {
        str ="<a href='"+response.id+"'>"+response.id+"</a>";
        document.getElementById("output").innerHTML = str;

        Parse.initialize("ID", "ID");
        var PDFUpload = new Parse.Object("Scan");

        PDFUpload.set("PDFDocument", response.id);

        PDFUpload.save(null, {
            success: function(uploadResult) {
                // Execute any logic that should take place after the object is saved.

            },
            error: function(uploadResult, error) {
                // Execute any logic that should take place if the save fails.
                // error is a Parse.Error with an error code and description.
                alert('Failed to create new object, with error code: ' + error.description);
            }
        });
    } else {
        alert("error: creating short url");
    }
});

更新：请试用此代码。它从您插入的输入值中缩短 url。从某种意义上说，您在输入字段中输入示例 yahoo.ca，一旦您点击转换，它就会将其缩短为 url 并存储在解析中。这工作成功，但我想将其集成到我的代码中，其中 url 派生自 url，该 url 是从用户从他们的 google 驱动器中选择的项目生成的：

<html>
    <head>
        <script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>          
        <script type="text/javascript">
            function makeShort() {
                var longUrl=document.getElementById("longurl").value;
                var request = gapi.client.urlshortener.url.insert({
                    'resource': {
                        'longUrl': longUrl
                    }
                });
                request.execute(function(response) {
                    if(response.id != null) {
                        str ="<a href='"+response.id+"'>"+response.id+"</a>";
                        document.getElementById("output").innerHTML = str;

                        Parse.initialize("ID", "ID");
                        var PDFUpload = new Parse.Object("Scan");

                        PDFUpload.set("PDFDocument", response.id);

                        PDFUpload.save(null, {
                            success: function(uploadResult) {
                                // Execute any logic that should take place after the object is saved.
                            },
                            error: function(uploadResult, error) {
                                // Execute any logic that should take place if the save fails.
                                // error is a Parse.Error with an error code and description.
                                alert('Failed to create new object, with error code: ' + error.description);
                            }
                        });
                    } else {
                        alert("error: creating short url");
                    }
                });
            }

            function load() {
                gapi.client.setApiKey('ID'); //get your ownn Browser API KEY
                gapi.client.load('urlshortener', 'v1',function(){});
            }
            window.onload = load;
        </script>
        <script src="https://apis.google.com/js/client.js"></script>
    </head>

    <body>
        URL: <input type="text" id="longurl" name="url" value="yahoo.com" /> <br/>
        <input type="button" value="Create Short" onclick="makeShort();" /> <br/> <br/>
        <div id="output"></div>
    </body>
</html>

Answer 1

我仔细研究了您的示例并试图了解发生了什么，但我选择重新开始并尝试以简单的方式完成此操作。我看到您正在使用 Angular，所以我做了一点 fiddle 来尝试将 url 缩短为这个问题。

我认为主要问题是您需要生成一个新密钥并按照配置步骤操作。我在几分钟内就这样做了，而且效果很好。请务必在您的控制面板中选择您想要的 api（url 缩短器）！

这是我能够生成的 link http://goo.gl/15yWwP

function googleOnLoadCallback() {

    var key = '{ YOUR KEY }';

    var apisToLoad = 1; // must match number of calls to gapi.client.load()
    var gCallback = function () {
        if (--apisToLoad == 0) {
            //Manual bootstraping of the application
            var $injector = angular.bootstrap(document, ['app']);
        };
    };
    gapi.client.setApiKey(key);
    gapi.client.load('urlshortener', 'v1', gCallback);
}

<script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>

在我的 shorten() 函数中

var request = 
    gapi.client.urlshortener.url.insert({
        'longUrl': '{ YOUR LONG URL }'
    });

request.execute(function(response) {
    console.log(response.id);
});

Uncaught TypeError: Cannot read property 'urlshortener' of undefined

Uncaught TypeError: Cannot read property 'urlshortener' of undefined

javascript

url

url-rewriting

google-api

JSFiddle link