COMING SOON 🚀

채택완료

javascript location.href 질문

Copy
const videos = document.querySelectorAll("video");

const mainVideo = document.querySelector(".main-flex__video")

 

videos.forEach(function(video){

    video.addEventListener("mouseover", showControls);

    video.addEventListener("mouseout", removeControls);

    video.addEventListener("click", redirect);

//이부분이요ㅠㅠ

    function redirect(event){

        event.preventDefault();

        window.location.href = "./play.html";

        const addVideo = this.parentNode.querySelector("video");

        mainVideo.append(addVideo);

    }

    

    function showControls(event){

        event.preventDefault();

        video.controls = true;

        video.muted = true;

        video.play();       

    }

    

    function removeControls(event){

        event.preventDefault();

        video.controls = false;

        video.pause();

    }

})

이렇게 코드를 짜봤는데 location.href 때문인지 비디오가 추가는 되는데

페이지가 새로고침 되면서 비디오가 없던 상태로 돌아가더라고요,,

callback 함수도 추가해봤는데 자꾸 에러만 뜨고,,, 어떻게 해결할 수 있을까요??

 

|

답변 4개 / 댓글 1개

채택된 답변
+20 포인트

클라이언트단에서 동작하는 자바스크립트의 이벤트는 페이지가 이동되면 새로 이동된 페이지의 스크립트를 실행하며 페이지 이동 이벤트가 일어나면 페이지가 이동 하기 전 스크립트가 페이지 이동후의 스크립트에 관여할 수 없습니다.

유튜브나 트위치 등 페이지 이동에도 보존해야할 엘리먼트들이 있는 사이트들의 경우 SPA의 개념을 활용하고 있고, 만약 MPA형태로 비슷한 형태를 구축하시려면 아이프레임을 활용하거나 별도의 쿼리값이나 포스트로 구분하여 받는 페이지에서도 별도의 실행구문을 작성해주셔야 합니다.

play.html에 이동 한 후 비디오를 추가하고 마우스를 갖다댈시 비디오가 실행되고 마우스를 뺄시 

동영상을 멈추는거 같은데 저 js에 한번에 다 하지말고 

이동시키는거 따로 // 이동 완료하고 비디오 작동하는 js 따로 해야 할것 같은데요? 

href 는 이동하는 구분 아닌가요??
inserHTML 이나 jquery prop 를 이용해서... 값을 넣어야 할 것 같습니다.

원하는 의도가 뭔가요? 만든 목적이 뭔진 모르겠음

답변에 대한 댓글 1개

유튜브 같은데 처럼 동영상 클릭하면 화면 전환되면서 메인 화면에 클릭한 동영상이 나오게 하려고 해봤습니다!

답변을 작성하려면 로그인이 필요합니다.