Bagaimana cara mendapatkan url dasar dengan jquery atau javascript?

152

Di joomla php ada yang bisa saya gunakan $this->baseurluntuk mendapatkan path dasar, tapi saya ingin mendapatkan path dasar di jquery.

Path dasar mungkin salah satu dari contoh berikut:

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

The examplejuga dapat berubah.

javascript jquery Navin Rauniyar
sumber

duplikat yang mungkin dari Bagaimana cara mendapatkan path dasar di jQuery?

Mritunjay

@ Munjunjay Saya sudah melihat itu, tetapi dalam kasus saya path dasar berbeda karena saya ingin mendapatkan path dasar seperti di php yang kita lakukan di joomla

Navin Rauniyar

Jadi, tidak ada jawaban yang memecahkan masalah Anda?

Artjom B.

tolong pilih sebuah jawaban?

allanberry

177

Yang ini akan membantu Anda ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

Jenish
sumber

Ya itu berhasil! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)

vee

3

Ini tidak akan berfungsi dalam semua kasus, seperti yang ditunjukkan oleh entah bagaimana jawaban undervoted oleh @Artjom B. Misalnya, ketika sebuah situs diuji melalui jaringan lokal (dan domain diganti dengan jalur lokal IP +) url dasar dapat berupa sesuatu seperti 192.168.0.23/~sites/site/html/bukannya site.dev. Mendapatkan nama path lengkap dengan Javascript juga bukan pilihan, karena situs dapat memiliki sejumlah subdirektori virtual.

tentu saja

124

Saya pikir itu akan baik-baik saja untuk Anda

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );

Haris
sumber

7

Bagus pendek dan manis, terima kasih. window.location.origin

TetraDev

1

ini harus menjadi jawaban yang disukai, karena pendek, ringkas, dan berfungsi dengan baik.

Gregor

window.location.origin tidak didefinisikan dalam ie9

jnoreiga

1

@jnoreiga Siapa yang masih menggunakan ie9 ツ

Alexandre Daubricourt

2

Saya berharap

@AlexandreDaubricourt

30

Ini akan mendapatkan url dasar

var baseurl = window.location.origin+window.location.pathname;

Zaheer Babar
sumber

ini sama dengan window.location.href

Z. Khullah

8

itu tidak sama, pathname memberi Anda segmen path dari url, href berisi juga params kueri

dschulten

24

Ini adalah pertanyaan yang sangat lama, tetapi berikut adalah pendekatan yang saya gunakan secara pribadi ...

Dapatkan URL Standar / Basis

Seperti yang telah banyak dinyatakan, ini berfungsi untuk sebagian besar situasi.

var url = window.location.origin;

Dapatkan URL Basis Absolut

Namun, pendekatan sederhana ini dapat digunakan untuk menghilangkan nomor port apa pun.

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

Sunting: Untuk mengatasi masalah ini, yang diajukan oleh Jason Rice , berikut ini dapat digunakan untuk secara otomatis memasukkan jenis protokol yang benar ...

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

Setel URL Dasar

Sebagai bonus - URL dasar kemudian dapat didefinisikan ulang secara global.

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";

Dustin Halstead
sumber

1

Kecuali jika protokol Anda adalah sesuatu selain http seperti https (kemudian mengatur protokol url ke "http: //" akan menyajikan beberapa kesalahan yang sangat aneh tergantung pada bagaimana Anda ingin menggunakan url).

Jason Rice

13

Ini tidak mungkin dari javascript, karena ini adalah properti sisi server. Javascript pada klien tidak bisa tahu di mana joomla diinstal. Pilihan terbaik adalah entah bagaimana memasukkan nilai $this->baseurlke dalam javascript halaman dan kemudian gunakan nilai ini ( phpBaseUrl).

Anda kemudian dapat membuat url seperti ini:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;

Artjom B.
sumber

1

Catatan yang loc.hostmemiliki port, untuk menghasilkan url seperti http://localhost:8082/metode ini http://localhost:8082:8082/, window.location.hostnameharus digunakan sebagai gantinya.

