搜尋

首頁  >  問答  >  主體

如何避免HTML iframe導致頁面刷新

假設我有下面這段程式碼:

<h1><h1>

    <div class = "content"> // 这个iframe不占用整个页面
       <iframe src = "/fileB.html"></iframe>
    </div>

現在,在`<div class = "content">`中顯示來自fileB的頁面。

但是在fileB中,我有:

<a href = 'fileC.html'></a>

通常情況下,當我點擊`<a>`時,內容將從fileB轉到fileC,但是當我點擊瀏覽器的刷新按鈕後,div會切換回fileB。所以,我該如何在點擊刷新按鈕時保持頁面停留在fileC。

謝謝:)

我希望有人能給我展示我需要放置的程式碼,並清楚地說明哪個JS檔案用於哪個HTML檔案。

P粉799885311P粉799885311442 天前1034

全部回覆(1)我來回復

  • P粉392861047

    P粉3928610472023-09-16 13:54:53

    也許像這樣

    fileB.html

    <!DOCTYPE html>
    <html>
    <head>
      <title>文件B</title>
    </head>
    <body>
      <h1>文件B</h1>
      <div class="content">
        <a href="fileC.html?source=fileB">前往文件C</a>
      </div>
    
      <script>
        // 检查localStorage中是否存储了sourcePage的值
        const sourcePage = localStorage.getItem('sourcePage');
        if (sourcePage && sourcePage === 'fileB') {
          // 重定向到fileC.html
          window.location.href = 'fileC.html';
        }
      </script>
    </body>
    </html>

    fileC.html

    <!DOCTYPE html>
    <html>
    <head>
      <title>文件C</title>
    </head>
    <body>
      <h1>文件C</h1>
      <div class="content">
        <p>这是文件C。</p>
      </div>
    
      <script>
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const sourcePage = urlParams.get('source');
    
        // 将sourcePage的值存储在localStorage中
        localStorage.setItem('sourcePage', sourcePage);
      </script>
    </body>
    </html>

    使用者在fileB.html中點擊「前往檔案C」後,使用者將被重定向到fileC.html,然後使用者刷新頁面仍停留在fileC.html頁面,您可以根據需要進行修改。

    回覆
    0
  • 取消回覆