搜索

首页  >  问答  >  正文

如何避免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粉799885311588 天前1190

全部回复(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
  • 取消回复