- 登入
- 註冊
/**
* 鎖住 WordPress 頁面捲軸，避免雙捲軸
* 會計算瀏覽器捲軸寬度並補右邊內距，避免版面跳動
*/
function lockPageScroll() {
var scrollBarWidth = window.innerWidth – document.documentElement.clientWidth;
document.documentElement.classList.add(‘no-scroll’);
document.body.classList.add(‘no-scroll’);
if (scrollBarWidth > 0) {
document.body.style.paddingRight = scrollBarWidth + ‘px’;
}
}
/** 解除鎖定，供需要時復原 */
function unlockPageScroll() {
document.documentElement.classList.remove(‘no-scroll’);
document.body.classList.remove(‘no-scroll’);
document.body.style.paddingRight = ”;
}
/**
* 在指定容器中嵌入 Google 試算表
* @param {string} mountId 掛載節點 id
* @param {string} spreadsheetUrl Google 試算表 pubhtml 連結
*/
function embedGoogleSpreadsheet(mountId, spreadsheetUrl) {
var mount = document.getElementById(mountId);
if (!mount) return;
// 若有 WP 管理列，往下位移避免被壓到
var adminBar = document.getElementById(‘wpadminbar’);
var adminOffset = adminBar ? adminBar.offsetHeight : 0;
// 外層容器固定定位鋪滿視窗
var wrapper = document.createElement(‘div’);
wrapper.style.position = ‘fixed’;
wrapper.style.top = adminOffset + ‘px’;
wrapper.style.left = ‘0’;
wrapper.style.width = ‘100vw’;
wrapper.style.height = ‘calc(100vh – ‘ + adminOffset + ‘px)’;
wrapper.style.overflow = ‘hidden’;
wrapper.style.zIndex = ‘999’; // 置於最上層
// 內層 iframe 填滿外層容器
var iframe = document.createElement(‘iframe’);
iframe.src = spreadsheetUrl;
iframe.style.position = ‘absolute’; // 相對外層 wrapper 定位
iframe.style.top = ‘0’;
iframe.style.left = ‘0’;
iframe.style.width = ‘100%’;
iframe.style.height = ‘100%’;
iframe.style.border = ‘0’;
iframe.setAttribute(‘title’, ‘Google Spreadsheet’);
// 為了避免重複載入或產生額外邊界，確保 URL 包含這些參數
// &widget=true&headers=false&chrome=false
// 如果你的 URL 已經有，則不需要額外添加
if (!iframe.src.includes(‘&widget=true’)) iframe.src += ‘&widget=true’;
if (!iframe.src.includes(‘&headers=false’)) iframe.src += ‘&headers=false’;
if (!iframe.src.includes(‘&chrome=false’)) iframe.src += ‘&chrome=false’;
wrapper.appendChild(iframe);
mount.appendChild(wrapper);
// 視窗尺寸或管理列狀態變更時重新計算
function onResize() {
var adminBarNow = document.getElementById(‘wpadminbar’);
var offset = adminBarNow ? adminBarNow.offsetHeight : 0;
wrapper.style.top = offset + ‘px’;
wrapper.style.height = ‘calc(100vh – ‘ + offset + ‘px)’;
}
window.addEventListener(‘resize’, onResize);
}
document.addEventListener(‘DOMContentLoaded’, function () {
// 請替換成你的 Google 試算表發佈到網路的 URL
var SPREADSHEET_URL = ‘https://docs.google.com/spreadsheets/d/e/2PACX-1vT61ZzAsN7Xh7YOfqsYzgdoe2jHhnE5X_jDWvn9w6nT7cCrCfD5oYuRshDfCCpcxyZfd3-kQnUJhlvq/pubhtml?gid=0&single=true’;
lockPageScroll(); // 關閉外層頁面捲軸
embedGoogleSpreadsheet(‘spreadsheet-mount’, SPREADSHEET_URL); // 使用新的函式和 ID
});
update:2025/11/10 10:04