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

改變 iframe src 時不增加瀏覽歷史紀錄
改變 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
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言