JavaScript는 상대 주소를 절대 주소로 변환합니다. 샘플 code_javascript 팁

WBOY
풀어 주다: 2016-05-16 17:28:25
원래의
1570명이 탐색했습니다.

LABjs 소스 코드를 보다가 상대 주소를 절대 주소로 변환하는 함수를 발견했는데,

코드 복사 코드는 다음과 같습니다.

function canonical_uri(src, base_path)
{
var root_page = /^[^?#]*//. exec(location .href)[0],
root_domain = /^w :///?[^/] /.exec(root_page)[0],
absolute_regex = /^w :///;

// `src`는 프로토콜에 상대적입니다(/ 또는 ///로 시작). 프로토콜 앞에 추가하세요
if (/^///?/.test(src))
{
src = location.protocol src;
}
//는 `src` 페이지에 상대적입니까?(/로 시작하는 절대 URL 및 도메인 상대 경로가 아님)
else if (!absolute_regex.test(src) && src.charAt(0) != "/")
{
// `base_path` 앞에 추가(있는 경우)
src = (base_path || "") src;
}

// `src`를 절대값으로 반환해야 합니다.
return 절대_regex.test(src) ? src : ((src.charAt(0) == "/" ? root_domain : root_page ) src)
}

현재 페이지 주소가 http://www.inspurstb.com/hzt/index.html
이면 canonical_uri("scy .js") http://www.inspurstb.com/hzt/scy.js로 돌아가기

Javascript를 사용하여 상대 경로 주소를 절대 경로로 변환

1) 이미지 사용, 테스트 후 중단된 요청이 전송되며 IE6에서는 이를 지원하지 않습니다. document.createElement_x_x_x('IMG') 테스트에서는 이 솔루션이 마음에 들지 않을 수 있습니다.
코드 복사 코드는 다음과 같습니다.
function getAbsoluteUrl(url){
var img = new Image();
img.src = url; // 상대 경로를 Image로 설정하면 요청이 전송됩니다.
url = img.src; 절대 경로
img.src = null; // 요청 취소
return url;
}
getAbsoluteUrl("showroom/list")

2) 앵커(링크), 요청이 발생하지 않으며 DOM에 가입할 때만 요청이 생성되지만 IE6은

function getAbsoluteUrl(url ){
var a = document.createElement_x_x_x('A')
a.href = url; 이미지에 대한 상대 경로이며 요청이 전송됩니다.
url = a.href; / / 이 시점에서 상대 경로는 절대 경로가 되었습니다.
return url;
getAbsoluteUrl(" showroom/list");


3) JavaScript 사용: 구현하는 것이 더 복잡합니다. 예는 다음과 같습니다: https://gist.github.com/1088850
In 결국 옵션 2가 사용됩니다.

이것은 변수이며 모든 이미지는 원래 방법인 Anchor를 사용하여 액세스되며 모든 절대 경로를 반환하려면 원래 상대 경로를 사용하면 됩니다. jQuery의 .attr() 메소드와 같은 DOM 쿼리 메소드:

console.log($anchor[ 0]["href"]); // jQuery 객체는 본질적으로 배열입니다. 하나만 있는 경우 [0]을 사용하여 원본 개체에 액세스한 다음 "href"를 사용합니다.
console .log($anchor.attr("href")) //원래 경로로 돌아갑니다. 🎜>
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