HTML URL 변경 - HTML URL byeongyeong

Question

스크립트로 페이지를 갱신하지 않고 페이지 주소만 변경하는 방법에 대해 알아보자.

목차 Show

▷ 예제1) history.pushState()
▷ 예제2) history.pushState 사용 가능 브라우저 체크

생각외로 url을 이동하지 않은 상태에서 주소창의 url만 변경해야 하는 경우가 생길 수 있다.

▷ 구문

history.pushState(state, title[, url]);

state : 세션 히스토리에 넣을 상태 객체 (잘 모르겠으니 null을 넣어주자.)

title : 브라우저의 제목 (필요 없을 시 null 사용)

url : 변경할 브라우저 URL

예제를 통해 접근해보자.

▷ 예제1) history.pushState()

history.pushState(null, null, 'record')

▷ 결과

실행 전

실행 후

세번째 매개변수에 넣어준 url로 변경된 것을 확인할 수 있다.

사용하기에 앞서 알아둬야할 것은 HTML5에서 적용된 기술로 IE 10 이상에서만 사용가능하다.

어떤 브라우저를 사용하는지 알 수 없다면 history.pushState가 사용가능한지만 체크해주면 된다.

▷ 예제2) history.pushState 사용 가능 브라우저 체크

if (typeof (history.pushState) != "undefined") { 
	history.pushState(state, title, url); 
} else { 
	//브라우저가 지원하지 않는 경우 처리
}

2개의 도메인을 사용하는 경우 주소값(URL)을 이용하여 API 값을 받아와야한다면 보통은 하나의 도메인당 하나의 아이디가 주어진다. 이런 경우 정확한 API 값을 이용하기 위해서 도메인을 하나로 통일해야하는데 티스토리와 같이 PHP나 ,ASP, JSP등의 프로그래밍을 할 수 없는 HTML 환경이라면 아래의 자바스크립트를 이용하는 것도 좋은 방법이라 생각된다.

아래는 http://blog.delfiini.co.kr으로 접속할 경우 https://noeuldays.tistory.com으로 주소가 바뀌는 예제이다.

<script type="text/javascript">
var oldUrl = 'blog.delfiini.co.kr'; // 기본 URL
var changeUrl = 'noeuldays.tistory.com'; // 기본 URL로 사이트 접속 시 변경하고 싶은 URL
var urlString = location.href;
if (urlString.match(oldUrl)){
    window.location.replace(urlString.replace(oldUrl, changeUrl));
}
</script>

__

설명

oldUrl = 1차 도메인(URL) 주소를 적는다.

changeUrl = 1차 도메인을 주소창에 적을 경우 강제로 이동시킬 주소(URL)를 적는다.

__

미리보기

카테고리 : http://blog.delfiini.co.kr/category

포스팅 : http://blog.delfiini.co.kr/entry/jQuery-length와-slideToggle-예제

위의 미리보기와 같이 'http://blog.delfiini.co.kr/category'를 주소창에 적었을 경우 'https://noeuldays.tistory.com/category'로 주소 값이 변경되는 것을 확인할 수 있다.

0. 목표

- html 붙은게 맘에 들지 않아 바꾸고 싶음.

1. 실습

1) 코드 작성

- body 안에 아래 코드 삽입

<script>history.replaceState(null,null,'/replace')</script>

- 완성

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            history.replaceState(null,null,'/replace')
        </script>
        회원가입을 다시 한번 축하합니다!!
    </body>
</html>

2. 결과

3. 한계

- 새로고침할 시 에러 발생(실제의 url이 아님.)

- 마찬가지의 이유로 복사해서 붙여넣었을 때도 에러 발생.

4. 참고

- history api

Home » jQuery 예제 » 링크 URL 변경하기(jQuery)

Last Updated: 2020년 11월 15일 | 댓글 남기기

링크 URL 변경하기

링크 URL을 다른 URL 주소로 변경하는 작업은 매우 간단한 작업으로 .attr 메소드의 사용으로 가능합니다(.attr 메소드에 대한 자세한 내용은 여기 참고).

$(document).ready(function() {
$('.example a').attr('href','http://www.example.com/contat');
});
// 참고: www.ronvangorp.com

응용

<a href="..."> 태그에서 링크를 직접 수정할 수 있는 경우에는 직접 수정하는 것이 가장 간단하겠지만, 간혹 수정할 수 없는 경우가 발생할 수 있습니다. 이 경우에 위의 jQuery 스크립트를 유용하게 사용할 수 있습니다. 예를 들어, 워드프레스 내에서 헤더 부분의 사이트 타이틀을 클릭하면 Site-url, 즉 홈페이지 주소로 이동하게 됩니다. 워드프레스 사이트 제목을 클릭할 때(혹은 로고를 클릭할 때) 외부 URL로 이동하게 만들고 싶은 경우에 활용할 수 있습니다.

$(document).ready(function() {
$('.site-title a').attr('href','https://www.thewordcracker.com/ko/');
});

DIV를 클릭할 때 특정 주소로 이동하도록 링크 설정하기

특정 DIV를 클릭하면 다른 페이지나 URL로 이동하도록 만들고 싶은 경우 window.location을 사용합니다.

$('.book').click(function(){
window.location = 'http://www.example.com/question';
});

그리고 cursor:pointer를 사용(CSS)하여 해당 DIV 위에 마우스를 올렸을 때 커서 모양을 바꾸어 div가 <a href="...">를 사용했을 때와 동일하게 작동하도록 만들 수도 있습니다.

참고:

jQuery를 사용하여 텍스트 변경하기

history.pushstate 사용법 URL 변경 history.pushstate 페이지 이동 JavaScript url 변경 JavaScript URL 고정 Javascript url 체크

HTML URL 변경 - HTML URL byeongyeong

▷ 예제1) history.pushState()

▷ 예제2) history.pushState 사용 가능 브라우저 체크

0. 목표

2. 결과

3. 한계

4. 참고

링크 URL 변경하기

응용

DIV를 클릭할 때 특정 주소로 이동하도록 링크 설정하기

참고:

관련 게시물

광고하는

최근 소식

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의