jquery 또는 javascript로 기본 URL을 얻는 방법은 무엇입니까?

152

joomla php에서는 $this->baseurl기본 경로를 얻는 데 사용할 수 있지만 jquery에서 기본 경로를 얻으려고했습니다.

기본 경로는 다음 예 중 하나 일 수 있습니다.

http://www.example.com/
http://localhost/example
http://www.example.com/sub/example

는 example또한 변경 될 수 있습니다.

javascript  jquery 
— 나빈 라우 니야
소스
— Mritunjay
나는 이미 보았다 @Mritunjay,하지만 내 경우에는 기본 경로는 우리가 줌라에서 할 PHP에서 같은 기본 경로 얻기 위해 바란대로 다른
— 나빈 Rauniyar
따라서 어떤 대답도 문제를 해결하지 못했습니까?
— Artjom B.
답을 고르세요?
— allanberry

답변:

177

이것은 당신을 도울 것입니다 ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— 제니 쉬
소스
예, 작동합니다! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl-> http://localhost/myapp:-)
— vee
3
@Artjom B의 답변에 어쩌면 저주받은 답변으로 표시된 것처럼 모든 경우에 작동하지는 않습니다. 예를 들어 사이트가 로컬 네트워크를 통해 테스트되고 도메인이 IP + 로컬 경로로 대체되는 경우 기본 URL은 다음과 같습니다. 192.168.0.23/~sites/site/html/대신에 site.dev. 사이트는 여러 개의 가상 하위 디렉토리를 가질 수 있으므로 Javascript로 전체 경로 이름을 얻는 것도 옵션이 아닙니다.
— 확실히
124

괜찮을 것 같아

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );
— 하리스
소스
7
짧고 달콤합니다. 감사합니다. window.location.origin
— TetraDev 2016 년
1
짧고 간결하며 잘 작동하므로 선호되는 답변이어야합니다.
— Gregor
window.location.origin은
— ie9
1
@jnoreiga 누가ツIE9 사용하여 여전히
— 알렉상드르 Daubricourt
2
나는 그것이 간단한 @AlexandreDaubricourt
— jnoreiga
30

이것은 기본 URL을 얻을 것입니다

var baseurl = window.location.origin+window.location.pathname;
— 자허 바바
소스
이것은 window.location.href
— Z. Khullah
8
그것은 동일하지 않습니다, 경로 이름은 URL의 경로 세그먼트를 제공합니다, href는 쿼리 매개 변수도 포함합니다
— dschulten
24

이것은 매우 오래된 질문이지만 개인적으로 사용하는 접근법은 다음과 같습니다.

표준 / 기본 URL 가져 오기

많은 사람들이 이미 언급했듯이 이것은 대부분의 상황에서 작동합니다.

var url = window.location.origin;


절대 기본 URL 얻기

그러나이 간단한 접근 방식을 사용하여 포트 번호를 제거 할 수 있습니다. 

var url = "http://" + location.host.split(":")[0];

편집 : Jason Rice가 제기 한 문제를 해결하기 위해 다음을 사용하여 올바른 프로토콜 유형을 자동으로 삽입 할 수 있습니다 ...

var url = window.location.protocol + "//" + location.host.split(":")[0];


기본 URL 설정

보너스로 기본 URL을 전체적으로 재정의 할 수 있습니다. 

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
— 더스틴 할스 테드
소스
1
프로토콜이 https와 같은 http 이외의 것이 아닌 경우 (url 프로토콜을 "http : //"로 설정하면 URL 사용 방법에 따라 실제로 이상한 오류가 발생 함).
— Jason Rice
13

이것은 서버 측 속성이므로 Javascript에서는 불가능합니다. 클라이언트의 Javascript가 joomla가 설치된 위치를 알 수 없습니다. 가장 좋은 방법은 $this->baseurl자바 스크립트 페이지에 값을 포함시킨 다음이 값 ( phpBaseUrl) 을 사용하는 것 입니다.

그런 다음 다음과 같이 URL을 작성할 수 있습니다.

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
— Artjom B.
소스
1
주 loc.host같은 URL에 대한 포트를 가지고 http://localhost:8082/이 방법을 생산할 예정은 http://localhost:8082:8082/, window.location.hostname대신 사용해야합니다.
— Tiberiu C.
Ti 고마워요.
— Artjom B.
8

얼마 전에 같은 문제가 있었지만 내 문제는 단순히 기본 URL이 필요하다는 것입니다. 여기에는 자세한 옵션이 많이 있지만이 문제를 해결하려면 window.location객체 를 사용하십시오 . 실제로 브라우저 콘솔에 이것을 입력하고 Enter 키를 눌러 옵션을 선택하십시오. 내 경우에는 간단하게 다음과 같습니다. 

