@Rombomblue Bagaimana? Anda akan mendapatkannya about://. Namun, saya ingin tahu, untuk apa gunanya about:blank? Saya tidak yakin apakah ada browser yang menyuntikkan sumber daya plugin about:blank, tetapi sepertinya itu bisa menjadi satu-satunya kasus penggunaan.
Shef
3
Ini tidak berfungsi sama sekali jika Anda memiliki string URL, bukan? (yaitu Anda harus dilocation untuk ini bekerja)
Jawaban ini harus dipilih sebagai jawaban yang benar. Ini bersih dan menggunakan objek lokasi standar.
Mohit Gangrade
14
Tidak bisakah Anda menggunakan location.hostbukan location.hostname+ location.port?
c24w
180
Tidak satu pun dari jawaban ini yang tampaknya menjawab pertanyaan sepenuhnya, yang meminta url sewenang-wenang, tidak secara khusus url halaman saat ini.
Metode 1: Gunakan API URL (peringatan: tidak ada dukungan IE11)
Anda dapat menggunakan API URL (tidak didukung oleh IE11, tetapi tersedia di tempat lain ).
Ini juga memudahkan untuk mengakses params pencarian . Bonus lain: itu dapat digunakan dalam Pekerja Web karena tidak tergantung pada DOM.
Metode 2 (cara lama): Gunakan parser bawaan browser di DOM
Gunakan ini jika Anda memerlukan ini untuk bekerja di browser lama juga.
// Create an anchor element (note: no need to append this element to the document)const url = document.createElement('a');// Set href to any path
url.setAttribute('href','http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
Itu dia!
Parser bawaan browser sudah melakukan tugasnya. Sekarang Anda bisa mengambil bagian yang Anda butuhkan (perhatikan bahwa ini berfungsi untuk kedua metode di atas):
// Get any piece of the url you're interested in
url.hostname;// 'example.com'
url.port;// 12345
url.search;// '?startIndex=1&pageSize=10'
url.pathname;// '/blog/foo/bar'
url.protocol;// 'http:'
Bonus: Cari params
Kemungkinannya Anda mungkin ingin memecah params url pencarian juga, karena '? StartIndex = 1 & pageSize = 10' tidak terlalu bisa digunakan sendiri.
Jika Anda menggunakan Metode 1 (API URL) di atas, Anda cukup menggunakan getter searchParams:
link.protocol memberi saya "http:" jika saya memeriksa anker dengan "google.com" :-(var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
eXe
Apakah Anda melakukan itu pada httphalaman mungkin? Jika tidak ditentukan itu akan 'mewarisi' dari lokasi saat ini
Stijn de Witt
4
Ini adalah jawaban yang fantastis dan harus mendapatkan lebih banyak suara, karena jawaban ini tidak terbatas hanya pada lokasi saat ini tetapi berfungsi untuk url apa pun , dan karena jawaban ini menggunakan parser bawaan peramban alih-alih membangun sendiri (yang kami tidak bisa berharap untuk melakukannya juga atau secepatnya!).
Stijn de Witt
Terima kasih atas trik pintar ini! Saya ingin menambahkan satu hal: Ada keduanya hostdan hostname. Yang pertama termasuk port (misalnya localhost:3000), sedangkan yang terakhir hanya nama host (misalnya localhost).
codener
Ini berfungsi baik jika URL absolut. Gagal dalam hal Relative URL dan cross-browser. Ada saran?
Gururaj
133
Untuk beberapa alasan semua jawabannya adalah semua berlebihan. Ini yang dibutuhkan:
FYI, saya yakin ini akan menjadi hebat di masa depan ketika semua browser populer telah menerapkannya, namun , ini tidak terjadi pada saat ini: developer.mozilla.org/en-US/docs/Web/API/… Di saat menulis hanya versi terbaru dari Firefox dan browser WebKit mendukung properti asal menurut penelitian saya.
Halo dari 2015 .. sayangnya URLUtils masih belum diterapkan dengan benar di semua browser, menurut tabel kompatibilitas ini di MDN. Namun sepertinya properti asal sedikit lebih baik didukung daripada pada tahun 2013, itu masih tidak cocok untuk produksi karena tidak diterapkan dengan benar di Safari. Maaf guys :(
totallyNotLizards
Pembaruan: Masih tidak didukung untuk banyak peramban (safari juga) :( :(
Ahmad hamza
Itu tidak bekerja di IE juga, ia mengembalikan "tidak terdefinisi".
Siddhartha Chowdhury
53
Seperti yang telah disebutkan ada yang belum sepenuhnya didukung window.location.origintetapi alih-alih menggunakannya atau membuat variabel baru untuk digunakan, saya lebih memilih untuk memeriksanya dan jika tidak diatur untuk mengaturnya.
Ketika menambahkan jawaban ke pertanyaan yang lebih lama dengan jawaban yang ada, akan berguna untuk menjelaskan informasi baru apa yang dibawakan oleh jawaban Anda, dan untuk mengakui jika berlalunya waktu mempengaruhi jawaban.
Jason Aller
8
Memang, window.location.origin berfungsi dengan baik di browser mengikuti standar, tapi coba tebak. IE tidak mengikuti standar.
Jadi karena itu, inilah yang bekerja untuk saya di IE, FireFox dan Chrome:
var full = location.protocol+'//'+location.hostname+(location.port ?':'+location.port:'');
tetapi untuk kemungkinan peningkatan di masa depan yang dapat menyebabkan konflik, saya menentukan referensi "jendela" sebelum objek "lokasi".
var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ?':'+window.location.port:'');
pertimbangkan untuk menjelaskan jawaban Anda. Jangan menganggap OP dapat memahami arti penting dari berbagai bagian kode Anda.
ADyson
3
Coba gunakan ekspresi reguler (Regex), yang akan sangat berguna ketika Anda ingin memvalidasi / mengekstrak hal-hal atau bahkan melakukan parsing sederhana dalam javascript.
Regex adalah:
/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/
Demonstrasi:
function breakURL(url){
matches =/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);
foo =newArray();if(matches){for( i =1; i < matches.length ; i++){ foo.push(matches[i]);}}return foo
}
url ="https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"
breakURL(url);// [https, www.google.co.uk, 55699]
breakURL();// []
breakURL("asf");// []
breakURL("asd://");// []
breakURL("asd://a");// [asd, a, undefined]
"Skema URL RFC 3986 yang valid harus terdiri dari" huruf dan diikuti oleh kombinasi huruf, digit, plus ("+"), titik ("."), Atau tanda hubung ("-"). "- stackoverflow. com / a / 9142331/188833 (Berikut sebuah guci: ietf: rfc: 3897 (URI) / urn: ietf: rfc: 3897 (IRI) regex untuk skema: bagian dari URI / IRI dengan Python: github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147 )
Wes Turner
2
Jawaban sederhana yang berfungsi untuk semua browser:
Gaya ES6 dengan parameter yang dapat dikonfigurasi.
/**
* Get the current URL from `window` context object.
* Will return the fully qualified URL if neccessary:
* getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
* getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
* getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
*
* @param {boolean} [includeProtocol=true]
* @param {boolean} [removeTrailingSlash=false]
* @returns {string} The current base URL.
*/exportconst getCurrentBaseURL =(includeProtocol =true, removeTrailingSlash =false)=>{if(!window ||!window.location ||!window.location.hostname ||!window.location.protocol){
console.error(`The getCurrentBaseURL function must be called from a context in which window object exists.Yet, window is ${window}`,[window, window.location, window.location.hostname, window.location.protocol],)thrownewTypeError('Whole or part of window is not defined.')}const URL =`${includeProtocol ?`${window.location.protocol}//` : ''}${window.location.hostname}${
window.location.port ?`:${window.location.port}`:''}${removeTrailingSlash ?'':'/'}`// console.log(`The URL is ${URL}`)return URL
}
Jawaban:
pertama-tama dapatkan alamat saat ini
Kemudian parsing string itu
url Anda adalah:
Semoga ini membantu
sumber
location
objek tidak tersedia (js di luar browser!)location
) tetapi dapat digunakan untuk url apa pun . Lihat itu rapi.window.location.href.split('/').slice(0, 3).join('/')
sumber
about://
. Namun, saya ingin tahu, untuk apa gunanyaabout:blank
? Saya tidak yakin apakah ada browser yang menyuntikkan sumber daya pluginabout:blank
, tetapi sepertinya itu bisa menjadi satu-satunya kasus penggunaan.location
untuk ini bekerja)location.host
bukanlocation.hostname
+location.port
?Tidak satu pun dari jawaban ini yang tampaknya menjawab pertanyaan sepenuhnya, yang meminta url sewenang-wenang, tidak secara khusus url halaman saat ini.
Metode 1: Gunakan API URL (peringatan: tidak ada dukungan IE11)
Anda dapat menggunakan API URL (tidak didukung oleh IE11, tetapi tersedia di tempat lain ).
Ini juga memudahkan untuk mengakses params pencarian . Bonus lain: itu dapat digunakan dalam Pekerja Web karena tidak tergantung pada DOM.
Metode 2 (cara lama): Gunakan parser bawaan browser di DOM
Gunakan ini jika Anda memerlukan ini untuk bekerja di browser lama juga.
Itu dia!
Parser bawaan browser sudah melakukan tugasnya. Sekarang Anda bisa mengambil bagian yang Anda butuhkan (perhatikan bahwa ini berfungsi untuk kedua metode di atas):
Bonus: Cari params
Kemungkinannya Anda mungkin ingin memecah params url pencarian juga, karena '? StartIndex = 1 & pageSize = 10' tidak terlalu bisa digunakan sendiri.
Jika Anda menggunakan Metode 1 (API URL) di atas, Anda cukup menggunakan getter searchParams:
Atau untuk mendapatkan semua parameter:
Jika Anda menggunakan Metode 2 (cara lama), Anda dapat menggunakan sesuatu seperti ini:
sumber
var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
http
halaman mungkin? Jika tidak ditentukan itu akan 'mewarisi' dari lokasi saat inihost
danhostname
. Yang pertama termasuk port (misalnyalocalhost:3000
), sedangkan yang terakhir hanya nama host (misalnyalocalhost
).Untuk beberapa alasan semua jawabannya adalah semua berlebihan. Ini yang dibutuhkan:
Rincian lebih lanjut dapat ditemukan di sini: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties
sumber
URLUtils
antarmuka yang didefinisikan pada WHATWG dan termasukorigin
atribut.Seperti yang telah disebutkan ada yang belum sepenuhnya didukung
window.location.origin
tetapi alih-alih menggunakannya atau membuat variabel baru untuk digunakan, saya lebih memilih untuk memeriksanya dan jika tidak diatur untuk mengaturnya.Sebagai contoh;
Saya benar-benar menulis tentang ini beberapa bulan yang lalu Perbaikan untuk window.location.origin
sumber
window.location.origin
ada. Terima kasih. ^^tuan rumah
kembali
localhost:2679
nama host
kembali
localhost
sumber
localhost/
gantilocalhost:3000
.window.location.origin
akan cukup untuk mendapatkan yang sama.sumber
Ini berarti bahwa jika Anda ingin mendapatkan hanya bagian HTTP / HTTPS Anda dapat melakukan sesuatu seperti ini:
Untuk domain Anda dapat menggunakan:
Untuk port Anda dapat menggunakan:
Ingatlah bahwa port akan berupa string kosong jika tidak terlihat di URL. Sebagai contoh:
Jika Anda perlu menampilkan 80/443 saat Anda tidak menggunakan port
sumber
Mengapa tidak menggunakan:
sumber
Memang, window.location.origin berfungsi dengan baik di browser mengikuti standar, tapi coba tebak. IE tidak mengikuti standar.
Jadi karena itu, inilah yang bekerja untuk saya di IE, FireFox dan Chrome:
tetapi untuk kemungkinan peningkatan di masa depan yang dapat menyebabkan konflik, saya menentukan referensi "jendela" sebelum objek "lokasi".
sumber
Inilah solusi yang saya gunakan:
EDIT:
Untuk menambahkan kompatibilitas lintas-browser, gunakan yang berikut ini:
sumber
window.location.host
mungkin bukan peramban silang terbaiksumber
sumber
Coba gunakan ekspresi reguler (Regex), yang akan sangat berguna ketika Anda ingin memvalidasi / mengekstrak hal-hal atau bahkan melakukan parsing sederhana dalam javascript.
Regex adalah:
Demonstrasi:
Sekarang Anda dapat melakukan validasi juga.
sumber
Jawaban sederhana yang berfungsi untuk semua browser:
sumber
Gaya ES6 dengan parameter yang dapat dikonfigurasi.
sumber
window.location.protocol + '//' + window.location.host
sumber