Tiberiu C.

@TiberiuC. Terima kasih, ditambahkan.

Artjom B.

13

document.baseURIPengembalian URL dasar juga menghargai nilai dalam <base/>tag https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI

Daniil Samoylov
sumber

Ini juga mengembalikan hashbang, yang kemungkinan besar tidak seperti yang diinginkan OP

Marcel

8

Punya masalah yang sama beberapa waktu lalu, masalah saya adalah, saya hanya perlu url dasar. Ada banyak opsi terperinci di sini, tetapi untuk menyiasatinya, cukup gunakan window.locationobjek. Sebenarnya ketik ini di konsol browser dan tekan enter untuk memilih opsi Anda di sana. Yah untuk kasus saya itu hanya:

window.location.origin

Johhn
sumber

7

var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

Tetapi Anda tidak bisa mengatakan bahwa baseurl () dari CodeIgniter (atau php joomla) akan mengembalikan nilai yang sama, karena dimungkinkan untuk mengubah baseurl dalam file .htaccess dari kerangka kerja ini.

Sebagai contoh :

Jika Anda memiliki file .htaccess seperti ini di localhost Anda:

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 () akan mengembalikan http: // localhost / CodeIgniter /

AKHIL KUMAR
sumber

6

Saya mengalami kebutuhan ini pada beberapa proyek Joomla. Cara paling sederhana yang saya temukan untuk diatasi adalah dengan menambahkan bidang input tersembunyi ke template saya:

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

Ketika saya membutuhkan nilai dalam JavaScript:

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

Tidak semewah menggunakan JavaScript murni tetapi sederhana dan menyelesaikan pekerjaan.

Brian Bolli
sumber

6

cara termudah untuk mendapatkan url dasar di jQuery

window.location.origin

Qaisar Malik
sumber

Ini sebenarnya bukan jQuery. jQuery terlihat seperti ini: $ (lokasi) .attr ("asal");

Mauritz Hansen

3

Saya akan merekomendasikan bagi semua orang untuk membuat tag dasar HTML dalam pengembangan, kemudian menetapkan href secara dinamis, jadi dalam produksi apa pun host yang digunakan klien, ia akan secara otomatis menambahkannya:

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

Jadi jika Anda berada di localhot: 8080, Anda akan menjangkau setiap file yang tertaut atau direferensikan dari pangkalan, misalnya: http://localhost:8080/some/path/file.html Jika Anda berada di www.example.com, itu akan menjadihttp://www.example.com/some/path/file.html

Juga mencatat bahwa, setiap lokasi Anda, Anda tidak harus menggunakan referensi seperti gumpalan di href, misalnya: lokasi Parent menyebabkan http://localhost:8080/tidak http://localhost:8080/some/path/.

Berpura-pura Anda merujuk semua hyperlink sebagai hukuman penuh tanpa url bas.

cagcak
sumber

3

Formatnya adalah nama host / pathname / pencarian

Jadi urlnya adalah:

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

Untuk kasusmu

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

Jadi pada dasarnya baseurl = hostname = window.location.hostname

Md. Khirul Islam Omi
sumber

3

Saya terkejut bahwa tidak ada jawaban yang mempertimbangkan url dasar jika disetel dalam <base>tag. Semua jawaban saat ini mencoba untuk mendapatkan nama host atau nama server atau bagian pertama dari alamat. Ini adalah logika lengkap yang juga mempertimbangkan <base>tag (yang dapat merujuk ke domain atau protokol lain):

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

Format jquery:

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

Tanpa terlibat dengan logika di atas, solusi singkatan yang mempertimbangkan <base>tag dan window.location.origin:

Js:

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

Jquery:

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

Catatan akhir: untuk file lokal di komputer Anda (bukan pada host) window.location.originhanya mengembalikan file://tetapi solusi sorthand di atas mengembalikan jalur yang benar lengkap.

Ali Sheikhpour
sumber

1

