Làm cách nào để có được url cơ sở với jquery hoặc javascript?

152

Trong j Joomla php có tôi có thể sử dụng $this->baseurlđể lấy đường dẫn cơ sở, nhưng tôi muốn lấy đường dẫn cơ sở trong jquery.

Đường dẫn cơ sở có thể là bất kỳ ví dụ nào sau đây:

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

Cũng examplecó thể thay đổi.

javascript  jquery 
— Hải quân Rauniyar
nguồn
— Mritunjay
@Mritunjay Tôi đã thấy điều đó, nhưng trong trường hợp của tôi, đường dẫn cơ sở khác với tôi muốn có đường dẫn cơ sở như trong php, chúng tôi làm trong
— j
Vì vậy, không có câu trả lời nào giải quyết vấn đề của bạn?
— Artjom B.
chọn một câu trả lời
— allanberry

Câu trả lời:

177

Điều này sẽ giúp bạn ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— Jenish
nguồn
Có nó hoạt động! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)
— vee
3
Điều này sẽ không hoạt động trong tất cả các trường hợp, như được chỉ ra bởi câu trả lời được đánh giá thấp bằng cách nào đó bởi @Artjom B. Ví dụ: khi một trang web được kiểm tra qua mạng cục bộ (và tên miền được thay thế bằng IP + đường dẫn cục bộ), url cơ sở có thể giống như 192.168.0.23/~sites/site/html/thay vì site.dev. Lấy tên đường dẫn đầy đủ bằng Javascript cũng không phải là một tùy chọn, bởi vì một trang web có thể có bất kỳ số lượng thư mục con ảo nào.
— chắc chắn
124

Tôi nghĩ nó sẽ ổn cho bạn

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );
— Haris
nguồn
7
Đẹp ngắn và ngọt ngào, cảm ơn. window.location.origin
— TetraDev
1
đây nên là câu trả lời ưa thích, vì nó ngắn gọn, súc tích và hoạt động tốt.
— Gregor
window.location.origin không được định nghĩa trong eg9
— jnoreiga
1
@jnoreiga Ai vẫn đang sử dụng eg9
— Alexandre Daubricourt
2
Tôi ước nó đơn giản như vậy
— @AlexandreDaubricourt
30

Điều này sẽ nhận được url cơ sở

var baseurl = window.location.origin+window.location.pathname;
— Babar Zaheer
nguồn
điều này giống như window.location.href
— Z. Khullah
8
nó không giống nhau, tên đường dẫn cung cấp cho bạn đoạn đường dẫn của url, href cũng chứa các tham số truy vấn
— dschulten
24

Đây là một câu hỏi cực kỳ cũ, nhưng đây là những cách tiếp cận cá nhân tôi sử dụng ...

Nhận URL tiêu chuẩn / cơ sở

Như nhiều người đã nêu, điều này hoạt động cho hầu hết các tình huống.

var url = window.location.origin;


Nhận URL cơ sở tuyệt đối

Tuy nhiên, phương pháp đơn giản này có thể được sử dụng để loại bỏ bất kỳ số cổng nào. 

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

Chỉnh sửa: Để giải quyết mối quan tâm, được đặt ra bởi Jason Rice , có thể sử dụng cách sau đây để tự động chèn đúng loại giao thức ...

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


Đặt URL cơ sở

Như một phần thưởng - URL cơ sở sau đó có thể được xác định lại trên toàn cầu. 

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
— Dustin Halstead
nguồn
1
Trừ khi giao thức của bạn là một cái gì đó không phải là http như https (sau đó đặt giao thức url thành "http: //" sẽ xuất hiện một số lỗi thực sự kỳ lạ tùy thuộc vào cách bạn muốn sử dụng url).
— Jason Rice
13

Điều này là không thể từ javascript, vì đây là thuộc tính phía máy chủ. Javascript trên máy khách không thể biết j Joomla được cài đặt ở đâu. Tùy chọn tốt nhất là bằng cách nào đó bao gồm giá trị của $this->baseurlvào javascript trang và sau đó sử dụng giá trị này ( phpBaseUrl).

Sau đó, bạn có thể tạo url như thế này:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
— Artjom B.
nguồn
1
Lưu ý rằng loc.hostcó cổng, đối với một url như http://localhost:8082/phương thức này sẽ tạo ra http://localhost:8082:8082/, window.location.hostnamenên được sử dụng thay thế.
— Tiberiu C.
@TiberiuC. Cảm ơn, thêm vào.
— Artjom B.
8

Có cùng một vấn đề trước đây, vấn đề của tôi là, tôi chỉ cần url cơ sở. Có rất nhiều tùy chọn chi tiết ở đây nhưng để giải quyết vấn đề này, chỉ cần sử dụng window.locationđối tượng. Thực tế gõ cái này trong bảng điều khiển trình duyệt và nhấn enter để chọn tùy chọn của bạn ở đó. Đối với trường hợp của tôi, nó chỉ đơn giản là: 

window.location.origin
— Johhn
nguồn
7 
var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

Nhưng bạn không thể nói rằng basurl () của CodeIgniter (hoặc php j Joomla) sẽ trả về cùng một giá trị, vì có thể thay đổi basurl trong tệp .htaccess của các khung này.

Ví dụ :

Nếu bạn có tệp .htaccess như thế này trong localhost của bạn:

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 () sẽ trả về http: // localhost / CodeIgniter /

— KUMAR AKHIL
nguồn
6

Tôi đã gặp phải nhu cầu này trong một số dự án Joomla. Cách đơn giản nhất mà tôi tìm thấy để giải quyết là thêm trường nhập ẩn vào mẫu của mình:

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

Khi tôi cần giá trị trong JavaScript:

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

Không ưa thích như sử dụng JavaScript thuần túy nhưng đơn giản và hoàn thành công việc.

— Brian Bolli
nguồn
6

cách dễ nhất để lấy url cơ sở trong jQuery

window.location.origin
— Qaisar Malik
nguồn
Đây thực sự không phải là jQuery. jQuery trông như thế này: $ (location) .attr ("origin");
— Mauritz Hansen
3

Tôi muốn khuyên mọi người nên tạo thẻ cơ sở HTML trong quá trình phát triển, sau đó gán href động, vì vậy trong sản xuất bất kỳ máy chủ nào khách hàng sử dụng, nó sẽ tự động thêm vào nó:

<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>
 ...

Vì vậy, nếu bạn đang ở localhot: 8080, bạn sẽ tiếp cận mọi tệp được liên kết hoặc được tham chiếu từ cơ sở, ví dụ: http://localhost:8080/some/path/file.html Nếu bạn đang ở www.example.com, nó sẽ làhttp://www.example.com/some/path/file.html

Cũng lưu ý rằng, mọi vị trí bạn đang ở, bạn không nên sử dụng các tài liệu tham khảo như globs in hrefs, ví dụ: Vị trí của phụ huynh http://localhost:8080/không http://localhost:8080/some/path/.

Trước khi bạn tham chiếu tất cả các siêu liên kết là đã được kết án đầy đủ mà không có url cơ sở.

— cagcak
nguồn
3

Định dạng là tên máy chủ / tên đường dẫn / tìm kiếm

Vì vậy, url là: 

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

Đối với trường hợp của bạn 

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

Về cơ bản, basurl = hostname = window.location.hostname

— Ông Khirul Hồi giáo Omi
nguồn
3

Tôi ngạc nhiên khi không có câu trả lời nào xem xét url cơ sở nếu nó được đặt trong <base>thẻ. Tất cả các câu trả lời hiện tại cố gắng lấy tên máy chủ hoặc tên máy chủ hoặc phần đầu tiên của địa chỉ. Đây là logic hoàn chỉnh cũng xem xét <base>thẻ (có thể đề cập đến tên miền hoặc giao thức khác):

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

Định dạng Jquery:

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

Không liên quan đến logic ở trên, giải pháp tốc ký xem xét cả <base>thẻ và window.location.origin:

Js:

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

Câu hỏi:

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

Lưu ý cuối cùng: đối với một tệp cục bộ trong máy tính của bạn (không phải trên máy chủ), window.location.originchỉ trả về file://nhưng giải pháp sorthand ở trên trả về đường dẫn chính xác hoàn chỉnh.

— Ali Sheikhpour
nguồn
1
Đây không phải là cách tốt nhất. Ngoài ra, hãy xem câu trả lời của @ DaniilSamoylov, trong đó kết hợp <base>yếu tố này.
— Brad
baseURI trả về URL cơ sở của một nút vì vậy trong trường hợp này, nó trả về đường dẫn cơ sở + tên tài liệu. bạn sẽ cần thêm mã để xóa tên tài liệu khỏi URL đó. @Brad
— Ali Sheikhpour
Giải pháp này không trả lại URL cơ sở chính xác khi thư mục gốc của trang web nằm trong một thư mục con (ví dụ example.com/appRoot ). Nó chỉ hoạt động khi thư mục gốc của trang web được đặt trực tiếp trên thư mục gốc của webhost.
— Michael Hafner
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

gần giống như câu trả lời của Jenish nhưng ngắn hơn một chút.

— Mateen
nguồn
2

Tôi chỉ ở cùng một sân khấu và giải pháp này hiệu quả với tôi

Theo quan điểm

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

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

Trong tệp js bạn truy cập basenhư một biến ví dụ trong kịch bản của bạn:

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

Tôi không nhớ nơi tôi lấy thông tin này để cung cấp tín dụng, nếu tôi tìm thấy nó tôi sẽ chỉnh sửa câu trả lời

— Mario
nguồn
1 
var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— vikas Chaturvedi
nguồn
1
Vui lòng xem xét thêm một mô tả cho câu trả lời của bạn.
— Ma Kết
1

Đây là một cái gì đó nhanh chóng cũng hoạt động với file://các URL.

Tôi đã đưa ra một lót này:

[((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+"://")]
— Blubbll
nguồn
0

Bạn đã đề cập rằng example.comcó thể thay đổi vì vậy tôi nghi ngờ rằng thực sự bạn cần url cơ sở chỉ để có thể sử dụng ký hiệu đường dẫn tương đối cho tập lệnh của mình. Trong trường hợp cụ thể này, không cần sử dụng tập lệnh - thay vào đó hãy thêm thẻ cơ sở vào tiêu đề của bạn:

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

Tôi thường tạo liên kết thông qua PHP.

— Lục giác
nguồn
0

Trong trường hợp bất cứ ai cũng muốn thấy điều này được chia thành một chức năng rất mạnh mẽ

    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;
    }
— nuander
nguồn
Điều này chỉ cung cấp cho toàn bộ url. Không phải là một URL cơ sở.
— Sam
Thật vậy, không chắc chắn tôi đã đi đâu với điều đó. Từ lâu tôi đã chuyển sang cài đặt mã đó với mã phía máy chủ
— nuander
0

Dễ dàng 

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

Tạo một img với tên src trống buộc trình duyệt phải tự tính toán url cơ sở, bất kể bạn có /index.htmlhay bất cứ thứ gì khác.

— Grim
nguồn
Đây có vẻ là giải pháp tao nhã nhất trong tất cả và là giải pháp duy nhất không trùng lặp logic trình duyệt, rất hay. Tôi tự hỏi làm thế nào nó di động. Có bất cứ điều gì trong thông số kỹ thuật HTML sẽ đề nghị điều này được đảm bảo để hoạt động trong tất cả các trình duyệt không?
— Matthijs Kooijman
@MatthijsKooijman Phụ thuộc vào việc giải thích các thông số kỹ thuật html. Nếu bạn nói tên tệp có độ dài 0 là tên tài nguyên hợp lệ ... thì nó phù hợp với tất cả các trình duyệt.
— Grim
Hiểu cách trình duyệt được thực hiện. Bạn có một vài lập trình viên, mong muốn (gián tiếp) để xây dựng một trình duyệt. Nguồn đầu tiên của họ là thông số kỹ thuật html. Họ đọc thông số kỹ thuật và đây là một trong những câu hỏi mà họ thực sự muốn giải quyết. Làm thế nào bạn sẽ nghĩ rằng họ (tất cả) quyết định về trường hợp này?
— Grim
-2

Tách và tham gia URL:

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))
— cấp mặt trời
nguồn
-4

Đặt cái này trong tiêu đề của bạn, vì vậy nó sẽ có sẵn bất cứ khi nào bạn cần.

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

Bạn sẽ nhận được http://localhost:81/your-path-filehoặc http://localhost/your-path-file.

— Asrofil Al Banna
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.