Warum klappt die Browser Navigation "Zurück" nicht?

Guten Abend,

ich habe auf einer Wordpress Seite ein Video eingebunden. Wenn ich im Browser zurück klicke, geht er nicht wie gewollt auf die Startseite zurück, sondern macht nur das Laden des Video rückgängig. Wie kann ich das ändern? Ich möchte erreichen, dass man über Browser Navigation zurück wieder zur Startseite gelangt.

Vielen Dank
Moritz

1 Antwort

OTZEKaka

27.09.2024, 22:30

Moin,

das Problem tritt oft auf, wenn Videos über einen eingebetteten Player wie YouTube oder Vimeo eingebunden werden. Das liegt daran, dass die Aktionen des Videoplayers (z. B. Play, Pause, Spulen) die History des Browsers beeinflussen. Wenn du den "Zurück"-Button im Browser klickst, wird dann zunächst nur die letzte Aktion im Player rückgängig gemacht.

Um sicherzustellen, dass der Browser beim Klick auf "Zurück" zur vorherigen Seite (in deinem Fall die Startseite) geht, kannst du Folgendes ausprobieren:

Verwende den "Allow=fullscreen"-Parameter im iframe: Wenn du YouTube- oder Vimeo-Videos per iframe einbindest, achte darauf, dass

allow="fullscreen"

im iframe-Tag enthalten ist. Dies kann helfen, einige Konflikte mit der Browser-History zu vermeiden.

Setze den Videoplayer in eine eigene Seite: Alternativ kannst du das Video auf eine eigene Unterseite verlinken, anstatt es direkt auf der Seite zu haben. So hat das Video keine Auswirkungen auf die Browser-History der Hauptseite.

Verwende JavaScript: Falls du technisch etwas tiefer gehen möchtest, kannst du mit JavaScript die Browser-History manuell steuern. Mit

history.pushState()

kannst du dafür sorgen, dass ein Klick auf "Zurück" nicht das Video beeinflusst, sondern wirklich zur letzten Seite zurückführt.

Das Skript verhindert, dass der Browser das Video in der History speichert, und führt den Nutzer stattdessen auf die vorherige Seite zurück.

window.history.pushState(null, null, window.location.href); window.onpopstate = function() { window.history.go(-2); // Springt zwei Seiten zurück };

Woher ich das weiß:eigene Erfahrung

Ähnliche Beiträge

Wordpress Navigation ausblenden?

Servus!

Wie blende ich dieses "Startseite >> Termine/Veranstaltungen" über dem Seitentitel aus? Nutze WordPress.

...zum Beitrag

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

...zum Beitrag

Wordpress Timer zurück zu Startseite?

Hi ich suche eine Möglichkeit mit der ich einstellen kann, das ein Nutzer nach einer gewissen Zeit von Inaktivität zurück auf die Hauptseite kommt. Gibt es da eine Möglichkeit? Danke! :-)

...zum Beitrag

WordPress Elementor – wie kann ich den Seitennamen entfernen?

Hallo,

ich bin gerade dabei eine Website zu erstellen. Da ich dies zum ersten Mal mache nutze ich den Elementor Page Builder für WordPress.

Die Startseite ist soweit erstellt und ich bin auch zufrieden. Leider wird über dem Cover / unter der Navigation der Name der Seite angezeigt – und ich kann diesen nicht entfernen bzw. im Page Builder bearbeiten.

Im Bild 1 könnt ihr sehen was ich meine. Habt ihr eine Ahnung, wie man den Namen entfernen kann?

Wenn ich bei WordPress direkt auf den Seitennamen klicke, wird mir diese Oberfläche angezeigt (Bild 2). Entferne ich nun den Namen "Home V2" wird dieser durch Elementor #XXXX* (eine Zahl) ersetzt. Verschwinden tut der dicke Balken mit dem Seitennamen aber leider auch nicht.

Ich hoffe ihr versteht was ich meine.

Vielen Dank!

Bild 1

---

Bild 2

...zum Beitrag

Wieso wird CSS nicht übernommen?

