Google Calendar添加事件功能突发失效，页面空白无报错求助

Let's break down the possible causes of your blank page issue and walk through step-by-step fixes:

First, Rule Out Server-Side Issues #

The most critical first check: directly visit http://mywebsie.com/quickstart.html in your browser address bar. If this also shows a blank page with no HTML content, the problem isn't with your JavaScript—it's with your server or the file itself:

• Verify the quickstart.html file exists in the correct directory on your server, and has proper read permissions (e.g., for Apache, ensure the file is readable by the web server user).
• Check your server's error logs (Apache/Nginx logs) for clues like file not found errors, permission denials, or misconfigured path mappings.
• Confirm your server is serving .html files with the correct text/html MIME type. If it's using the wrong type, browsers won't render the HTML content.

If Direct Access Works: Debug the Client-Side Flow #

If the page loads normally when accessed directly, the issue lies in how you're launching it or the data being passed via localStorage:

1. Fix the Invalid localStorage Entry #

In your addcal() function, you're storing a DOM element directly in localStorage:

localStorage.setItem('resultat', resultat);

localStorage only supports string values—storing a DOM element will save [object HTMLDivElement], which is useless and could cause unexpected behavior. Either remove this line entirely (your quickstart code doesn't use it) or store the element's content instead:

localStorage.setItem('resultat', resultat.innerText);

2. Verify Domain Consistency #

Double-check that the domain of your calling page matches http://mywebsie.com exactly (including HTTP/HTTPS, and www. vs non-www.). If there's a mismatch, localStorage data won't be shared between the windows, which won't make the page blank but will break your event creation logic. Also, confirm mywebsie.com isn't a typo (e.g., should it be mywebsite.com?).

3. Debug Google API Loading #

Your page relies on the Google API script to initialize auth and load the Calendar API. To confirm this is working:

• Open the browser's Developer Tools > Network tab before launching the quickstart page. Check if https://apis.google.com/js/api.js loads with a 200 status code. If it fails to load, handleClientLoad() will never run, and your buttons won't appear (though the HTML content should still be visible).
• If the script loads, manually run handleClientLoad() in the Console tab of the quickstart window. If the authorize button appears, the issue might be with the onload trigger—try modifying the script tag to use an explicit event listener instead:

  <script src="https://apis.google.com/js/api.js"></script>
  <script>
    window.addEventListener('load', handleClientLoad);
  </script>
  

4. Validate Google Cloud Credentials #

Even if your code worked before, credentials can get invalidated:

• Go to the Google Cloud Console for your project:
  • Ensure the Google Calendar API is still enabled (search for it in the API Library).
  • Check your API Key's restrictions: If you set HTTP referrer restrictions, confirm http://mywebsie.com (and any variations) are listed correctly.
  • Verify your Client ID's JavaScript origins include your domain—missing this will block auth, but shouldn't make the page blank.

5. Add Debugging Output #

Insert a simple debug message at the top of your quickstart.html body to confirm the page is being rendered:

<body>
  <p>Debug: Page loaded successfully</p>
  <!-- Rest of your content -->
</body>

If this message appears, the page is loading, and you can start debugging the JavaScript logic step-by-step (e.g., check if localStorage values are being retrieved correctly by logging them in the console):

console.log('date1:', localStorage.getItem("date1"));
console.log('casenumber:', localStorage.getItem("casenumber"));
console.log('notes:', localStorage.getItem("notes"));

内容的提问来源于stack exchange，提问作者qasmaoui