>웹 프론트엔드 >JS 튜토리얼 >js_javascript 스킬로 현재 페이지의 URL 정보를 정확하게 얻는 방법

js_javascript 스킬로 현재 페이지의 URL 정보를 정확하게 얻는 방법

WBOY
WBOY원래의
2016-05-16 15:05:062127검색

WEB 개발 시 현재 페이지의 URL 정보를 얻기 위해 javascript를 사용하는 경우가 많습니다.

URL의 예를 들어 다양한 구성요소를 살펴보겠습니다. http://i.cnblogs.com/EditPosts.aspx?opt=1

1. window.location.href(전체 URL을 문자열로 설정 또는 가져오기)

var 테스트 = window.location.href;
경고(테스트);
돌아가기: http://i.cnblogs.com/EditPosts.aspx?opt=1

2. window.location.protocol(URL의 프로토콜 부분 설정 또는 가져오기)

var 테스트 = window.location.protocol;
경고(테스트);
반환: http:

3. window.location.host(URL의 호스트 부분을 설정하거나 가져옵니다)

var 테스트 = window.location.host;
경고(테스트);
돌아가기: i.cnblogs.com

4. window.location.port(URL과 연결된 포트 번호 설정 또는 가져오기)

var 테스트 = window.location.port;
경고(테스트);
반환: null 문자(기본 포트 80을 사용하는 경우(업데이트: :80을 추가해도) 반환 값은 기본 80이 아닌 null 문자임)

5. window.location.pathname(URL의 경로 부분(즉, 파일 주소)을 설정하거나 가져옵니다.)
var test = window.location.pathname;
경고(테스트);
반환: /EditPosts.aspx

6. window.location.search(href 속성에서 물음표 뒤에 오는 부분을 설정하거나 가져옵니다)

var 테스트 = window.location.search;
경고(테스트);
반환:?opt=1

PS: 쿼리(매개변수) 부분을 얻으려면 동적 언어에 값을 할당하는 것 외에도 정적 페이지를 할당하고 자바스크립트를 사용하여 해당 매개변수 값을 얻을 수도 있습니다.

7. window.location.hash(href 속성에서 파운드 기호 "#" 뒤의 세그먼트를 설정하거나 가져옵니다)

var 테스트 = window.location.hash;
경고(테스트);
반환: 빈 문자(URL에 아무것도 없기 때문)

8.js는 URL에서 매개변수 값을 가져옵니다

1. 규칙성 방법

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// 这样调用:
alert(GetQueryString("参数名1"));
 
alert(GetQueryString("参数名2"));
 
alert(GetQueryString("参数名3"));

2. 분할 방법

function GetRequest() {
  var url = location.search; //获取url中"?"符后的字串
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
var Request = new Object();
Request = GetRequest();<br>// var id=Request["id"]; 
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];

3. 픽업 지정

예를 들어 URL이 http://i.cnblogs.com/?j=js인 경우 매개변수 j의 값을 얻으려면 다음 함수를 통해 호출할 수 있습니다.

function GetQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); //获取url中"&#63;"符后的字符串并正则匹配
  var context = ""; 
  if (r != null) 
     context = r[2]; 
  reg = null; 
  r = null; 
  return context == null || context == "" || context == "undefined" &#63; "" : context; 
}
alert(GetQueryString("j"));

4. 단일 매개변수를 얻는 방법

function GetRequest() {
  var url = location.search; //获取url中"&#63;"符后的字串
  if (url.indexOf("&#63;") != -1) {  //判断是否有参数
   var str = url.substr(1); //从第一个字符开始 因为第0个是&#63;号 获取所有除问号的所有符串
   strs = str.split("=");  //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
   alert(strs[1]);     //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
  }
}

위 내용은 이 글의 전체 내용입니다. 현재 페이지의 URL 정보를 얻는 방법을 이해하는 데 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.