本篇要解決的問題
這幾天在幫一個頁面寫一個功能，就是按下按鈕，會改變頁面上 iframe 的 src，結果過了幾天，有使用者回饋說頁面按了回上一頁沒反應。
嗯？為什麼回上一頁會沒反應？後來實測後發現，是每換一次 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
頁面上有二個按鈕，一個是按了會增加 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 一樣，不影響頁面的瀏覽紀錄。
