html <base> 태그에 대한 권장 사항은 무엇입니까?


462

이전에 <base>HTML 태그가 실제로 사용 된 적이 없습니다 . 그것을 피해야 함을 의미하는 함정이 있습니까?

현대 프로덕션 사이트 (또는 모든 사이트)에서 사용중인 것을 결코 알지 못했기 때문에 내 사이트의 링크를 단순화하는 데 유용한 응용 프로그램이있는 것 같습니다.


편집하다

몇 주 동안 기본 태그를 사용한 후 기본 태그를 사용하여 처음 나타나는 것보다 훨씬 덜 바람직하게 만드는 몇 가지 주요 문제점을 발견 했습니다. 기본 태그 href='#topic'와 그 href=''아래 의 변경 사항 은 기본 동작과 매우 호환되지 않으며 기본 동작과의 변경으로 인해 컨트롤 외부의 타사 라이브러리를 쉽게 신뢰할 수 없게 만들 수 있습니다. 예상치 못한 방법으로, 그들은 논리적으로 기본 동작에 따라 달라질 수 있기 때문이다. 종종 변경 사항이 미묘하여 큰 코드베이스를 처리 할 때 즉각적으로 명백하지 않은 문제가 발생합니다. 이후에 아래에서 경험 한 문제를 자세히 설명하는 답변을 만들었습니다. 의 광범위한 배포에 전념하기 전에 링크 결과를 직접 테스트 <base>해보십시오. 새로운 조언입니다.


12
캐시 된 버전의 검색 엔진 결과에서 종종 링크 작동을 유지하는 데 사용됩니다.
Gumbo

11
참고 사항 : 기본 태그는 간단한 앵커와 상호 작용하므로 기본을 사용하는 경우 이전에 페이지의 위치에 대한 앵커만 <a href='#anchor1'>Anchor1</a>이 기본 태그를 사용하여 현재 페이지를 참조하는 기본 동작을 재정의합니다 베이스. 그래서 그것은 반드시 조심해야 할 것입니다 (그러나 많은 앵커를 사용하는 페이지에서 다른 기본 태그를 사용하여 해결할 수는 있지만).
Kzqai

1
수락 된 답변이 마음에 들지 않으면 수락하지 않고 다시 할당하지 않겠습니까?
Pops

1
그것이 옵션이라는 것을 알지 못했지만, 그렇습니다. (창의적 인 점을 제시한다면) 창녀를 원치 않지만 최종 분석에서 단점은 장점보다 중요하며 그것을 강조하고 싶습니다.
Kzqai

2
일반적으로 모든 주요 사이트의 소스 코드를 보지 않습니다. 생각보다 많은 사람들이 사용하고 <base>있다고 생각합니다.
Mathias Lykkegaard Lorenzen 2016

답변:


259

<base>태그 를 사용할지 여부를 결정하기 전에 태그의 작동 방식, 사용 가능한 내용 및 그 의미를 이해하고 최종적으로 장점 / 단점을 능가해야합니다.


<base>태그는 주로 당신이 현재 컨텍스트에 대해 걱정할 필요가 없기 때문에 언어를하는 주형의 상대 링크 생성 완화 모든 링크를.

예를 들어 할 수 있습니다

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

대신에

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

있습니다 <base href>슬래시 값의 끝, 그렇지 않으면 마지막 경로에 상대적으로 해석됩니다.


브라우저 호환성에 관해서는 IE에서만 문제가 발생합니다. <base>HTML뿐만 지정된 태그는 없습니다 종료 태그를 가진 </base>그냥 사용에 합법적 그래서, <base>종료 태그없이. 그러나 IE6는 달리 생각하고 전체 내용 <base> 태그로 배치 이러한 경우에 아이<base> 은 HTML DOM 트리에서 요소의 . 이로 인해 Javascript / jQuery / CSS에서 설명 할 수없는 문제가 발생할 수 있습니다. 즉 html>body, HTML DOM 검사기 에서 사이에 base(및 head) 가 있어야한다는 것을 알 때까지는 특정 선택기에서 요소에 완전히 도달 할 수 없습니다 .

일반적인 IE6 수정은 IE 조건부 주석을 사용하여 종료 태그를 포함합니다.

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

W3 Validator에 신경 쓰지 않거나 이미 HTML5를 사용하는 경우 자체 닫을 수 있습니다. 모든 웹 브라우저는 어쨌든 지원합니다.

<base href="http://example.com/en/" />

<base>태그를 닫으면 WinXP SP3에서 IE6 의 광기 가 즉시 수정되어 무한 루프로 <script>상대 URI가 src있는 리소스 를 요청 합니다 .

<base>태그에 상대 URI ( 예 : <base href="https://stackoverflow.com//example.com/somefolder/">또는) 를 사용하면 또 다른 잠재적 인 IE 문제가 나타납니다 <base href="https://stackoverflow.com/somefolder/">. 이것은 IE6 / 7 / 8에서 실패합니다. 그러나 이것은 정확히 브라우저의 결함이 아닙니다. <base>태그 에서 상대 URI를 사용하는 것은 그 자체로 잘못되었습니다. HTML4 사양 따라서 시작하여, 그 절대 URI되어야한다고 진술 http://또는 https://방식. 이것은 HTML5 사양 에서 삭제되었습니다 . 따라서 HTML5를 사용하고 HTML5 호환 브라우저 만 대상으로하는 경우 <base>태그 에서 상대 URI를 사용하면 됩니다.


와 같은 명명 된 / 해시 조각 앵커를 사용하는 것과 같이 <a href="#anchor">문자열 앵커를 쿼리 <a href="?foo=bar">하고 경로 조각 앵커를 좋아 <a href=";foo=bar">합니다. <base>태그를 사용하면 기본적으로 해당 앵커 종류를 포함하여 관련 링크를 모두 선언 합니다 . 태그가 없는 것처럼 현재 요청 URI와 관련된 상대 링크는 더 이상 없습니다 . 이것은 처음에는 초보자에게 혼란 스러울 수 있습니다. 이러한 앵커를 올바른 방식으로 구성하려면 기본적으로 URI를 포함해야합니다.<base>

<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>

여기서 ${uri}기본적으로 $_SERVER['REQUEST_URI']PHP, ${pageContext.request.requestURI}JSP 및 #{request.requestURI}JSF로 번역됩니다 . JSF와 같은 MVC 프레임 워크에는이 모든 상용구를 줄이고 필요를 제거하는 태그가 있습니다 <base>. 다른 JSF 페이지를 링크 / 탐색하는 데 사용할 URL 도 참조하십시오 .


BalusC, 내가 여기에 답변을 썼을 때와 거의 같은 시간 stackoverflow.com/a/46539210/632951 이 글에서 <base>에 관한 정보를 상세하게 설명하는 8 년 동안 여러 저자가 게시 한 10 개 이상의 유용한 의견이있었습니다. 의견을 연결하는 아이디어가 있습니까?
Pacerier

162

기본 태그의 효과 분석 :

기본 태그는 직관적이지 않은 효과가있는 것으로 보이므로 결과에 대해 알고 의존하기 전에 직접 테스트 해 보는 것이 좋습니다 <base>! URL이 다른 로컬 사이트를 처리하기 위해 기본 태그를 사용하려고 시도한 이를 발견하고 실망한 후에 만 ​​문제의 영향을 발견했기 때문에 다른 사람들에게 이러한 잠재적 함정에 대한 요약을 작성해야한다고 생각합니다.

<base href="http://www.example.com/other-subdirectory/">아래의 예에서 기본 태그 : 를 사용하고 코드가있는 페이지가 http://localsite.com/original-subdirectory 인 것처럼 가장합니다.

주요한:

링크 나 명명 된 앵커 또는 빈 href는 명시 적으로 명시되지 않는 한 원래 서브 디렉토리를 가리 키지 않습니다. 기본 태그는 기본 태그의 URL에 대한 동일한 페이지 앵커 링크를 포함하여 모든 것이 다르게 링크됩니다. 예 :

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    된다
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    된다
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

일부 작업을 수행하면 링크가있는 페이지에 해당 링크를 링크하도록 명시 적으로 지정하지만 표준 동작에 의존하는 타사 라이브러리를 믹스에 추가하면 제어 할 수있는 링크에서 이러한 문제를 해결할 수 있습니다. 쉽게 큰 혼란을 일으킬 수 있습니다.

