วิธีรับ URL พื้นฐานด้วย jquery หรือ javascript

152

ใน Joomla มี php ฉันสามารถใช้$this->baseurlเพื่อรับเส้นทางฐาน แต่ฉันต้องการได้รับเส้นทางฐานใน jquery

เส้นทางพื้นฐานอาจเป็นตัวอย่างใด ๆ ต่อไปนี้:

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

exampleยังอาจมีการเปลี่ยนแปลง

javascript jquery

— Navin Rauniyar
แหล่งที่มา

เป็นไปได้ที่ซ้ำกันของวิธีการรับเส้นทางพื้นฐานใน jQuery?

— Mritunjay

@Mritunjay ฉันเห็นแล้ว แต่ในกรณีของฉันเส้นทางพื้นฐานแตกต่างกันตามที่ฉันต้องการได้รับเส้นทางพื้นฐานเช่นใน php ที่เราทำใน joomla

— Navin Rauniyar

ดังนั้นไม่มีคำตอบที่แก้ปัญหาของคุณ?

— Artjom B.

เลือกคำตอบได้ไหม

— allanberry

177

อันนี้จะช่วยคุณ ...

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

— Jenish
แหล่งที่มา

ใช่มันใช้งานได้! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)

— วี

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( '/' );

— Haris
แหล่งที่มา

7

ดีสั้นและหวานขอบคุณ window.location.origin

— TetraDev

1

นี่ควรเป็นคำตอบที่ต้องการเนื่องจากสั้นกระชับและทำงานได้ดี

— Gregor

window.location.origin ไม่ได้กำหนดไว้ใน ie9

— jnoreiga

1

@jnoreiga ใครยังใช้ ie9 ツ

— Alexandre Daubricourt

2

ฉันหวังว่ามันจะเป็นแบบง่ายๆ @AlexandreDaubricourt

— jnoreiga

30

สิ่งนี้จะได้รับ URL พื้นฐาน

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

— Zaheer Babar
แหล่งที่มา

นี่เป็นเหมือน window.location.href

— Z. Khullah

8

มันไม่เหมือนกันชื่อพา ธ จะให้เซ็กเมนต์เส้นทางของ url, href มี params ของแบบสอบถามด้วย

— 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 + "' />";

— ดัสติน Halstead
แหล่งที่มา

1

ยกเว้นว่าโปรโตคอลของคุณเป็นสิ่งอื่นที่ไม่ใช่ http เช่น https (จากนั้นให้ตั้งค่าโปรโตคอล url เป็น "http: //" จะแสดงข้อผิดพลาดแปลก ๆ ขึ้นอยู่กับวิธีที่คุณต้องการใช้ URL)

— เจสันไรซ์

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.

@TiberiuC ขอขอบคุณเพิ่ม

— Artjom B.

13

document.baseURIส่งคืน URL ฐานยังเคารพค่าใน<base/>แท็ก https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI

— Daniil Samoylov
แหล่งที่มา

สิ่งนี้จะส่งคืน hashbang ซึ่งอาจไม่ใช่สิ่งที่ OP ต้องการ

— Marcel

8

มีปัญหาเดียวกันเมื่อไม่นานมานี้ปัญหาของฉันคือฉันต้องการ URL พื้นฐาน มีตัวเลือกรายละเอียดมากมายที่นี่ แต่หากต้องการหลีกเลี่ยงสิ่งนี้เพียงใช้window.locationวัตถุ พิมพ์สิ่งนี้ลงในคอนโซลของเบราว์เซอร์แล้วกด Enter เพื่อเลือกตัวเลือกของคุณที่นั่น สำหรับกรณีของฉันมันเป็นเพียง:

window.location.origin

— Johhn
แหล่งที่มา

7

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

แต่คุณไม่สามารถพูดได้ว่า baseurl () ของ CodeIgniter (หรือ php joomla) จะส่งกลับค่าเดียวกันเนื่องจากเป็นไปได้ที่จะเปลี่ยน baseurl ในไฟล์. htaccess ของเฟรมเวิร์กเหล่านี้

ตัวอย่างเช่น :

หากคุณมีไฟล์. htaccess เช่นนี้ใน localhost ของคุณ:

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 /

— AKHIL KUMAR
แหล่งที่มา

6

ฉันต้องใช้ความต้องการนี้ในหลายโครงการ Joomla วิธีที่ง่ายที่สุดที่ฉันพบที่อยู่คือการเพิ่มช่องอินพุตที่ซ่อนอยู่ในแม่แบบของฉัน:

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

เมื่อฉันต้องการค่าใน JavaScript:

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

ไม่แฟนซีเท่าการใช้ JavaScript บริสุทธิ์ แต่ใช้งานง่ายและทำงานให้เสร็จลุล่วง

— Brian Bolli
แหล่งที่มา

6

วิธีที่ง่ายที่สุดในการรับ URL พื้นฐานใน jQuery

window.location.origin

— Qaisar Malik
แหล่งที่มา

นี่ไม่ใช่ jQuery jQuery มีลักษณะเช่นนี้: $ (ตำแหน่ง) .attr ("จุดเริ่มต้น");

— 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

โปรดทราบว่าทุกตำแหน่งที่คุณเปิดอยู่คุณไม่ควรใช้การอ้างอิงเช่น globs เป็น hrefs เช่น: ตำแหน่งหลักhttp://localhost:8080/ไม่ได้ทำให้เกิดhttp://localhost:8080/some/path/ไม่ได้

อ้างว่าคุณอ้างอิงการเชื่อมโยงหลายมิติทั้งหมดเป็นความผิดโดยไม่มี URL ฐาน

— cagcak
แหล่งที่มา

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

— Md. Khirul Islam Omi
แหล่งที่มา

3

ฉันประหลาดใจที่ไม่ใช่คำตอบที่พิจารณา URL พื้นฐานถ้ามันถูกตั้งค่าใน<base>แท็ก คำตอบปัจจุบันทั้งหมดพยายามรับชื่อโฮสต์หรือชื่อเซิร์ฟเวอร์หรือส่วนแรกของที่อยู่ นี่คือตรรกะที่สมบูรณ์ซึ่งยังพิจารณา<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://แต่โซลูชัน sorthand ด้านบนจะส่งคืนพา ธ ที่ถูกต้องสมบูรณ์

— Ali Sheikhpour
แหล่งที่มา

1

นี่ไม่ใช่วิธีที่ดีที่สุด ดูคำตอบของ @ DaniilSamoylov ซึ่งรวม<base>องค์ประกอบไว้ด้วย

— แบรด

baseURI ส่งคืน URL ฐานของโหนดดังนั้นในกรณีนี้จะส่งคืนพา ธ ฐาน + ชื่อเอกสาร คุณจะต้องใช้รหัสเพิ่มเติมเพื่อลบชื่อเอกสารจาก URL นั้น @Brad

— Ali Sheikhpour

วิธีนี้ไม่ได้ให้ URL พื้นฐานที่ถูกต้องกลับมาเมื่อไดเรกทอรีรูทของเว็บเพจอยู่ในไดเรกทอรีย่อย (เช่นexample.com/appRoot ) ใช้งานได้เฉพาะเมื่อรูต dir ของเว็บเพจตั้งอยู่บนรูทของเว็บโฮสต์โดยตรง

— Michael Hafner

2

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

เกือบเหมือนกับคำตอบ Jenish แต่สั้นกว่าเล็กน้อย

— Mateen
แหล่งที่มา

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

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

— vikas Chaturvedi
แหล่งที่มา

1

โปรดพิจารณาเพิ่มคำอธิบายลงในคำตอบของคุณ

— ราศีมังกร

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+"://")]

— Blubbll
แหล่งที่มา

0

คุณพูดถึงว่าexample.comอาจมีการเปลี่ยนแปลงดังนั้นฉันสงสัยว่าจริง ๆ แล้วคุณต้องการ URL พื้นฐานเพียงเพื่อให้สามารถใช้สัญกรณ์เส้นทางญาติสำหรับสคริปต์ของคุณ ในกรณีนี้ไม่จำเป็นต้องใช้สคริปต์ - เพิ่มแท็กฐานลงในส่วนหัวของคุณแทน:

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

ฉันมักจะสร้างลิงค์ผ่าน PHP

— Hexodus
แหล่งที่มา

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;
    }

— nuander
แหล่งที่มา

สิ่งนี้ให้ URL ทั้งหมด ไม่ใช่ URL พื้นฐาน

— Sam

แน่นอนไม่แน่ใจว่าฉันจะไปไหนด้วย ฉันเปลี่ยนมาตั้งนานแล้วด้วยรหัสฝั่งเซิร์ฟเวอร์

— nuander

0

ง่าย

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

สร้าง img ด้วยชื่อ src ที่ว่างเปล่าบังคับให้เบราว์เซอร์ทำการคำนวณ URL พื้นฐานด้วยตัวเองไม่ว่าคุณจะมี/index.htmlหรืออะไรก็ตาม

— น่ากลัว
แหล่งที่มา

ดูเหมือนว่าทางออกที่ดีที่สุดของทั้งหมดและเป็นโซลูชันเดียวที่ไม่ซ้ำกับตรรกะของเบราว์เซอร์ที่ดี ฉันสงสัยว่ามันพกพาได้อย่างไร มีรายละเอียดใด ๆ ใน HTML ที่จะแนะนำว่าสิ่งนี้รับประกันได้ว่าจะทำงานได้ในทุกเบราว์เซอร์หรือไม่?

— Matthijs Kooijman

@MatthijsKooijman ขึ้นอยู่กับการตีความข้อกำหนด html หากคุณบอกว่าชื่อไฟล์ที่มีความยาว 0 เป็นชื่อทรัพยากรที่ถูกต้อง ... มันจะตรงกับเบราว์เซอร์ทั้งหมด

— กลัว

ทำความเข้าใจกับวิธีสร้างเบราว์เซอร์ คุณมีโปรแกรมเมอร์สองคน (ทางอ้อม) ต้องการสร้างเบราว์เซอร์ แหล่งแรกของพวกเขาคือ 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-filehttp://localhost/your-path-file

— Asrofil Al Banna
แหล่งที่มา