如何避免HTML iframe导致页面刷新
P粉799885311
P粉799885311 2023-09-15 22:35:01
0
1
972

假设我有下面这段代码:

<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粉799885311
P粉799885311

全部回复(1)
P粉392861047

也许像这样

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页面,您可以根据需要进行修改。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!