search

Home  >  Q&A  >  body text

How to avoid HTML iframe causing page refresh

Suppose I have the following code:

<h1><h1>

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

Now, display the page from fileB in `<div class = "content">`.

But in fileB, I have:

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

Normally, when I click `<a>`, the content will go from fileB to fileC, but when I click the browser's refresh button, the div will switch back to fileB. So, how can I keep the page staying on fileC when I click the refresh button.

Thanks:)

I'm hoping someone can show me the code I need to put in and clearly state which JS file is for which HTML file.

P粉799885311P粉799885311526 days ago1135

reply all(1)I'll reply

  • P粉392861047

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

    Maybe like this

    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>

    After the user clicks "Go to file C" in fileB.html, the user will be redirected to fileC.html, and then the user will refresh the page and still stay on the fileC.html page. You can modify it as needed.

    reply
    0
  • Cancelreply