iframe在更改了src之後，不出現後退或者前進按鈕怎麼解決？

王铁柱6發表於2024-12-03

更改iframe的src後，瀏覽器歷史記錄不會更新，因此不會出現後退或前進按鈕。這是因為src的改變被視為同一文件內的導航，而不是頁面跳轉。 要解決這個問題，需要讓瀏覽器將iframe的src更改視為一次新的導航。

以下幾種方法可以嘗試：

  1. 使用window.location.href或window.location.replace()改變頂層視窗的URL: 這是最簡單直接的方法。將iframe的src作為引數新增到頂層視窗的URL中，每次更改iframe的src時，都更新頂層視窗的URL。這樣瀏覽器就會記錄每一次URL的變化，從而可以使用前進和後退按鈕。

    // 例如：
const iframe = document.getElementById('myIframe');
const newSrc = 'https://www.example.com';

window.location.href = `?iframeSrc=${encodeURIComponent(newSrc)}`;

// 在頁面載入時，根據URL引數設定iframe的src
window.onload = function() {
    const urlParams = new URLSearchParams(window.location.search);
    const iframeSrc = urlParams.get('iframeSrc');
    if (iframeSrc) {
        iframe.src = decodeURIComponent(iframeSrc);
    }
};

    或者使用replace()方法避免增加歷史記錄長度：

    window.location.replace(`?iframeSrc=${encodeURIComponent(newSrc)}`);

  2. 使用HTML5的History API: pushState()和replaceState()方法允許你修改瀏覽器歷史記錄，而無需重新載入頁面。

    const iframe = document.getElementById('myIframe');
const newSrc = 'https://www.example.com';

window.history.pushState({iframeSrc: newSrc}, '', `?iframeSrc=${encodeURIComponent(newSrc)}`);

// 監聽popstate事件，處理後退和前進
window.addEventListener('popstate', (event) => {
    if (event.state && event.state.iframeSrc) {
        iframe.src = event.state.iframeSrc;
    }
});

// 頁面載入時，根據當前狀態設定iframe的src
window.onload = function() {
    if (window.history.state && window.history.state.iframeSrc) {
        iframe.src = window.history.state.iframeSrc;
    }
}

  3. 使用錨點(#)來模擬導航: 雖然不如History API優雅，但也是一種可行的方法。透過改變URL的錨點值，可以觸發瀏覽器歷史記錄的更新。

    const iframe = document.getElementById('myIframe');
const newSrc = 'https://www.example.com';

window.location.hash = `iframeSrc=${encodeURIComponent(newSrc)}`;

// 在頁面載入時，根據hash值設定iframe的src
window.onload = function() {
    const hash = window.location.hash;
    if (hash) {
        const iframeSrc = hash.substring(hash.indexOf('=') + 1);
        iframe.src = decodeURIComponent(iframeSrc);
    }
};

選擇哪種方法取決於你的具體需求和專案複雜度。History API 提供了更細粒度的控制和更好的使用者體驗，但稍微複雜一些。 如果只是簡單的應用，使用window.location.href或錨點方法就足夠了。 記住要對URL引數進行編碼 (例如使用encodeURIComponent) 和解碼 (例如使用decodeURIComponent)，以處理特殊字元。

相關文章