简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
So vermeiden Sie, dass HTML-Iframe eine Seitenaktualisierung verursacht
P粉799885311
P粉799885311 2023-09-15 22:35:01
0
1
971

Angenommen, ich habe den folgenden Code: 

<h1><h1>

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

Jetzt zeigen Sie die Seite aus DateiB in „<div class = „content“>“ an.

Aber in DateiB habe ich: 

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

Wenn ich auf „<a>“ klicke, wechselt der Inhalt normalerweise von DateiB zu DateiC, aber nachdem ich auf die Aktualisierungsschaltfläche des Browsers geklickt habe, wechselt das Div zurück zu DateiB. Wie kann ich also dafür sorgen, dass die Seite in Datei C bleibt, wenn ich auf die Schaltfläche „Aktualisieren“ klicke?

Danke :)

Ich wünschte, jemand könnte mir den Code zeigen, den ich einfügen muss, und klar angeben, welche JS-Datei für welche HTML-Datei gilt.

P粉799885311
P粉799885311

Antworte allen(1)
P粉392861047
P粉3928610472023-09-16 13:54:53 1 Etage

也许像这样

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！