[Day 17] 如何讓 iframe 在不影響外部的情況下關閉 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 ~~(跳過假日 ლ(́◕◞౪◟◕‵ლ) )~~ 更新文章的 Day 17

在前端中，iframe 是一種常用的元素，可以嵌入其他網頁或資源，來展示不同內容。但有時候使用者可能會需要關閉 iframe 視窗，而預設情況下並沒有提供這個功能。

本文將探討幾種實現方式，讓你可以在 iframe 內新增關閉按鈕，讓使用者可以更加自由地操作。

正文 - Main text

透過在 iframe 內新增一個關閉按鈕，使用者可以輕鬆地關閉 iframe 視窗，而不影響外部網頁的運作。

以下討論了如何在 iframe 內使用 JavaScript、jQuery 透過 sessionStorage 和 localStorage 監聽來實現。

如何使用 sessionStorage 控制關閉 iframe ?

以下將會給兩種版本範例。

〔JavaScript版本〕

在 iframe 內的頁面中加入按鈕，並在按鈕點擊時設置 sessionStorage：

<!-- iframe 內的頁面 -->
<button onclick="closeIframe()">Close Iframe</button>

<script>
  function closeIframe() {
    window.sessionStorage.setItem('closeIFrame', true);
  }
</script>

在包含 iframe 的頁面中監聽 sessionStorage：

<!-- 包含 iframe 的頁面 -->
<iframe src="iframe.html"></iframe>

<script>
  // 監聽 storage 事件
  window.addEventListener('storage', function(event) {
    if ( event.key === 'closeIFrame' && event.newValue === 'true' ) {
      // 設置的 session storage 被修改，且值為 true，關閉 iframe
      document.querySelector('iframe').style.display = 'none';

      // 清除 session storage
      window.sessionStorage.removeItem('closeIFrame');
    }
  });
</script>

當 iframe 內的頁面點擊按鈕時，會設置 closeIFrame 的值為 true，觸發 storage 事件，並在包含 iframe 的頁面中執行相應的函式，關閉 iframe，同時也會執行清除 session storage 的動作。這樣做的目的是為了讓使用者下一次開啟 iframe 時，session storage 的值還是預設值，避免造成誤解。

〔Jquery版本〕

<!-- iframe 內的頁面 -->
<button id="closeButton">Close Iframe</button>

<script>
  $('#closeButton').click(function() {
    window.sessionStorage.setItem('closeIFrame', true);
  });
</script>

<!-- 包含 iframe 的頁面 -->
<iframe src="iframe.html"></iframe>

<script>
  // 監聽 storage 事件
  $(window).on('storage', function(event) {
    if (event.originalEvent.key === 'closeIFrame' && event.originalEvent.newValue === 'true') {
      // 設置的 session storage 被修改，且值為 true，關閉 iframe
      $('iframe').hide();
    }
  });
</script>

如何使用 localStorage 控制關閉 iframe ?

如果使用 localStorage，與使用 sessionStorage 的方式相似，只需要將範例中的 window.sessionStorage 改為 window.localStorage 即可。

在設置 localStorage 時，可以使用 localStorage.setItem('closeIFrame', true)，在監聽 storage 事件時，可以使用 event.newValue === 'true' 來檢查 closeIFrame 的值是否為 true。

在關閉 iframe 後，同樣可以使用 localStorage.removeItem('closeIFrame') 來清除 localStorage 中的值。

參考資料 - Reference

[1] Window.sessionStorage - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

[2] Window.localStorage - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[3] W3Schools - Web Storage API

https://www.w3schools.com/html/html5_webstorage.asp

[5] JavaScript.info - LocalStorage 和 SessionStorage

https://javascript.info/localstorage

後記 - Epilogue

透過在 iframe 內新增一個關閉按鈕，使用者可以輕鬆地關閉 iframe 視窗，而不影響外部網頁的運作。使用 sessionStorage 或 localStorage，可以讓包含 iframe 的頁面監聽 session storage 或 local storage 的變化，並在相應的變化發生時執行相應的操作，如關閉 iframe 視窗。

使用 Web Storage API 提供的 sessionStorage 或 localStorage，可以在不同頁面之間共享資料，並且在使用完後可以輕鬆地清除相關的儲存空間。透過以上的方法，可以實現在 iframe 內新增一個關閉按鈕的功能，並且不影響外部頁面的運作，增強了網頁的使用體驗。

如果您需要進一步了解 Web Storage API 的相關知識，可以參考 MDN 的相關文件：Web Storage API - Web APIs | MDN。