CODEWITHSUNDEEP
javascriptjqueryback-buttonbrowser-historypushstate
DXC
DXC

Reputation: 37

How do I prevent a browser from storing page state changes using javascript?

Here's my situation:

I built a video lightbox that works great, however, if a user were to click on multiple videos and then click their browser back button they would be stuck clicking back through all of the stored page state changes. This is especially annoying, because the videos begin playing again without actually being visible. I've been digging around and haven't had any luck in finding a straightforward solution to this. Any help is graciously appreciated. Thank you in advance.

$(document).ready(function() {
    $(".pv_thumb").click(function(e) {
        var filePath = $(this).attr("href");
        var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        var match = filePath.match(regExp);
        if (match && match[2].length == 11) {
            $(".pv_contain").addClass("pv_active");
            $("#pv_iframe").attr({
                "src":'https://www.youtube-nocookie.com/embed/' + match[2] + '?autoplay=1&rel=0&showinfo=0'
            });
        } else {
            //error
            alert("error");
        }

        return false;
    });
});

$(document).ready(function(){
    $(".pv_close_btn").click(function() {
        $(".pv_contain").removeClass("pv_active");
        $("#pv_iframe").attr({"src":''});
    });

    $(".pv_contain").click(function() {
        $(".pv_contain").removeClass("pv_active");
        $("#pv_iframe").attr({"src":''});
    });

    $(document).on('keyup',function(evt) {
        if (evt.keyCode == 27) {
            $(".pv_active").removeClass("pv_active");
            $("#pv_iframe").attr({"src":''});
        }
    });
});

Here is a link to a CodePen that emulates the same issue. After clicking on each of the videos, clicking your browser back button should result in what was previously described.

View CodePen

Upvotes: 2

Views: 416

Answers (1)

Chris Dolphin
Chris Dolphin

Reputation: 1598

Solution:

Use iframe.contentWindow.location.replace instead of updating the iframe src attribute.

After looking through your CodePen I think I found the issue. Couldn't test though since the Pen is private.

My first thought was to try messing with pushState and replaceState to force the history to stay the same every click of .pv_thumb. This might work, but honestly, the real issue is that the history state changes at all.

That led me to realize you have hrefs on all the anchor tags around each thumbnail. This should be the cause of the issue. Every click of those links makes the browser wanna change urls to the https://youtu.be/ url the anchor is linking to.

A couple of solutions for this.

  • Remove the href from each anchor tag. Obviously you need that string to get the youtube video id, so store that string elsewhere. If you can, keep it in JS somewhere and use the index of the anchor to get the right video url for the right thumb. If you can't use JS, use a data- attribute and get the url string off the element that way. Much like you're doing now with the href. (Keep in mind removing the href will prevent the cursor from changing to the pointer like you'd expect from links. You can just use cursor:pointer in CSS to solve this).
  • If you wanna keep the href: In your .pv_thumb click handler use preventDefault on the event, and that should stop the browser from trying to change urls. Looking at your code, it would just be e.preventDefault(), right at the top of that handler.

Hope this is what you're looking for.

Upvotes: 1

Related Questions