此人尚未填寫簡介。

[小技巧分享] vue.js 動態替換 iframe src,如何解決 browser history 被修改問題

例如有個 component 如下: ``` vue <template> <iframe :src="url.src"></iframe> </template> <script> export default { data() { return { url: { src: 'https://example.com', }, }; }, }; </script> ``` 這時如果 src 網址變動,iframe 內會顯示新的網頁,同時也會造成 browser history 被修改,也就是點擊瀏覽器的上一頁時,會發現整個網頁沒有跳回上一頁,而是 iframe 回復到舊的網址,但如果這不是你想要的效果呢? vue.js 官方文件介紹 key 的時候提到: > It can also be used to force replacement of an element/component instead of reusing it. 所以答案就是在 iframe 加上動態的 key,key 和 src 同時變動時,vue.js 就會強制替換成新的 iframe,跳過 browser history 被修改的問題,點擊瀏覽器的上一頁就能正常回到前一頁了,範例如下: ``` vue <template> <iframe :key="url.key" :src="url.src"></iframe> </template> <script> export default { data() { return { url: { key: 1, src: 'https://example.com', }, }; }, }; </script> ``` P.S. 參考資料中,文章作者提到 react 也是一樣的處理方式。 參考資料: https://vuejs.org/api/built-in-special-attributes.html https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/ https://stackoverflow.com/questions/821359/reload-an-iframe-without-adding-to-the-history#answer-77278956