javascript location.href 질문

javascript location.href 질문

QA

javascript location.href 질문

본문


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

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

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

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

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

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,125 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT