JQuery - 화면에 따른 Html 열기

■ 화면에 따른 Html 열기

○ JS로 만들어서 Index(모바일, PC)에 링크

function winSizeHtml(){
    let winw = $(window).width();
    if(winw <= 768){
        window.location.replace("a-1.html"); //768보다 작을때 화면
    }
    else{
        window.location.replace("a-2.html"); //아닐때 화면
    }
}

// 처음 화면이면 사이즈 확인 후 열 파일 선택
if(window.location.pathname == "/a.html"){ //처음 화면의 html
    $(document).ready(function(){
        winSizeHtml();                   
    });
}


let retime;
$(window).resize(function(){
    if(retime){ //retime에 값이 있으면 clearTimeout(retime) 멈춰라  
        clearTimeout(retime); //안그러면 사이즈가 계속 변화될때 마다. setTimeout 실행
    }
    retime = setTimeout(function(){
        winSizeHtml();
    },1000);   
    //retime = setTimeout(winSizeHtml,1000); 또는
});

 

■ 기존 요소에서 요소 내부 요소 변경

○  기존 콘텐츠에 덮어 쓰기

$('#contentBox').load('content2.html');

 

○  뒤에 추가 하기

$('#changeContentBtn').click(function() {
    $('#contentBox').append('<p>이것은 새로 추가된 콘텐츠입니다!</p>');
});

 

○  앞에 추가하기

$('#changeContentBtn').click(function() {
    $('#contentBox').prepend('<p>이것은 기존 콘텐츠 앞에 추가된 콘텐츠입니다!</p>');
});

 

○ 콘텐츠 교체

var originalContent = $('#contentBox').html();  // 기존 콘텐츠 저장

$('#changeContentBtn').click(function() {
    $('#contentBox').load('content2.html');  // 새 콘텐츠로 대체
});

// 이전 콘텐츠 복원
$('#restoreContentBtn').click(function() {
    $('#contentBox').html(originalContent);  // 저장한 기존 콘텐츠로 복원
});

 

○ 외부 HTML 추가하기

- $.get() 메서드: 외부 HTML 파일(external-content.html)을 비동기적으로 불러옵니다.

- append() 메서드: 불러온 데이터를 #contentBox 요소에 추가합니다.

- data: 불러온 HTML 파일의 내용을 포함하는 변수로, 이를 #contentBox에 삽입합니다.

$('#changeContentBtn').click(function() {
    // 외부 HTML 파일 불러오기
    $.get('external-content.html', function(data) {
        // #contentBox에 불러온 HTML 파일의 내용을 추가
        $('#contentBox').append(data);
});

 

 

○ Css 추가 형태

$(function(){
    $.get("a-1.html", function(data){
        $("body").prepend(data);
        $("head").append('<link rel="stylesheet" href="a.css">');
    });
});