Question

我几乎完全模仿了Google文档页面上的代码示例，但是分享API仍然失败了。

我读到的文档页面是：

把它们放在一起，我明白了：

<!DOCTYPE html>
<html>

<head>
    <title>Google Realtime Quickstart</title>
    <!-- Load Styles -->
    <link href="https://www.gstatic.com/realtime/quickstart-styles.css" rel="stylesheet" type="text/css" />
    <!-- Load the Realtime JavaScript library -->
    <script src="https://apis.google.com/js/api.js"></script>
    <!-- Load the utility library -->
    <script src="https://www.gstatic.com/realtime/realtime-client-utils.js"></script>
</head>

<body>
    <div style="background-color:red" onclick="s.showSettingsDialog()">Share</div>
    <main>
        <h1>Realtime Collaboration Quickstart</h1>
        <p>Now that your application is running, simply type in either text box and see your changes instantly appear in the other one. Open this same document in a <a onclick="window.open(window.location.href);return false;" target="_blank">new tab</a> to see it work across tabs.</p>
        <textarea id="text_area_1"></textarea>
        <textarea id="text_area_2"></textarea>
        <button id="auth_button">Authorize</button>
    </main>
    <script>
        var clientId = 'xx-xxxxxxxxxxxxxx.apps.googleusercontent.com';
        if (!/^([0-9])$/.test(clientId[0])) {
            alert('Invalid Client ID - did you forget to insert your application Client ID?');
        }
        // Create a new instance of the realtime utility with your client ID.
        var realtimeUtils = new utils.RealtimeUtils({
            clientId: clientId
        });
        authorize();

        function authorize() {
            // Attempt to authorize
            realtimeUtils.authorize(function(response) {
                if (response.error) {
                    // Authorization failed because this is the first time the user has used your application,
                    // show the authorize button to prompt them to authorize manually.
                    var button = document.getElementById('auth_button');
                    button.classList.add('visible');
                    button.addEventListener('click', function() {
                        realtimeUtils.authorize(function(response) {
                            start();
                        }, true);
                    });
                } else {
                    start();
                }
            }, false);
        }

        function start() {
            // With auth taken care of, load a file, or create one if there
            // is not an id in the URL.
            var id = realtimeUtils.getParam('id');
            if (id) {
                // Load the document id from the URL
                realtimeUtils.load(id.replace('/', ''), onFileLoaded, onFileInitialize);
            } else {
                // Create a new document, add it to the URL
                realtimeUtils.createRealtimeFile('New Quickstart File', function(createResponse) {
                    window.history.pushState(null, null, '?id=' + createResponse.id);
                    realtimeUtils.load(createResponse.id, onFileLoaded, onFileInitialize);
                });
            }
        }
        // The first time a file is opened, it must be initialized with the
        // document structure. This function will add a collaborative string
        // to our model at the root.
        function onFileInitialize(model) {
            var string = model.createString();
            string.setText('Welcome to the Quickstart App!');
            model.getRoot().set('demo_string', string);
        }
        // After a file has been initialized and loaded, we can access the
        // document. We will wire up the data model to the UI.
        function onFileLoaded(doc) {
            var collaborativeString = doc.getModel().getRoot().get('demo_string');
            wireTextBoxes(collaborativeString);
        }
        // Connects the text boxes to the collaborative string
        function wireTextBoxes(collaborativeString) {
            var textArea1 = document.getElementById('text_area_1');
            var textArea2 = document.getElementById('text_area_2');
            gapi.drive.realtime.databinding.bindString(collaborativeString, textArea1);
            gapi.drive.realtime.databinding.bindString(collaborativeString, textArea2);
        }
        init = function() {
            s = new gapi.drive.share.ShareClient();
            //s.setOAuthToken(clientId);
            s.setOAuthToken(gapi.auth.getToken());
            s.setItemIds([realtimeUtils.getParam('id').replace('/','')]);
        }
        window.onload = function() {
            gapi.load('drive-share', init);
        }
    </script>
</body>

</html>

结果如下：

GET https://drive.google.com/sharing/share?id=xxxx_xxxxxxxx&fore…
d=false&client=postMessage&embedOrigin=www.example.com 500 ()
    _.k.$l @ cb=gapi.loaded_0:651
    _.k.S @ cb=gapi.loaded_0:651
    _.k.Ql @ cb=gapi.loaded_0:794
    ys.kc @ cb=gapi.loaded_0:791
    Ts.OV @ cb=gapi.loaded_0:822
    Zs @ cb=gapi.loaded_0:814
    FM @ cb=gapi.loaded_0:818
    Ts.Ph @ cb=gapi.loaded_0:818
    pt.Na @ cb=gapi.loaded_0:829
    onclick @ ?id=xxxx_xxxxxxxx:15

我修改的唯一部分是在顶部添加红色div和点击事件。我做错了什么？

编辑1
我发现上面有一个问题：我传入clientId而不是oauth令牌（在init函数中）。但是，修复此问题并没有改变任何内容，甚至没有报告错误的任何行。

编辑2 单击显示“共享”的红色div元素时会发生错误。忘了说。

Google提供的代码示例“无法加载资源”（500错误）

0 个答案: