优化iframe嵌入Google表格加载体验：实现加载指示器

<div id="spreadsheet-container" style="position: relative; width: 360px; height: 1000px; margin: auto;">
    <!-- 加载指示器元素 -->
    <div id="loading-spinner"></div>

    <!-- 嵌入的Google Spreadsheet iframe -->
    <iframe 
        id="google-spreadsheet-iframe" 
        name='iframe2' 
        scrolling='no' 
        src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELVvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' 
        style='width: 100%; height: 100%; border: none; display: block; opacity: 0; transition: opacity 0.5s;'>
    </iframe>
</div>

<style>
/* 加载指示器样式 */
#loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    z-index: 10; /* 确保在iframe之上 */
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* 浅色背景 */
    border-top: 5px solid #3498db; /* 蓝色旋转部分 */
    border-radius: 50%; /* 圆形 */
    animation: spin 1s linear infinite; /* 旋转动画 */
    display: flex; /* 使用flexbox居中内部内容，如果spinner内部有文本或图标 */
    align-items: center;
    justify-content: center;
}

/* 旋转动画关键帧 */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const iframe = document.getElementById("google-spreadsheet-iframe");
    const spinner = document.getElementById("loading-spinner");

    // 确保DOM元素存在
    if (!iframe) {
        console.error("Iframe element with ID 'google-spreadsheet-iframe' not found.");
        // 如果iframe不存在，直接隐藏spinner以防卡住
        if (spinner) {
            spinner.style.display = "none";
        }
        return;
    }

    // 初始状态：显示加载指示器 (已通过CSS默认设置，这里确保一下)
    if (spinner) {
        spinner.style.display = "flex"; // 或 "block"
    }

    // 监听iframe的加载事件
    iframe.addEventListener("load", () => {
        console.log("Google Spreadsheet iframe content loaded.");

        // 内容加载完成后，隐藏加载指示器
        if (spinner) {
            spinner.style.display = "none";
        }

        // 显示iframe内容
        iframe.style.opacity = "1";
        // 如果之前设置了 display: none，这里需要改为 display: block
        // iframe.style.display = "block"; 
    });

    // 考虑加载失败或超时的情况（可选，更高级的错误处理）
    // iframe.addEventListener("error", () => {
    //     console.error("Failed to load Google Spreadsheet iframe.");
    //     if (spinner) {
    //         spinner.style.display = "none";
    //     }
    //     // 可以显示错误信息或备用内容
    // });
});
</script>