미성년자:

조건부 주석이 필요한 IE6 수정 : DOM 계층 구조를 망칠 수 없도록 (즉, 위의 답변에서 언급 <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]-->한대로 ) 예를 들어 , 조건부 주석이 필요합니다 BalusC.

따라서 전체 링크를 완전히 편집 제어 할 수 없다면 원래 문제가 까다로워집니다. 원래 두려워했던 것처럼 가치가있는 것보다 문제가 많습니다. 이제 나는 그것을 사용하고 그것을 다시 써야합니다! :피

"조각"/ 해시 사용시 문제 테스트 관련 링크 :

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results


Izzy에 의해 편집 : 의견에 대해 나와 같은 혼란 을 겪고있는 모든 사람들을 위해 :

방금 테스트 한 결과는 다음과 같습니다.

  • 슬래쉬 여부, 여기에 주어진 예에 차이가 없습니다 ( #anchor그리고 ?query단순히 규정에 추가 될 것이다 <BASE>).
  • 그러나 그것은 상대적 링크 차분하게 다음 슬래시 생략을 other.html하고 dir/other.html상기 시작하는 것 DOCUMENT_ROOT, 주어진 예시에 /other-subdirectory파일로서 취급하므로 생략 (정확하게) 인.

따라서 상대 링크의 BASE경우 이동 된 페이지에서 잘 작동합니다. 앵커 ?queries는 파일 이름을 명시 적으로 지정해야합니다 ( BASE후행 슬래시 또는 마지막으로 사용 된 파일 이름과 일치하지 않는 요소 포함).

그것을 전체 URL을 파일 자체 (및 파일이 있는 디렉토리가 아닌)<BASE>바꾸는 것으로 생각 하면 올바르게 얻을 수 있습니다. 이 예제에서 사용 된 파일이 (새 위치로 이동 한 후) 가정 된 경우 올바른 스펙은 다음과 같아야합니다.other-subdirectory/test.html

<base href="http://www.example.com/other-subdirectory/test.html">

- 등 짜잔, 모든 것이 예상대로 작동 : #anchor, ?query, other.html, very/other.html, /completely/other.html.


27

잠깐만 요 기본 태그가이 나쁜 평판을받을 가치가 있다고 생각하지 않습니다.

기본 태그의 장점은 번거 로움없이 복잡한 URL 재 작성을 수행 할 수 있다는 것입니다.

다음은 예입니다. http://example.com/product/category/thisproducthttp://example.com/product/thisproduct 로 이동하기로 결정했습니다 . 첫 번째 URL을 두 번째 URL로 다시 쓰도록 .htaccess 파일을 변경합니다.

기본 태그가 있으면 .htaccess를 다시 작성하면됩니다. 문제 없어요. 그러나 기본 태그가 없으면 모든 상대 링크가 끊어집니다.

URL을 수정하면 사이트 아키텍처 및 검색 엔진 가시성에 도움이 될 수 있으므로 URL 재 작성이 종종 필요합니다. 사실, 사람들이 언급 한 "#"및 ''문제에 대한 해결 방법이 필요합니다. 그러나 기본 태그는 툴킷에 배치 할 가치가 있습니다.


10
내 관점에서 볼 때 문제는 미래를 보장하는 것입니다. 페이지에서 기본 태그를 사용하는 경우 페이지와 상호 작용하는 다른 모든 라이브러리는 기본 앵커 태그 또는 해시의 기본 동작에 의존 할 수있는 타사 라이브러리를 포함하여 기본 태그의 영향을받습니다.
Kzqai

4
@Kzqai, +1 좋은 지적이지만 결함이있는 라이브러리를 사용하지 않는 많은 웹 사이트가 있습니다. 문제는 기본 href가 아니며 라이브러리와 관련이 있으며 거기에서 수정해야합니다.
Pacerier

2
@Pacerier, 문제는 실제로 기본 href에 있다고 말합니다. 또는 오히려 문제는 브라우저가 #로 시작하는 anchor href에 영향을 미치지 않을 정도로 영리 해 보이지 않는다는 것입니다. 자바 스크립트 로이 문제를 해결하려고 시도했으며 href='#'링크 를 사용하는 라이브러리 (예 : 부트 스트랩) 에 문제가 발생했습니다 . 라이브러리를 비난하는 것은 HTML에 문제가있는 다른 모든 것에 대해 비난하는 것과 같습니다. 현대적인 작업을위한 오래된 도구입니다.
Deji

2
"복잡한 URL 재 작성이 번거롭지 않습니다." -이 경우 base태그는 루트에 상대적인 URL (또는 절대 URL)을 (올바르게) 사용하지 않은 경우의 해결 방법 일 수 있습니다.
MrWhite

@Deji, "문제"를 쓸 때 "버그"를 의미합니다. 예, base href의 존재는 실제로 "문제"이지만, 위의 경우 버그가 base href에 있지 않다고 말하고 있습니다. (그러나 나는 기본 href 사용을 지원하는 생각 한번하지 않는, 사실, 내 스탠드는 현재 버전이 기본 href 쓸모입니다 : stackoverflow.com/a/46539210/632951 . 방법은 앞으로 지금 베스트를 더 이상 사용하기 위해 또는 여러 수 있도록 여러 개를 사용할 수있을 때만 유용한 기본 hrefs )
Pacerier

22

사용 여부를 결정하려면 사용 여부와 필요 여부를 알고 있어야합니다. 이것은 이미이 답변에 부분적으로 설명되어 있으며 , 나는 또한 그것에 기여했습니다. 그러나 이해하고 따르기 쉽도록 두 번째 설명입니다. 먼저 다음을 이해해야합니다.

링크없이 브라우저에서 링크를 처리하는 방법 <BASE> 사용 합니까?

몇 가지 예를 들어 다음 URL이 있다고 가정합니다.

A) http://www.example.com/index.html
B) http://www.example.com/
C)http://www.example.com/page.html
D)http://www.example.com/subdir/page.html

