2012-08-11 87 views
7

是否可以從本地html文件(使用javascript)訪問google api(日曆v3)? 我想在我的瀏覽器中打開c:\ temp \ gsotto \ gsotto.htm,而不是通過IIS提供文件。從本地html/javascript(無網絡服務器)訪問google api's

它的工作原理,如果我通過一個Web服務器爲我的文件從

http://localhost/ 

。 在谷歌API控制檯我有一個以「Web應用程序的客戶端ID」:

Redirect URIs: http://localhost 
JavaScript origins:  http://localhost 

和瀏覽器應用程序「簡單API訪問」鍵(與參照網址)

Firebug shows me this when accessing through http://localhost/gsotto/gsotto.htm 
GET http://localhost/gsotto/gsotto.htm 
GET https://apis.google.com/js/client.js?onload=handleClientLoad 
GET https://apis.google.com/_/apps-static/_/js/gapi/client....cb=gapi.loaded_0 
GET https://ssl.gstatic.com/accounts/o/...-postmessagerelay.js 
GET https://accounts.google.com/o/oauth2/auth?client_id=.....&authuser=0 
GET https://ssl.gstatic.com/accounts/o/....-postmessage.js 

and this when access through c:\... 
GET https://apis.google.com/js/client.js?onload=handleClientLoad 
GET https://apis.google.com/_/apps-static/_/js/gapi/client.....cb=gapi.loaded_0 
GET https://ssl.gstatic.com/accounts/o/.....-postmessagerelay.js 
and nothing more.... 

do i need to use other settings in the google api console for this to work? 


<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset='utf-8' /> 
    </head> 
    <body> 
    <!--Add a button for the user to click to initiate auth sequence --> 
    <button id="authorize-button" style="visibility: hidden">Authorize</button> 
    <script type="text/javascript"> 
     // google calendar id 
     var calId = "...."; 

     var clientId = "..."; // oAuth2 webapp 
     var apiKey = "....";// Key for browser apps (with referers) 

     // google authentication scopes 
     var scopes = 'https://www.googleapis.com/auth/calendar'; 
       //https://www.googleapis.com/auth/calendar.readonly 

     // Use a button to handle authentication the first time. 
     function handleClientLoad() { 
      console.log('handleClientLoad'); 
     gapi.client.setApiKey(apiKey); 
     window.setTimeout(checkAuth,1); 
     } 

     function checkAuth() { 
      console.log('checkAuth'); 
      try { 

     gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); 
      } 
      catch(e) 
      { 
       console.log('e'); 
       console.log(e); 
      } 
     } 


     function handleAuthResult(authResult) { 

      console.log('handleAuthResult'); 
     var authorizeButton = document.getElementById('authorize-button'); 
     if (authResult && !authResult.error) { 
      console.log('result ok'); 
      authorizeButton.style.visibility = 'hidden'; 
      makeApiCall(); 
     } else { 
      console.log('authresult null or error'); 
      console.log(authResult); 
      authorizeButton.style.visibility = ''; 
      authorizeButton.onclick = handleAuthClick; 
     } 
     } 

     function handleAuthClick(event) { 
     console.log('handleAuthClick'); 
     gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult); 
     return false; 
     } 

function makeApiCall() { 
     console.log('makeApiCall'); 
    gapi.client.load('calendar', 'v3', function() { 
    var request = gapi.client.calendar.events.list({ 
     'calendarId': calId 
    }); 

    request.execute(function(resp) { 
     console.log('result:'); 
     console.log(resp); 

     for (var i = 0; i < resp.items.length; i++) { 
     var li = document.createElement('li'); 
     li.appendChild(document.createTextNode(resp.items[i].summary)); 
     document.getElementById('events').appendChild(li); 
     } 
    }); 
    }); 
} 
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script> 
    <div id="content"> 
    <ul id="events"></ul> 
    </div> 
    </body> 
</html> 
+0

*「有可能嗎?」* - 你甚至在詢問之前是否嘗試過? – Joseph 2012-08-11 11:07:00

+0

這是可能的,你可能需要允許腳本在IE – 2012-08-11 11:20:37

+0

中執行,我嘗試過,但沒有得到任何結果。編輯該問題以包含源代碼和螢火蟲NET-log結果 – sotto 2012-08-11 14:54:28

回答

5

根據您的瀏覽器中,您會發現從file://協議爲跨站點(或跨協議)原因運行時,無法使用AJAX。你看到工作的GET不是XHR/AJAX,但<script>標籤,所以大多數現代瀏覽器的答案是否定的。請參閱discussion here。如果您使用--allow-file-access-from-files--disable-web-securitylink)運行Chrome,則可能會使其工作。

相關問題