Ini bukan cara terbaik. Juga, lihat jawaban @ DaniilSamoylov, yang menggabungkan <base>elemen.

Brad

baseURI mengembalikan URL dasar sebuah node sehingga dalam kasus ini ia mengembalikan path dasar + nama dokumen. Anda akan memerlukan lebih banyak kode untuk menghapus nama dokumen dari URL itu. @Brad

Ali Sheikhpour

Solusi ini tidak memberikan kembali URL basis yang benar ketika direktori root dari halaman web berada dalam sub direktori (misalnya example.com/appRoot ). Ini hanya berfungsi ketika direktori root dari halaman web secara langsung terletak di root webhost.

Michael Hafner

2

window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

hampir sama dengan jawaban Jenish tetapi sedikit lebih pendek.

Mateen
sumber

2

Saya hanya pada tahap yang sama dan solusi ini berhasil untuk saya

Dalam tampilan

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

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

Dalam file js Anda mengakses basesebagai variabel misalnya dalam skenario Anda:

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

Saya tidak ingat di mana saya mengambil informasi ini untuk memberikan kredit, jika saya menemukannya saya akan mengedit jawabannya

Mario
sumber

1

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

vikas Chaturvedi
sumber

1

Silakan pertimbangkan untuk menambahkan deskripsi ke jawaban Anda.

Capricorn

1

Ini adalah sesuatu yang cepat yang juga berfungsi dengan file://URL.

Saya datang dengan satu kalimat ini:

[((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
sumber

0

Anda menyebutkan bahwa example.commungkin berubah jadi saya menduga bahwa sebenarnya Anda memerlukan url dasar hanya untuk dapat menggunakan notasi jalur relatif untuk skrip Anda. Dalam kasus khusus ini tidak perlu menggunakan skrip - alih-alih tambahkan tag dasar ke header Anda:

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

Saya biasanya menghasilkan tautan melalui PHP.

Hexodus
sumber

0

Seandainya ada orang yang ingin melihat ini pecah menjadi fungsi yang sangat kuat

    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
sumber

Ini hanya memberikan seluruh url. Bukan URL dasar.

Sam

memang, tidak yakin ke mana saya akan pergi dengan itu. Saya sudah lama beralih ke pengaturan itu dengan kode sisi server

nuander

0

Mudah

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

Menghasilkan img dengan nama src kosong memaksa browser untuk menghitung sendiri basis-url, tidak peduli apakah Anda punya /index.htmlatau apa pun.

Suram
sumber

Ini tampaknya solusi paling elegan dari semua dan satu-satunya yang tidak menggandakan logika peramban, yang bagus. Saya bertanya-tanya seberapa portabel itu. Apakah ada sesuatu dalam spesifikasi HTML yang menyarankan ini dijamin berfungsi di semua browser?

Matthijs Kooijman

@MatthijsKooijman Tergantung pada interpretasi spesifikasi html. Jika Anda mengatakan nama file dengan panjang 0 adalah nama sumber daya yang valid ... itu cocok dengan semua browser.

Grim

Pahami bagaimana browser dibuat. Anda memiliki beberapa programmer, yang (tidak langsung) ingin membangun browser. Sumber pertama mereka adalah spesifikasi html. Mereka membaca spesifikasi dan ini adalah salah satu pertanyaan yang mereka benar-benar ingin pecahkan. Bagaimana menurut Anda mereka (semua) memutuskan keadaan ini?

Grim

-2

Pisahkan dan gabungkan URL:

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))

berikan matahari
sumber

-4

Letakkan ini di tajuk Anda, sehingga akan tersedia kapan pun Anda membutuhkannya.

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

Anda akan mendapatkan http://localhost:81/your-path-fileatau http://localhost/your-path-file.

Asrofil Al Banna
sumber

Bagaimana cara mendapatkan url dasar dengan jquery atau javascript?

Jawaban:

Dapatkan URL Standar / Basis

Dapatkan URL Basis Absolut

Setel URL Dasar