A + B는 모두 동일한 파일 ( index.html)을 브라우저로 전송하고 C는 물론 send page.html를 전송 /subdir/page.html합니다.

두 페이지 모두에 일련의 링크가 있다고 가정 해 봅시다.

1) 정규화 된 절대 링크 ( http://www...)
2) 로컬 절대 링크 ( /some/dir/page.html)
3) 파일 이름을 포함한 상대 링크 ( dir/page.html) 및
4) "세그먼트"만있는 상대 링크 (#anchor , ?foo=bar).

브라우저가 페이지를 수신하고 HTML을 렌더링합니다. URL을 찾으면 어디를 가리켜 야하는지 알아야합니다. 그것은 링크 1)에 대해 항상 분명합니다. 나머지는 렌더링 된 페이지의 URL에 따라 다릅니다.

URL     | Link | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

이제 무엇으로 바뀌 나요 <BASE> 사용 있습니까?

<BASE>브라우저에 나타나는 URL을 대체해야 합니다 . 따라서 사용자가에 지정된 URL을 호출 한 것처럼 모든 링크를 렌더링합니다 <BASE>. 다음은 다른 여러 답변의 혼란을 설명합니다.

  • "정규화 된 절대 링크"( "유형 1")에 대한 변경 사항은 없습니다.
  • 로컬 절대 링크의 경우 대상 서버 가 변경 될 수 있습니다 (<BASE> 것과 사용자가 처음에 호출 한 것과 다른 )
  • 상대 URL은 여기서 중요해 지므로 설정 방법에 특별한주의를 기울여야합니다 <BASE> .
    • 디렉토리로 설정하지 않는 것이 좋습니다. . 이렇게하면 "유형 3"의 링크가 계속 작동 할 수 있지만 "유형 4"의 링크는 가장 확실하게 손상됩니다 ( "케이스 B"제외).
    • 완전한 파일 이름으로 설정하면 대부분의 경우 원하는 결과가 생성됩니다.

가장 잘 설명하는 예

다음을 사용하여 일부 URL을 "예측"하고 싶다고 가정 해보십시오 mod_rewrite.

  • 실제 파일 : <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • 실제 URL : http://www.example.com/some/dir/file.php?lang=en
  • 사용하기 쉬운 URL : http://www.example.com/en/file

