รับ URL ปัจจุบันด้วย jQuery หรือไม่


1829

ฉันใช้ jQuery ฉันจะรับเส้นทางของ URL ปัจจุบันและกำหนดให้กับตัวแปรได้อย่างไร

URL ตัวอย่าง:

http://localhost/menuname.de?foo=bar&number=0

1
คุณสามารถดูได้ที่tech-blog.maddyzone.com/javascript/…
Rituraj ratan

4
ฉันคิดว่าคำถามควรได้รับการคืนค่าเพื่อขอ jQuery เนื่องจากมีคำตอบสำหรับเรื่องนั้นโดยไม่คำนึงว่าจำเป็นต้องใช้ jQuery เพื่อทำงานให้สำเร็จหรือไม่
goodeye

1
ซ้ำกันเป็นไปได้ของรับURL ปัจจุบันด้วย JavaScript?
vimal1083

3
@ goodeye ไม่ไม่มีวิธี jQuery ในการรับตำแหน่ง; เป็นของตัวติดตามบั๊ก jQuery: »อาจทำงานได้ แต่ไม่รองรับหรือบันทึกไว้ เพียงใช้ document.location.href ซึ่งเร็วกว่าง่ายกว่าและเข้าใจง่ายกว่า«ในคำอื่น ๆ บางคนใช้ jQuery เพื่อรับตำแหน่ง แต่พวกเขาอาศัยบั๊ก โปรดดู: bugs.jquery.com/ticket/7858
feeela

คำตอบ:


2520

ในการรับเส้นทางคุณสามารถใช้:

var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)

79
คุณสมบัติของวัตถุตำแหน่ง: developer.mozilla.org/en/DOM/window.location
bentford

100
ห่างไกลจากการฆ่ามัน jQuery ได้มอบ Javascript ให้กับชีวิตใหม่ โปรแกรมเมอร์ C # / Java ใหม่เข้าใจตัวชี้หรือไม่? เลขที่พวกเขาต้องการ? ไม่เลยบทคัดย่อที่ใหม่กว่ามีพลังมากพอที่จะไม่สำคัญ ..
เนื้อ

199
"ฉันจะทำ XYZ ใน jQuery ได้อย่างไร" และคำตอบก็คือจาวาสคริปต์ธรรมดา ๆ คุณอาจรู้วิธีการทำบางสิ่งในจาวาสคริปต์ธรรมดา อย่างไรก็ตามเนื่องจากเบราว์เซอร์ไม่สอดคล้องกันคุณอาจต้องการใช้วิธี "jQuery" ฉันจำ pre-jQuery หรือ framework ฉันจะตรวจสอบเบราว์เซอร์ก่อนจากนั้นทำสิ่งที่ฉันต้องการในหลายวิธี jQuery กำลังฆ่า js ธรรมดา ๆ ... ใช่ขอบคุณพระเจ้า แต่มันก็ทำให้ใช้งานได้เช่นกัน
Parris

9
วิธีนี้ใช้ไม่ได้กับ URL แบบเต็ม ตัวอย่างเช่น. สำหรับ " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " สิ่งนี้จะส่งคืน / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname รับค่า URL เป็น "?" เท่านั้น และไม่ได้รับพารามิเตอร์คิวรีตามที่ถามในคำถาม
johnt Entrepreneur

816

ในสไตล์ jQuery บริสุทธิ์:

$(location).attr('href');

วัตถุที่ตั้งยังมีคุณสมบัติอื่น ๆ เช่นโฮสต์, แฮ, โปรโตคอลและชื่อพา ธ


52
เห็นได้ชัดว่าการใช้ $ (สถานที่) ใน jQuery ไม่ได้รับการสนับสนุนและแนะนำจาก: bugs.jquery.com/ticket/7858
ปีเตอร์

10
@Peter Bug ปิดใช้งานไม่ถูกต้อง
kevinji

21
@ mc10: ส่วน "ไม่ถูกต้อง" ใช้กับคำขอเพื่อสนับสนุน $ (ตำแหน่ง); สิ่งนี้ไม่ควรใช้
ปีเตอร์

6
คำตอบนี้ไม่จำเป็นและคำถามและคำตอบสามารถอัปเดตเพื่อไม่ให้ใช้ jquery เหตุผลสามารถพบได้ที่นี่bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HalalanDobrev: คุณไม่ควรทำ.attr()ในสถานที่ (1) มันไม่ใช่องค์ประกอบดังนั้นจึง$(location)ร่มรื่นที่สุดและ (2) แม้ว่าจะใช้งานได้ดีคุณควรใช้.prop()เพื่อรับคุณสมบัติ .attr()ใช้สำหรับแอตทริบิวต์ HTML
cHao

471
http://www.refulz.com:8082/index.php#tab2?foo=789

Property    Result
------------------------------------------
host        www.refulz.com:8082
hostname    www.refulz.com
port        8082
protocol    http:
pathname    index.php
href        http://www.refulz.com:8082/index.php#tab2
hash        #tab2
search      ?foo=789

var x = $(location).attr('<property>');

สิ่งนี้จะใช้ได้ก็ต่อเมื่อคุณมี jQuery ตัวอย่างเช่น:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
  $(location).attr('href');      // http://www.refulz.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

13
มันเป็นคำอธิบายเดียวกับที่ก่อนหน้านี้ แต่มีองค์ประกอบทั้งหมดของวัตถุ คำตอบที่ดี
Oskar Calvo

4
ควร/index.phpแทนindex.phpชื่อพา ธ
Andrea


2
อ้างอิงจากbugs.jquery.com/ticket/7858สิ่งนี้ใช้ได้เฉพาะเมื่อเกิดอุบัติเหตุเท่านั้น นอกจากนี้attrควรใช้กับวัตถุ DOM เท่านั้นสำหรับสิ่งที่สามารถตั้งค่าได้โดยใช้แอตทริบิวต์ HTML
MauganRa

69

หากคุณต้องการพารามิเตอร์แฮชที่มีอยู่ใน URL window.location.hrefอาจเป็นตัวเลือกที่ดีกว่า

window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

3
หากมีคนต้องการเพียงแฮชแท็กเท่านั้นที่สามารถเรียก window.location.href
Amit Patel

15
ฉันคิดว่า @AmitPatel หมายถึงwindow.location.hash
ptim

53

คุณจะต้องใช้window.locationวัตถุในตัวของ JavaScript


3
สิ่งนี้จะไม่ส่งคืนรายการหลังจาก '?' ในสถานที่
Majid

@majidgeek ใช้งานได้สำหรับฉันใน Firefox, Chrome และ IE คุณสามารถให้กรณีทดสอบการทำลายครั้งนี้ได้หรือไม่?
บาร์นีย์

3
สามารถยืนยันอย่างน้อยในคอนโซลที่window.location.pathnameไม่สามารถเรียกคืนสิ่งใดได้หลังจาก?
worc

45

เพียงแค่เพิ่มฟังก์ชั่นนี้ใน JavaScript และมันจะคืนค่าเส้นทางสัมบูรณ์ของเส้นทางปัจจุบัน

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

ฉันหวังว่ามันจะเหมาะกับคุณ


1
สิ่งนี้ช่วยได้ดีมากสำหรับสคริปต์ที่ฉันขี้เกียจมี URL ฐานที่เข้ารหัสยากอยู่ ฉันไม่ต้องการให้มีการต่อท้าย '/' บนรากและสอดเข้าไปในเส้นทางดังนั้นฉันเพิ่งสร้างบรรทัดที่สองvar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location เป็นวัตถุในจาวาสคริปต์ ส่งคืนข้อมูลต่อไปนี้

window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

ใน jquery คุณสามารถใช้

$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

1
แล้วwindo.location.originไงล่ะ
Ali Sheikhpour

30

นี่เป็นปัญหาที่ซับซ้อนกว่าที่หลายคนคิด เบราว์เซอร์หลายสนับสนุนพารามิเตอร์ในตัววัตถุที่ตั้งของ JavaScript และที่เกี่ยวข้อง / วิธีการผ่านเข้าถึงหรือwindow.location document.locationอย่างไรก็ตามรสชาติที่แตกต่างของ Internet Explorer (6,7) ไม่รองรับวิธีการเหล่านี้ในลักษณะเดียวกัน ( window.location.href? window.location.replace()ไม่สนับสนุน) เพื่อให้คุณได้เข้าถึงพวกเขาแตกต่างจากการเขียนโค้ดเงื่อนไขตลอดเวลาเพื่อมือถือ Internet Explorer

ดังนั้นถ้าคุณมี jQuery และโหลดแล้วคุณอาจใช้ jQuery (ตำแหน่ง) ตามที่คนอื่นพูดถึงเพราะช่วยแก้ไขปัญหาเหล่านี้ได้ หากคุณกำลังทำการเปลี่ยนเส้นทางตำแหน่งทางภูมิศาสตร์ฝั่งไคลเอ็นต์ผ่านทาง JavaScript (นั่นคือการใช้ Google Maps API และวิธีการวัตถุตำแหน่ง) ดังนั้นคุณอาจไม่ต้องการโหลดไลบรารี jQuery ทั้งหมดและเขียนรหัสเงื่อนไขของคุณที่ ตรวจสอบทุกรุ่นของ Internet Explorer / Firefox / ฯลฯ

Internet Explorer ทำให้การเข้ารหัสแบบ front-end ไม่มีความสุข แต่ jQuery เป็นแผ่นนม


Additionaly: bugs.jquery.com/ticket/8138 ในแหล่ง jQuery 1.8.0 มีข้อคิดเห็น: // # 8138, IE อาจส่งข้อยกเว้นเมื่อเข้าถึง // เขตข้อมูลจาก window.location หาก document.domain ได้รับการตั้งค่า
ม.ค. Święcki


24

java-script จัดเตรียมวิธีการมากมายเพื่อดึง URL ปัจจุบันซึ่งแสดงในแถบที่อยู่ของเบราว์เซอร์

URL ทดสอบ:

http://
stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762
?
rq=1&page=2&tab=active&answertab=votes
#
32942762
resourceAddress.hash();
console.log('URL Object ', webAddress);
console.log('Parameters ', param_values);

ฟังก์ชั่น:

var webAddress = {};
var param_values = {};
var protocol = '';
var resourceAddress = {

    fullAddress : function () {
        var addressBar = window.location.href;
        if ( addressBar != '' && addressBar != 'undefined') {
            webAddress[ 'href' ] = addressBar;
        }
    },
    protocol_identifier : function () { resourceAddress.fullAddress();

        protocol = window.location.protocol.replace(':', '');
        if ( protocol != '' && protocol != 'undefined') {
            webAddress[ 'protocol' ] = protocol;
        }
    },
    domain : function () {      resourceAddress.protocol_identifier();

        var domain = window.location.hostname;
        if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') {
            webAddress[ 'domain' ] = domain;
            var port = window.location.port;
            if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') {
                if(protocol == 'http') port = '80';
                if(protocol == 'https') port = '443';           
            }
            webAddress[ 'port' ] = port;
        }
    },
    pathname : function () {        resourceAddress.domain();

        var resourcePath = window.location.pathname;
        if ( resourcePath != '' && resourcePath != 'undefined') {
            webAddress[ 'resourcePath' ] = resourcePath;
        }
    },
    params : function () {      resourceAddress.pathname();

        var v_args = location.search.substring(1).split("&");

        if ( v_args != '' && v_args != 'undefined')
        for (var i = 0; i < v_args.length; i++) {
            var pair = v_args[i].split("=");

            if ( typeOfVar( pair ) === 'array' ) {
                param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
            }
        }
        webAddress[ 'params' ] = param_values;
    },
    hash : function () {        resourceAddress.params();

        var fragment = window.location.hash.substring(1);
        if ( fragment != '' && fragment != 'undefined')
            webAddress[ 'hash' ] = fragment;        
    }
};
function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
  • โปรโตคอล« เว็บเบราว์เซอร์ใช้ Internet Protocol โดยทำตามกฎบางประการสำหรับการสื่อสารระหว่าง WebHosted Applications และ Web Client (เบราว์เซอร์) (http = 80 , https (SSL) = 443 , ftp = 21, เป็นต้น)

EX: ด้วยหมายเลขพอร์ตเริ่มต้น

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) « Host เป็นชื่อที่มอบให้กับ end-point (เครื่องที่ทรัพยากรใช้งาน) บนอินเทอร์เน็ต www.stackoverflow.com - ที่อยู่ IP DNSของแอปพลิเคชัน (OR) localhost: 8080 - localhost

ชื่อโดเมนที่คุณลงทะเบียนโดยกฎและขั้นตอนของทรีระบบชื่อโดเมน (DNS) เซิร์ฟเวอร์ DNS ของบุคคลที่จัดการโดเมนของคุณด้วยที่อยู่ IP เพื่อระบุที่อยู่ ในลำดับชั้นของเซิร์ฟเวอร์ DNS ชื่อรูทของ stackoverlfow.com คือ com

gTLDs      - com « stackoverflow (OR) in « co « google

ระบบโลคัลคุณต้องบำรุงรักษาโดเมนที่ไม่ได้เป็นสาธารณะในไฟล์โฮสต์ localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «พา ธ ให้ข้อมูลเกี่ยวกับทรัพยากรเฉพาะภายในโฮสต์ที่เว็บไคลเอ็นต์ต้องการเข้าถึง
  • (?) «ข้อความค้นหาที่เป็นทางเลือกคือการส่งลำดับของคู่ของ attribute - value ที่คั่นด้วยตัวคั่น (&)
  • (#) «ชิ้นส่วนเพิ่มเติมมักจะเป็นคุณลักษณะ id ขององค์ประกอบเฉพาะและเว็บเบราว์เซอร์จะเลื่อนองค์ประกอบนี้ไปดู

หากพารามิเตอร์มียุค ?date=1467708674แล้วใช้

var epochDate = 1467708674; var date = new Date( epochDate );

URL ป้อนคำอธิบายรูปภาพที่นี่


URL การตรวจสอบสิทธิ์ด้วยชื่อผู้ใช้: รหัสผ่าน, หากชื่อผู้ใช้ / รหัสผ่านมีสัญลักษณ์ @
เช่น:

Username = `my_email@gmail`
Password = `Yash@777`

จากนั้นคุณต้อง URL เข้ารหัสเป็น@ โปรดดูรายละเอียด ...%40

http://my_email%40gmail.com:Yash%40777@www.my_site.com

encodeURI()(vs) encodeURIComponent()ตัวอย่าง

var testURL = "http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762";

var Uri = "/:@?&=,#", UriComponent = "$;+", Unescaped = "(-_.!~*')"; // Fixed
var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped);
var encodeURIComponent_Str =  encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped );
console.log(encodeURI_Str, '\n', encodeURIComponent_Str);
/*
 /:@?&=,# +$; (-_.!~*') 
 %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*')
*/


19

คุณสามารถบันทึก window.location และดูตัวเลือกทั้งหมดเพียงใช้ URL:

window.location.origin

สำหรับการใช้เส้นทางทั้งหมด:

window.location.href

นอกจากนี้ยังมีที่ตั้ง _ _

.host
.hostname
.protocol
.pathname

ไม่ควรใช้งานเนื่องจาก location.origin ไม่สามารถใช้งานได้ใน Internet Explorer
Jacek Kolasa


13

หากมีใครบางคนที่ต้องการเชื่อมโยงURLและแท็กแฮชให้รวมสองฟังก์ชัน:

var pathname = window.location.pathname + document.location.hash;

ในการชี้แจง: คุณไม่จำเป็นต้องใช้ jQuery เลยฟังก์ชั่น javascript ข้างต้นจะส่งคืนสิ่งที่ OP ต้องการ
GHC


12

คุณสามารถหาพา ธ ของคุณโดยใช้ js เองwindow.locationหรือlocationจะให้เป้าหมายของ URL ปัจจุบันแก่คุณ

console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);



11

ในการรับ URL ของหน้าต่างพาเรนต์จากภายใน iframe:

$(window.parent.location).attr('href');

NB: ใช้งานได้ในโดเมนเดียวกันเท่านั้น


11

นี่คือตัวอย่างเพื่อรับ URL ปัจจุบันโดยใช้ jQuery และ JavaScript:

$(document).ready(function() {

    //jQuery
    $(location).attr('href');

    //Pure JavaScript
    var pathname = window.location.pathname;

    // To show it in an alert window
    alert(window.location);
});


$.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){
    //alert(json.message);
});

10

ต่อไปนี้เป็นตัวอย่างของตัวอย่างโค้ดที่มีประโยชน์ที่สามารถใช้ได้ - ตัวอย่างบางส่วนใช้ฟังก์ชัน JavaScript มาตรฐานและไม่เฉพาะเจาะจงกับ jQuery:

ดู8 ตัวอย่าง jQuery เป็นประโยชน์สำหรับ URL ของ & Querystrings



9

window.locationจะให้ URLปัจจุบันแก่คุณและคุณสามารถแยกสิ่งที่คุณต้องการได้ ...



8

หากคุณต้องการเส้นทางของเว็บไซต์รูทให้ใช้สิ่งนี้:

$(location).attr('href').replace($(location).attr('pathname'),'');

1
จะไม่เป็นอย่างนั้น.replace('#.*', '')หรือ ลบไม่เพียง แต่เครื่องหมายแฮช แต่ทุกอย่างหลังจากนั้นเช่นกัน
Jonas Kölker



8

เบราว์เซอร์ทั้งหมดรองรับวัตถุหน้าต่าง Javascript มันกำหนดหน้าต่างของเบราว์เซอร์

วัตถุและฟังก์ชั่นระดับโลกกลายเป็นส่วนหนึ่งของวัตถุหน้าต่างโดยอัตโนมัติ

ตัวแปรโกลบอลทั้งหมดคือคุณสมบัติวัตถุหน้าต่างและฟังก์ชันโกลบอลทั้งหมดเป็นเมธอด

เอกสาร HTML ทั้งหมดเป็นคุณสมบัติของหน้าต่างด้วย

ดังนั้นคุณสามารถใช้วัตถุ window.location เพื่อรับคุณลักษณะที่เกี่ยวข้องกับ url ทั้งหมด

จาวาสคริ

console.log(window.location.host);     //returns host
console.log(window.location.hostname);    //returns hostname
console.log(window.location.pathname);         //return path
console.log(window.location.href);       //returns full current url
console.log(window.location.port);         //returns the port
console.log(window.location.protocol)     //returns the protocol

JQuery

console.log("host = "+$(location).attr('host'));
console.log("hostname = "+$(location).attr('hostname'));
console.log("pathname = "+$(location).attr('pathname')); 
console.log("href = "+$(location).attr('href'));   
console.log("port = "+$(location).attr('port'));   
console.log("protocol = "+$(location).attr('protocol'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


1
ฉันเห็นlocation.pathnameว่าคุณกำลังใช้location.path- คำตอบนี้จำเป็นต้องได้รับการปรับปรุงหรือไม่?
Edward

@Edward Updated
Sumesh TG



4

ใน jstl เราสามารถเข้าถึงเส้นทาง url ปัจจุบันโดยใช้pageContext.request.contextPath, ถ้าคุณต้องการโทร ajax,

  url = "${pageContext.request.contextPath}" + "/controller/path"

เช่นในหน้าhttp://stackoverflow.com/questions/406192นี้จะให้http://stackoverflow.com/controller/path

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.