JavaScript 開啟全螢幕/無邊框視窗的跨瀏覽器兼容方案 (IE4+/Netscape4+)

背景與現狀

本代碼針對 IE 4+ 與 Netscape 4+ 時代設計，利用 window.open() 的 fullscreen=yes (IE 專屬) 與 window.resizeTo()/moveTo() 模擬全螢幕效果。現代瀏覽器嚴格限制全螢幕 API 僅限用戶手勢觸發 (requestFullscreen())，且彈窗攔截器會阻擋非用戶主動點擊的 window.open()。此方案僅供歷史參考，不可用於現代生產環境。

核心代碼結構

<script language="javascript">
function intro() {
  // Mac IE 4 特殊處理
  if (navigator.appVersion.indexOf("Mac") != -1 &&
      navigator.userAgent.indexOf("MSIE") != -1 &&
      parseInt(navigator.appVersion) == 4) {
    skip();
  } else {
    popup();
  }
}

function skip() {
  location.href = "https://yourdomain/index.htm";
}

function popup() {
  var version = parseFloat(navigator.appVersion.substring(
    navigator.appVersion.indexOf('.') - 1, navigator.appVersion.length));
  
  if (version >= 4) {
    if (navigator.appName == "Netscape") {
      // Netscape: 無 fullscreen 參數，僅開大視窗
      var win = window.open("https://yourdomain/index.htm", "Hello", "scrollbars");
      win.focus();
    } else if (navigator.appName == "Microsoft Internet Explorer") {
      // IE: 使用 fullscreen=yes
      window.open("https://yourdomain/index.htm", "screen", "fullscreen=yes");
    }
  } else {
    // 低版本瀏覽器直接跳轉
    location.href = "https://yourdomain/index.htm";
  }
}
</script>
<BODY onload="intro()"></BODY>

關鍵技術點解析

1. 瀏覽器偵測邏輯

• navigator.appName："Microsoft Internet Explorer" / "Netscape"
• navigator.appVersion 解析主版本號
• Mac IE 4 被視為不支援全螢幕，直接跳轉

2. 視窗參數差異

3. 代碼缺陷與風險

• 字串拼接錯誤："https://
yourdomaintg/index.htm" 換行導致 URL 失效
• 變數拼寫錯誤：ypurdomain、npgae、ppgae
• 安全限制：現代瀏覽器預設攔截 onload 觸發的彈窗
• 用戶體驗惡劣：強制全螢幕違反可用性準則，易被殺毒/防彈窗軟體攔截

現代替代方案

1. Fullscreen API (需用戶手勢)

<button id="fsBtn">進入全螢幕</button>
<script>
document.getElementById('fsBtn').addEventListener('click', () => {
  const elem = document.documentElement;
  if (elem.requestFullscreen) elem.requestFullscreen();
  else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); // Safari
  else if (elem.msRequestFullscreen) elem.msRequestFullscreen(); // IE11
});
</script>

2. 視窗最大化 (新視窗)

// 僅在用戶點擊事件中調用
const win = window.open(url, '_blank', 'noopener,noreferrer');
if (win) {
  win.moveTo(0, 0);
  win.resizeTo(screen.availWidth, screen.availHeight);
}

3. CSS 偽全螢幕 (單頁應用常用)

.fullscreen-container {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999; background: white; overflow: auto;
}

總結

早期「全螢幕視窗」屬於侵入式設計，現代 Web 標準賦予用戶完全控制權。開發者應改用 Fullscreen API 搭配用戶交互，或以 CSS 實現沉浸式體驗，尊重用戶瀏覽自主權。