사용자 친화적 인 URL을 실제 URL mod_rewrite투명하게 재 작성하는 데 사용 한다고 가정합니다 (외부 리디렉션 없음). "사용자 친화적"URL은 브라우저 주소 표시 줄에 그대로 유지되고 실제 URL은로드됩니다. 지금 무엇을해야합니까?

  • <BASE>지정 되지 않음 : 모든 관련 링크를 끊습니다 ( http://www.example.com/en/file현재 기반으로 함 ).
  • <BASE HREF='http://www.example.com/some/dir>: 물론입니다. 지정된 URL dir파일 부분 으로 간주 되므로 모든 상대 링크가 끊어집니다.
  • <BASE HREF='http://www.example.com/some/dir/>: 이미 나아졌습니다. 그러나 "유형 4"의 상대 링크는 여전히 끊어집니다 ( "케이스 B"제외).
  • <BASE HREF='http://www.example.com/some/dir/file.php>: 바로 그거죠. 모든 것이 이것과 함께 작동해야합니다.

마지막 메모

이는 문서의 모든 URL에 적용됩니다 .

  • <A HREF=
  • <IMG SRC=
  • <SCRIPT SRC=

마지막 메모를 참조하면 ... 궁금합니다. 또한 jQuery ajax 요청이 해석되는 방식을 변경합니다. 이것은 다음과 다릅니다<SCRIPT SRC=
bkwdesign

@bkwdesign 저는 jQuery를 사용하지 않지만 그렇게 가정합니다.
Izzy

@Izzy, Re "example" 사실 , </some/dir/file.php?lang=en>을 </ en / file>으로 미리 설정하면 </ some / dir / page2? lang = en> 및 </ some / dir / script>를 </ en / page2> 및 </ en / script>로 설정하십시오. 따라서 상대 경로는 원하는대로 작동 합니다 .
Pacerier

<BASE HREF='http://www.example.com/some/dir/file.php>"타입 4" 는 어떻게 작동합니까? 그렇지 "처럼되지 않을 것 example.com/some/dir/file.php?foo=bar "대신 example.com/subdir/page.html?foo=bar
ANewGuyInTown

@ANewGuyInTown 그렇습니다. 제 예제에서 http://www.example.com/some/dir/file.php와 같이 "실제 위치"( "예제 설명"이 가장 좋습니다)와 같이 조각 ( #anchor) 만 전달 하면 해결할 수 있습니다.
Izzy

12

Drupal은 처음에 <base>태그 에 의존 했으며 나중에 HTTP 크롤러 및 캐시 문제로 인해 사용하지 않기로 결정했습니다.

나는 일반적으로 링크를 게시하고 싶지 않습니다. 그러나 이것은 <base>태그 에 대한 실제 경험의 세부 사항을 찾는 사람들에게 도움이 될 수 있으므로 공유 할 가치가 있습니다 .

http://drupal.org/node/13148


링크는이 답변이 8 년 전에 이루어졌으며, 이제는 거의 10 년 전에 논의되었습니다. 아직 문제가 아닌 경우 존재하지 않을 수있는 문제에 대한 오래된 설명에 연결하기보다는 더 많은 테스트를 수행해야한다고 생각합니다.
Sami Kuhmonen

그러나 IMHO는 앵커가 브라우저에서 올바르게 작동하는 것이 아니라 기반 구현 을 테스트 하기 위해 어떤 문제가 필요한지 여전히 눈에 띄게 <base>합니다.
Amr Mostafa

@AmrMostafa, 그냥 base href를 사용하지 마십시오.
Pacerier

10

오프라인보기가 더 쉬운 페이지입니다. 정규화 된 URL을 기본 태그에 넣으면 원격 리소스가 제대로로드됩니다.


@Erik, 오프라인보기 외에도 다른 도메인의 도메인 페이지를 데모해야하는 모든 stopgap 사용 사례에서도 작동합니다. 예를 들어, jsfiddle에서 페이지를 데모 할 때 jsfiddle의 도메인 대신 base href를 사용하여 도메인을 만들 수 있습니다. ¶ 사실적으로 말하면, 그러한 스톱 갭 유스 케이스에 대해서만 태그를 작성하는 것은 좋은 디자인이 아니므로 그러한 스톱 갭 유스 케이스에 유용 할 수있는 경우에도 base href는 더 이상 사용되지 않고 제거되어야합니다.
Pacerier

5

해시 "#"는 현재 기본 요소와 함께 점프 링크에서 작동하지만 IE9가 아닌 최신 버전의 Chrome 및 Firefox에서만 작동합니다.

IE9는 어디서나 뛰어 넘지 않고 페이지를 다시로드하는 것처럼 보입니다. iframe 외부에서 점프 링크를 사용하는 경우 프레임에서 프레임 내 별도의 페이지에 점프 링크를로드하도록 프레임을 지시하면 대신 프레임 내에로드 된 점프 링크 페이지의 두 번째 사본이 표시됩니다.


5

잘 알려지지 않았기 때문에 인기가 없을 것입니다. 모든 주요 브라우저가 지원하기 때문에 사용하는 것을 두려워하지 않습니다.

사이트에서 AJAX를 사용하는 경우 모든 페이지에 올바르게 설정되어 있는지 확인하거나 확인할 수없는 링크가 생길 수 있습니다.

targetHTML 4.01 Strict 페이지에서 속성을 사용하지 마십시오 .


실제로 basetarget이 유용 할 수 있지만 basehref는 aint입니다. 실제로, 그것은 유용하지 않기 때문에 인기가 없습니다 . 내 대답을 참조하십시오.
Pacerier

이제 모든 브라우저가 base태그를 지원합니다 .
Vitaly Zdanevich 2016 년

3

페이지에 인라인 된 SVG 이미지의 경우 base태그를 사용할 때 또 다른 중요한 문제가 있습니다 .

과 이후 base(위에서 이미 언급 한 바와 같이) 태그 효과적으로처럼 상대 해시 URL을 사용하는 능력을 잃어

<a href="#foo">

현재 문서의 위치가 아닌 기본 URL에 대해 해결되므로 더 이상 상대적이지 않기 때문입니다. 따라서 현재 문서의 경로를 다음과 같은 링크에 추가해야합니다.

<a href="https://stackoverflow.com/path/to/this/page/name.html#foo">

따라서 base긴 URL 접두사를 앵커 태그에서 멀어지고 더 짧은 앵커로 가져 오는 태그의 긍정적 인 측면 중 하나는 로컬 해시 URL에 대해 완전히 역효과를냅니다.

에 있기 때문에, 귀하의 페이지에 SVG를 인라인 그것은 정적 SVG 또는 동적으로 생성 된 SVG 할 때 특히 성가신 이 이러한 참조를 많이 할 수 있습니다 SVG 그들은 곧 한 모든 휴식 것이다 base태그는 모든 사용자 대부분에 사용되는 것이 아니라, 에이전트 구현 (Chrome은 글을 쓰는 시점에서 이러한 시나리오에서 여전히 작동합니다).

템플릿 시스템이나 페이지를 처리 ​​/ 생성하는 다른 툴 체인을 사용하는 경우 base태그를 제거하려고 시도합니다. 태그를 보면 해결하는 것보다 테이블에 더 많은 문제가 발생하기 때문입니다.


SVG의 유무에 관계없이 기본 태그는 쓸모가 없으며 유해한 것으로 간주됩니다 . 내 정교함 참조 : stackoverflow.com/a/46539210/632951
Pacerier

3

또한 비표준 포트에서 웹 서버를 실행하는 경우 base href에도 포트 번호를 포함해야합니다.

<base href="//localhost:1234" />  // from base url
<base href="../" />  // for one step above

2

나는 그것을 사용하는 점을 실제로 본 적이 없다. 이점이 거의 없으며 사용하기가 더 어려울 수도 있습니다.

수백 또는 수천 개의 링크가있는 경우가 아니라면 모두 동일한 하위 디렉토리에 연결됩니다. 그런 다음 몇 바이트의 대역폭을 절약 할 수 있습니다.

나중에 생각할 때 IE6의 태그에 문제가 있다고 생각합니다. 사이트의 다른 부분을 다른 위치로 리디렉션하여 본문의 어느 곳에 나 배치 할 수 있습니다. 이것은 IE7에서 수정되어 많은 사이트를 손상 시켰습니다.


3
이점은 아마도 대역폭을 절약하는 것이 아니라 URL을 더 깨끗하고 짧게 만드는 것입니다. 불행히도 모든 링크에 대한 미묘한 행동 변화는 실제로 가치가 없습니다.
Kzqai

1
base태그는 몇 가지 문제에 대한 해결책입니다. 문제가 없다면 base태그를 사용하지 마십시오 . 예 : 1. 다른 시스템에서 HTML 내용 재사용. 링크는 내용에 상대적으로 유지되며 링크가 base올바르게 확인되도록 CMS에 의해 적절한 태그가 설정됩니다. 2. 기존 사이트는 전체에서 상대 URL을 사용하지만 나중에 URL 경로 깊이를 변경하는 "예쁜"URL을 구현하기로 결정합니다. base태그는 모든 상대 URL을 "고정"에 바람직하게 볼 수있다.
MrWhite

@MrWhite, CMS는 기본 태그를 사용하여 링크를 올바르게 확인하지 않아도됩니다. HTML은 이미 현재 폴더로 기본 설정 되는 상대 경로를 지원하므로 . 자세한 내용은 여기를 참조하십시오 : stackoverflow.com/a/46539210/632951
Pacerier

1
@Pacerier 내용이있는 위치에 따라 다릅니다 (FWIW 저는 WordPress 등을 언급하지 않습니다).
MrWhite

@MrWhite는 일반적으로 CMS가 처음에는 정적 링크를 사용하지 않으므로이 예는 이상합니다. 사실 요즘 정적 HTML을 사용하여 구축 된 웹 사이트는 거의 없습니다. -나는 당신의 요점을 볼 수 있지만, 지금은 기본적으로 사용되지 않는 문제에 대한 해결책입니다. (모두와 조부모가 모든 것에 WordPress 또는 이와 유사한 것을 사용하고 있습니다.)
Atli

2

base-tag가 사용되는 사이트도 있고 설명 된 문제가 발생했습니다. (jquery를 업그레이드 한 후) 다음과 같은 탭 URL을 사용하여 문제를 해결할 수있었습니다.

<li><a href="{$smarty.server.REQUEST_URI}#tab_1"></li>

이로 인해 "로컬"이됩니다

내가 사용한 참고 문헌 :

http://bugs.jqueryui.com/ticket/7822 http://htmlhelp.com/reference/html40/head/base.html http://tjvantoll.com/2013/02/17/using-jquery-ui- 기본 태그가있는 탭 /


2

AngularJS와 함께 작업하면 BASE 태그가 $ cookieStore를 자동으로 끊어 내 앱이 더 이상 쿠키를 작성할 수없는 이유를 알아내는 데 시간이 걸렸습니다. 경고 받다...


1

명심해야 할 사항 :

iOS의 UIWebView 내에 표시 할 웹 페이지를 개발하는 경우 BASE 태그를 사용해야합니다. 그렇지 않으면 단순히 작동하지 않습니다. JavaScript, CSS, 이미지 여야합니다. BASE 태그가 지정되지 않으면 UIWebView에서 상대 링크와 함께 작동하지 않습니다.

내가 알 때까지 나는 전에 이것에 사로 잡혔다.


1

<base>기반 링크 를 사용 하고 고정 하는 방법을 찾았습니다 . JavaScript를 사용하여 링크가 #contact정상적으로 작동하는 것처럼 유지할 수 있습니다 . 나는 시차 페이지에서 그것을 사용했고 그것은 나를 위해 작동합니다.

<base href="http://www.mywebsite.com/templates/"><!--[if lte IE 6]></base><![endif]-->

...content...

<script>
var link='',pathname = window.location.href;
$('a').each(function(){
    link = $(this).attr('href');
    if(link[0]=="#"){
        $(this).attr('href', pathname + link);
    }
});
</script>

페이지 끝에서 사용해야합니다


0

url 경로를 관리 할 때이 요소 를 사용하지 않는<base> 것이 좋습니다 . 왜?

그것은 단지 하나의 문제를 다른 문제와 교환합니다. 기본 요소가 없으면 상대 경로 및 링크에 대해 원하는 경로 시스템을 사용할 수 있습니다. 기본 요소를 해당 경로에서 벗어나도록 모든 URL을 디자인하기 위해 "고정 된"경로로 설정하면 기본 경로에서 작동하도록 모든 경로를 변경해야합니다. 나쁜 생각!

즉, 이제 더 긴 경로를 작성하고 각 경로가이 기준과 관련된 위치를 추적해야합니다. 더 나쁜 것은 ..... <base>요소를 사용할 때 이전 브라우저 ( " https://www.example.com/ ") 를 지원하기 위해 정규화 된 기본 경로를 사용하도록 권장 하므로 이제 도메인을 도메인에 하드 코딩했습니다. 페이지를 보거나 모든 링크를 유효한 도메인 경로에 종속시킵니다.

반면에 웹 사이트에서 기본 경로를 다시 제거하는 순간, 이제 더 짧은 상대 경로를 다시 사용할 수 있습니다. 정규화 된 경로, 루트의 절대 경로 또는 실제 경로와 관련된 경로를 사용할 수 있습니다. 파일과 폴더가 있습니다. 훨씬 유연합니다. 그리고 "#hello"와 같은 모든 조각 중에서 추가 수정없이 올바르게 작동합니다. 다시, 사람들은 존재하지 않는 문제를 만들고 있습니다.

또한 대부분의 최신 서버를 사용하면 모든 도메인에서 하위 폴더를 새 응용 프로그램 루트 폴더로 신속하게 설정할 수 있으므로 웹 페이지 폴더를 새 하위 폴더 위치로 마이그레이션하는 데 기본 URL을 사용한다는 위의 주장은 오늘날 중요하지 않습니다. 웹 응용 프로그램의 정의 또는 "루트"는 현재 폴더 나 도메인에 의해 제한되지 않습니다.

이 토론 전체가 어리석은 것 같습니다. 그래서 나는 기본 URL을 남기지 않고 그것을 사용하지 않는 오래된 기본 서버 클라이언트 기본 경로 시스템을 지원한다고 말합니다.

참고 : 새로운 API 시스템으로 인해 경로를 제어하는 ​​데 문제가있는 경우 솔루션은 간단합니다 ... API의 모든 URL과 링크를 경로 지정하는 방식이 일관성이 있습니다. 자바 스크립트 API 키드와 같이 기본 또는 HTML5 이상의 최신 서커스 트릭에 대한 브라우저 지원에 의존하지 마십시오. 모든 앵커 태그를 일관되게 경로 지정하면 아무런 문제가 없습니다. 또한 웹 응용 프로그램은 사용 된 경로 시스템에 관계없이 즉시 새로운 서버로 이식 가능합니다.

옛날이 또 새로운! 기본 요소는 20 년 전에는 웹 월드에 존재하지 않았던 문제에 대한 솔루션을 만들려고하는 것입니다.


-1

기본 href 예제

링크가있는 일반적인 페이지를 말합니다.

<a href=home>home</a> <a href=faq>faq</a> <a href=etc>etc</a>

. diff 폴더로 연결되는 링크 :

..<a href=../p2/home>Portal2home</a> <a href=../p2/faq>p2faq</a> <a href=../p2/etc>p2etc</a>..

함께 기본 href , 우리는 피할 수 반복을 기본 폴더를 보내고 :

<base href=../p2/>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>

그래서 그것은 승리입니다.. 그러나 페이지는 종종베이스를 비교하기위한 URL을 포함합니다. 그리고 현재 웹은 페이지 당 하나의베이스 href만을 지원 하므로,베이스가 아닌 참조가 반복되는베이스로서 승리는 빨리 사라집니다.

<a href=../p1/home>home</a> <a href=../p1/faq>faq</a> <a href=../p1/etc>etc</a>
<!--.. <../p1/> basepath is repeated -->

<base href=../p2>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>


결론

( 기본 대상 이 유용 할 수 있습니다.) 기본 href는 다음 과 같이 쓸모가 없습니다 .

  • 다음과 같은 이유로 페이지가 WET입니다 .
    • 기본 기본 [-부모 폴더] ⇌ 완벽 (불필요하거나 드문 예외 𝒞1 & 𝒞2가 아닌 한 ).
    • 현재 웹 ⇌ 여러 기본 href가 지원되지 않습니다 .

관련


@downvoters는 basehref가 얼마나 유용한 지 설명 할 수 없을 것입니다. 특히 전체 산업에서 광범위하게 사용하지 않는 것이 좋습니다.
Pacerier
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.