改變 iframe src 時不增加瀏覽歷史紀錄

/

本篇要解決的問題

這幾天在幫一個頁面寫一個功能,就是按下按鈕,會改變頁面上 iframesrc,結果過了幾天,有使用者回饋說頁面按了回上一頁沒反應。

嗯?為什麼回上一頁會沒反應?後來實測後發現,是每換一次 iframe src,瀏覽紀錄就會被新增一筆,所以按了上一頁,就是回到原頁,使用者就會以為上一頁的按鈕壞了。

這真的是個坑呀!原來 iframe src 被替換後,瀏覽紀錄 history 會新增一筆原頁的紀錄,還真的是這次遇到這狀況才知道。

後來 Google 了一下,stackoverflow 上大部份是用以下解法:

var iframe = document.getElementById('iframe  id');
iframe.contentWindow.location.replace('要替換的網址');

不過…因為 August 還得監聽 iframe onload 的事件,用 location.replace 的方式發現會監聽不到,只好用別的方式。

本篇就是把 August 找到的方法整理出來,並且做了一個 Demo 頁來測試會不會增加 history.length


製作一個 Demo

因為本篇實在是太短,所以請讓 August 掰出這段來增加內容長度 XD。

在 CodePen 上製作了一個 Demo:

https://codepen.io/letswrite/pen/WNXNWQE

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

改變 iframe src 時不增加瀏覽歷史紀錄 Demo
改變 iframe src 時不增加瀏覽歷史紀錄 Demo

頁面上有二個按鈕,一個是按了會增加 history.legnth 的,另一個則不會,頁面上都可以看到數字有沒有改變。

iframe 的部份直接用 Youtube 的連結,飛鳥和蟬、五十年以後 這二首歌都很好聽,順便推薦給大家~

JS 的部份都用原生,就不會之後要用到其他框架時還得另外改成不同框架的寫法。


解法:直接替換掉 iframe 的 HTML

嗯對,解法就像標題寫的一樣,這麼的樸實無華。

August 的解法是,先在 iframe 外包一個 div,然後當要替換 iframe 時,替換的是 div 中的 HTML。

範例程式碼如下。

HTML

<div id="iframe-wrap">
  <iframe src="https://www.youtube.com/embed/V0XUd8f2pz8"></iframe>
</div>

JS

const iframeWrap = document.getElementById('iframe-wrap');
const iframeSrc = '新的 iframe src';
let newIframe = `<iframe src="${iframeSrc}"></iframe>`;
iframeWrap.innerHTML = newIframe;

這樣做就很像是我們頁面載入時,載入了一個 iframe 一樣,不影響頁面的瀏覽紀錄。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Summary
改變 iframe src 時不增加瀏覽歷史紀錄
Article Name
改變 iframe src 時不增加瀏覽歷史紀錄
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

API

如何用 Mockoon 快速建立 Mock APIs Server

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:上篇 – 前置作業

Front-End

一個簡單的卡片樣式 Simple Card UI

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Vue

用 VuePress 製作說明文件頁面 – 2:config.js 基本設定

Front-End

Netlify + GitLab 建一個免費靜態網站

Vue

Vue CLI 安裝 Tailwind CSS

Front-End

Promise、Async、Await 基本使用筆記

Front-End

製作 RWD email 工具:MJML,如何使用及注意事項

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。