window.location.origin
— 요훈
소스
7 
var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

그러나 CodeIgniter (또는 php joomla)의 baseurl ()은 동일한 프레임 워크의 .htaccess 파일에서 baseurl을 변경할 수 있으므로 동일한 값을 반환한다고 말할 수 없습니다.

예를 들면 다음과 같습니다.

localhost에 다음과 같은 .htaccess 파일이있는 경우 :

RewriteEngine on
RewriteBase /CodeIgniter/
RewriteCond $1 !^(index.php|resources|robots.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

$ this-> baseurl ()은 http : // localhost / CodeIgniter /를 반환합니다

— 아킬 쿠마르
소스
6

여러 Joomla 프로젝트 에서이 필요성에 부딪 쳤습니다. 내가 찾은 가장 간단한 방법은 템플릿에 숨겨진 입력 필드를 추가하는 것입니다.

<input type="hidden" id="baseurl" name="baseurl" value="<?php echo $this->baseurl; ?>" />

JavaScript에서 가치가 필요할 때 :

var baseurl = document.getElementById('baseurl').value;

순수한 JavaScript를 사용하는 것만 큼 단순하지는 않지만 간단하고 작업을 완료합니다.

— 브라이언 볼리
소스
6

jQuery에서 기본 URL을 얻는 가장 쉬운 방법

window.location.origin
— 카이사르 말리크
소스
이것은 실제로 jQuery가 아닙니다. jQuery는 다음과 같습니다 : $ (location) .attr ( "origin");
— Mauritz Hansen
3

모든 사람이 개발시 HTML 기본 태그를 생성 한 다음 href를 동적으로 할당하여 프로덕션 환경에서 클라이언트가 사용하는 호스트에 상관없이 자동으로 추가하는 것이 좋습니다.

<html>
 <title>Some page title</titile>
  <script type="text/javascript">
    var head  = document.getElementsByTagName('head')[0];
    var base = document.createElement("base");
    base.href = window.document.location.origin;
    head.appendChild(base);
  </script>
 </head>
 ...

따라서 localhot : 8080에있는 경우베이스에서 링크되거나 참조 된 모든 파일에 도달합니다. 예 : http://localhost:8080/some/path/file.html www.example.com에있는 경우http://www.example.com/some/path/file.html

또한 모든 위치에서 hrefs에 glob와 같은 참조를 사용해서는 안됩니다. 예 : Parent location cause http://localhost:8080/not http://localhost:8080/some/path/.

기본 URL없이 모든 하이퍼 링크를 전체 문장으로 참조하십시오.

— 코크
소스
3

형식은 호스트 이름 / 경로 이름 / 검색입니다

그래서 URL은 : 

var url = window.location.hostname + window.location.pathname + window.location.hash

당신의 경우를 위해 

window.location.hostname = "stackoverflow.com"
window.location.pathname ="/questions/25203124/how-to-get-base-url-with-jquery-or-javascript"
window.location.hash = ""

따라서 기본적으로 baseurl = hostname = window.location.hostname

— 키룰 이슬람 오미
소스
3

기본 URL이 <base>태그 에 설정된 경우 답변 중 하나가 기본 URL을 고려하는 것이 놀랍습니다 . 모든 현재 답변은 호스트 이름이나 서버 이름 또는 주소의 첫 부분을 얻으려고합니다. 이것은 <base>태그를 고려하는 완전한 논리입니다 (다른 도메인 또는 프로토콜을 가리킬 수 있음).

function getBaseURL(){
  var elem=document.getElementsByTagName("base")[0];
  if (typeof(elem) != 'undefined' && elem != null){
     return elem.href;
  }
  return window.location.origin;
}

jquery 형식 :

function getBaseURL(){
  if ($("base").length){
     return $("base").attr("href");
  }
  return window.location.origin;
}

위의 논리에 관여하지 않고 <base>태그와 태그를 모두 고려하는 속기 솔루션입니다 window.location.origin.

JS :

var a=document.createElement("a");
a.href=".";
var baseURL= a.href;

jquery :

var baseURL= $('<a href=".">')[0].href

마지막 참고 사항 : 컴퓨터의 로컬 파일 (호스트가 아닌)의 window.location.origin경우 파일 만 반환 file://하지만 위의 정렬 솔루션은 완전한 올바른 경로를 반환합니다.

— 알리 셰이크 푸어
소스
1
이것은 최선의 방법이 아닙니다. 또한 <base>요소를 포함하는 @DaniilSamoylov의 답변을 참조하십시오 .
— Brad
baseURI는 노드의 기본 URL을 반환하므로이 경우 기본 경로 + 문서 이름을 반환합니다. 해당 URL에서 문서 이름을 제거하려면 더 많은 코드가 필요합니다. @ 브래드
— 알리 Sheikhpour
이 솔루션은 웹 페이지의 루트 디렉토리가 하위 디렉토리 (예 : example.com/appRoot ) 내에있을 때 올바른 기본 URL을 제공 하지 않습니다 . 웹 페이지의 루트 디렉토리가 웹 호스트의 루트에 직접있는 경우에만 작동합니다.
— Michael Hafner
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

Jenish와 거의 동일하지만 조금 더 짧습니다.

— 매틴
소스
2

나는 같은 단계에 있었고이 솔루션은 나를 위해 일합니다.

보기에서

<?php
    $document = JFactory::getDocument();

    $document->addScriptDeclaration('var base = \''.JURI::base().'\'');
    $document->addScript('components/com_name/js/filter.js');
?>

js 파일 base에서 예를 들어 시나리오에서 변수로 액세스 합니다.

console.log(base) // will print
// http://www.example.com/
// http://localhost/example
// http://www.example.com/sub/example

크레딧을 제공하기 위해이 정보를 어디에서 가져 가는지 기억이 안납니다. 찾으면 답변을 수정하겠습니다.

— 마리오
소스
1

다음은 file://URL 에서도 작동하는 빠른 것입니다 .

나는이 하나의 라이너를 생각해 냈습니다.

[((1!=location.href.split(location.href.split("/").pop())[0].length?location.href.split(location.href.split("/").pop())[0]:(location.protocol,location.protocol+"//" + location.host+"/"))).replace(location.protocol+"//"+location.protocol+"//"+location.protocol+"://")]
— 블 블블
소스
0

당신 example.com은 변경 될 수 있다고 언급 했으므로 실제로 스크립트에 상대 경로 표기법을 사용하려면 기본 URL이 필요하다고 생각합니다. 이 특별한 경우 스크립팅을 사용할 필요가 없습니다. 대신 기본 태그를 헤더에 추가하십시오.

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

나는 보통 PHP를 통해 링크를 생성합니다.

— 헥 소두
소스
0

누군가가 이것을 매우 강력한 기능으로 나눈 것을보고 싶다면

    function getBaseURL() {
        var loc = window.location;
        var baseURL = loc.protocol + "//" + loc.hostname;
        if (typeof loc.port !== "undefined" && loc.port !== "") baseURL += ":" + loc.port;
        // strip leading /
        var pathname = loc.pathname;
        if (pathname.length > 0 && pathname.substr(0,1) === "/") pathname = pathname.substr(1, pathname.length - 1);
        var pathParts = pathname.split("/");
        if (pathParts.length > 0) {
            for (var i = 0; i < pathParts.length; i++) {
                if (pathParts[i] !== "") baseURL += "/" + pathParts[i];
            }
        }
        return baseURL;
    }
— 수비
소스
이것은 전체 URL을 제공합니다. 기본 URL이 아닙니다.
— Sam
사실, 내가 어디로 가고 있는지 확실하지 않습니다. 서버 측 코드로 설정으로 전환 한 지 오래되었습니다.
— nuander
0

쉬운 

$('<img src=>')[0].src

비어있는 src-name으로 img를 생성하면 브라우저는 사용자가 있든 없든 기본 URL을 자체적으로 계산합니다 /index.html.

— 암울한
소스
이것은 브라우저 논리를 복제하지 않는 유일한 솔루션 중 하나이며 가장 좋은 솔루션입니다. 휴대 성이 얼마나 좋은지 궁금합니다. HTML 사양에 이것이 모든 브라우저에서 작동한다고 보증하는 것이 있습니까?
— Matthijs Kooijman
@MatthijsKooijman html 사양의 해석에 따라 다릅니다. 길이가 0 인 파일 이름이 유효한 resource-name ...이라고하면 모든 브라우저와 일치합니다.
— 그림
브라우저를 만드는 방법을 이해하십시오. (간접적 인) 브라우저를 구축하려는 프로그래머가 두 명 있습니다. 첫 번째 소스는 html-specs입니다. 그들은 사양을 읽고 이것이 실제로 해결하고자하는 질문 중 하나입니다. 그들이이 상황을 어떻게 결정한다고 생각하십니까?
— 그림
-2

URL을 나누고 참여하십시오.

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))
— 태양을 부여
소스
-4

이것을 헤더에 넣으면 필요할 때마다 사용할 수 있습니다.

var base_url = "<?php echo base_url();?>";

당신은 얻을 것이다 http://localhost:81/your-path-file나 http://localhost/your-path-file.

— 아스로 필 알 반나
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.