Ich habe gerade ein Problem, das soo frustrierend ist. Ich bin HTML & CSS Anfänger und wollte eine Webseite aus einem Tutorial Video nachbauen. Die Inhalte und Struktur im HTML habe ich hinbekommen. Nun scheitere ich aber am CSS. (Browser Chrome) Für mich sieht alles richtig aus. CSS ist eigentlich eingebunden, aber die Eigenschaften werden nicht übernommen. Ich habe schon etliche Seiten durchforstet und keine Lösung hat funktioniert. (Cache leeren brachte nichts, Bei den anderen Browsern Firefox, Explorer und Safari besteht das gleiche Problem( ich habe auch keine Schusselfehler entdeckt). Die beiden Dateien liegen auch im selben Ordner. Liegt es vielleicht an meinem Laptop oder an den Browsern? Ich bin ratlos. Ich hoffe jemand kann mir irgendwie helfen.

Ich habe screenshots von der HTML-Datei und CSS-Datei beigefügt.

...zum Beitrag

Website: Logo und Navigation auf einer Ebene?

Mit welchem Code ist das möglich? Ich bekomme es irgendwie nicht hin

...zum Beitrag

MSN Deutschland deaktivieren?

Mein Browser ist Microsoft Edge. Immer wenn ich seit neustem auf "Startseite" klicke, öffnet sich MSN Deutschland, und es dauert immer ewig bis die Seite geladen hat. Und oft muss ich noch einmal irgendwelche Cookies o.Ä. bestätigen.

Wie kann ich das deaktivieren und als Startseite eine normale Startseite einrichten, und nicht dieses MSN Deutschland.

PS: Ich wechsle meinen Browser nicht.

...zum Beitrag

Wordpress 3.5.1 Besucherzähler im Frontend?

Für meine Chefin betreue ich mehr schlecht als recht eine Seite im Wordpress 3.5.1 Nun möchte sie partout einen Besuchszähler auf der Startseite haben, um zu sehen wieviele Besucher seit ihrer letzten "Kontrolle" drauf waren. Ich habe jetzt bei den Plugins gesucht aber nichts gefunden :-( Wo kann ich einen solchen Besucherzähler oder Counter den jedermann beim Besuchen der Seite sehen kann, bekommen und wie kriege ich den in die Seite http://www.andrea-kleinert.de unten links eingebunden?

...zum Beitrag

Gibt es ein Wordpress Plugin die für eine direkte Weiterleitung zu der Amazon App sorgt?

Gibt es ein WordPress Plugin die für eine direkte Weiterleitung zu der Amazon App sorgt? In der Regel klickt man auf den Link mit der ID die man sich im Amazon Partnerprogramm erstellt hat und gelangt somit auf das Produkt im Browser allerdings möchte ich, dass die Besucher nicht auf den Browser kommen, sondern auf die Amazon App.

...zum Beitrag

Vorschaubild auf Website vor Video schalten

Ich habe auf meiner Website ein Vimeo-Video eingebunden. Ist es möglich (und wenn ja, wie), dort ein Bild vorab einzubinden, so dass das Video erst bei Klick startet?

...zum Beitrag

Wie kann man Youtube Videos als Lesezeichen speichern (Safari od. anderer Browser) bei einer bestimmten STELLE in dem Video?

Ich will dann quasi auf das Lesezeichen im Browser klicken und der geht auf die Youtube Video Seite und das Video startet sofort bei Minute 2:37 zB

geht das iwie? Im Safari? Oder in einem anderen Browser?

Oder in Youtube selbst?

...zum Beitrag

HTML: index.html eines Unterordners erreichen?

Ich will von meiner Startseite aus auf einen Unterordner in dem sich wieder eine index.html befindet verlinken. Dies würde ja mit folgendem gehen:

Link

Jetzt will ich aber nicht das in der Adresszeile im Browser folgendes steht:

"domain.com/unterordner/index.html"

sondern:

"domain.com/unterordner/"

geht das mit HTML alleine und wenn ja wie?

...zum Beitrag

2 Richtfunk Antennen verbinden?

Wie verbinde ich 2 Richtfunkantennen (Ubiquiti airFiber 60 LR) miteinander? Ich muss auch die Startseite des Gerätes über die IP Adresse im Browser erreichen können.

...zum Beitrag

Tiktok Lautstärke?

Ich benutze TikTok auf dem Browser auf dem IPad und wenn auf das Video klicke muss ich bei jedem Video auf den Lautstärke Button klicke was echt stört warum auf dem Browser leihipad der Schule. Bitte nur antworten die weiterhelfen.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen