HTML에서 올바른 URL 속성 값 가져오기

HTML에서 공통 URL은 다양한 방식으로 표현됩니다.

상대 URL:

example.php
데모/example.php
./example.php
../../example.php
/example.php

절대 URL:

http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php

동시에 HTML에는 URL인 요소 속성 값이 많이 있습니다. 일반적으로 JavaScript를 사용하여 이러한 URL 속성 값을 얻는 방법에는 두 가지가 있습니다.

<a href="example.php" id="example-a">현재 페이지의 절대 URL은 http://dancewithnet.com/</a>입니다.
<스크립트>
var oA = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>

우리는 속성에 직접 접근하여 완전한 절대 URL을 얻고, getAttribute 메소드를 통해 원래 속성 값을 얻기를 희망합니다. 사실 이는 모든 A급 브라우저 중에서는 Firefox만이 성공적으로 얻을 수 있는 결과입니다. IE8과 마찬가지로 다른 브라우저에도 다소 특별한 경우가 있습니다. 어떤 요소가 존재하는지 구체적인 속성을 보려면 데모 예제를 참조하세요.

대부분의 브라우저에서 문제는 두 방법 모두 원래 속성 값 을 반환한다는 것입니다. 그러나 실제 응용 프로그램에서는 종종 절대 URL이 필요합니다. 브라우저 코드의 차이점을 고려하지 않으면 매우 간단합니다.

<form action="example.php" id="example-form">
이때 페이지의 절대 URL은 http://dancewithnet.com/</form>입니다.
<스크립트>
var oForm = document.getElementById('example-form');

//IE6, IE7, 사파리, 크롬, 오페라
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';

//절대 URL을 얻기 위한 일반적인 솔루션
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';

getQualifyURL = 함수(oEl,sAttr){
var sUrl = oEl[sAttr],
OD,
bDo = 거짓;
//IE8 이전 버전인지 여부
//http://www.thespanner.co.uk/2009/01/29/Detecting-browsers-javascript-hacks/
//http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx
/*@cc_on
노력하다{
bDo = @_jscript_version < 5.8 ?true : @false;
}잡기(e){
bDo = 거짓;
}
@*/
//Safari, Chrome, Opera인 경우
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^함수 (/.test([].sort)){
bDo = 참;
}
if(bDo){
oD = document.createElement('div');
/*
//DOM 연산 결과는 변경되지 않습니다.
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.firstChild.href;
}
반환 sUrl;
}
</script>

두 가지 선사 시대 브라우저 IE6 및 IE7에 대해 더 흥미로운 점이 있습니다. HTML 요소 A, AREA 및 IMG에서 얻은 속성 값은 모두 절대 URL입니다. 다행히 Microsoft는 getAttribute에 대한 두 번째 매개 변수를 제공합니다. 문제는 해결될 수 있으며 동시에 위에서 언급한 두 가지 방법이 원래 속성을 반환하는 문제도 IFEAM 및 LINK 요소에 대해 해결될 수 있습니다.

원문: http://dancewithnet.com/2009/07/27/get-right-url-from-html/

<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">현재 페이지의 절대 URL은 http://dancewithnet.com/</a>입니다.

<스크립트>
var oA = document.getElementById('example-a'),
oLink = document.getElementById('example-a');

oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'example.php';

oLink.href == 'example.php';
oLink.getAttribute('href') == 'example.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>