jqueryまたはjavascriptでベースURLを取得するにはどうすればよいですか？

152

joomla phpではそこで使用できます $this->baseurlでは、ベースパスを取得が、jqueryでベースパスを取得する必要がありました。

基本パスは次の例のいずれかです。

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

exampleまた、変更されることがあります。

javascript  jquery 
— ナビン・ラウニヤル
ソース
— Mritunjay 2014
@Mritunjay私はすでにそれを見ましたが、私の場合、ベースパスは私がjoomlaで行うphpのようにベースパスを取得したかったので異なります
— Navin Rauniyar
それで、答えのどれもあなたの問題を解決しませんでしたか？
— Artjom B.
答えを選んでください。
— アランベリー

回答:

177

これはあなたを助けます...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— ジェニッシュ
ソース
はい、うまくいきます！http://localhost/myapp/what/ever/sub/folder-> getBaseUrl-> http://localhost/myapp:-)
— vee
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( '/' );
— ハリス
ソース
7
短くて甘い素敵な、ありがとう。window.location.origin
— TetraDev
1
これは、短く、簡潔で、うまく機能するため、推奨される答えです。
— グレゴール
ie.9でwindow.location.originが定義されていない
— -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
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 + "' />";
— ダスティンハルステッド
ソース
1
プロトコルがhttpsのようなhttp以外の場合を除いて（URLプロトコルを "http：//"に設定すると、URLの使用方法によっては非常に奇妙なエラーが発生します）。
— Jason Rice
13

これはサーバーサイドプロパティであるため、javascriptからこれを行うことはできません。クライアント上のJavaScriptは、joomlaがインストールされている場所を認識できません。最良のオプションは、何らかの方法での値を$this->baseurlページのJavaScriptに含めてから、この値を使用することです（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.
8

しばらく前に同じ問題があったのですが、私の問題は、ベースURLが必要なだけでした。ここには詳細なオプションがたくさんありますが、これを回避するには、window.locationオブジェクトを使用します。これを実際にブラウザコンソールに入力し、Enterキーを押してオプションを選択します。まあ私の場合、それは単純に： 

window.location.origin
— ヨーン
ソース
7 
var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

ただし、これらのフレームワークの.htaccessファイルでbaseurlを変更することが可能なため、CodeIgniter（またはphp joomla）のbaseurl（）が同じ値を返すとは言えません。

例えば ​​：

ローカルホストに次のような.htaccessファイルがある場合：

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 /を返します

— アキル・クマール
ソース
6

私はいくつかのJoomlaプロジェクトでこのニーズに遭遇しました。私が見つけた最も簡単な方法は、テンプレートに非表示の入力フィールドを追加することです。

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

JavaScriptの値が必要な場合：

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

純粋なJavaScriptを使用するほど豪華ではありませんが、シンプルで、仕事をこなします。

— ブライアンボリ
ソース
6

jQueryでベースURLを取得する最も簡単な方法

window.location.origin
— カイサー・マリク
ソース
これは実際にはjQueryではありません。jQueryは次のようになります。$（location）.attr（ "origin"）;
— 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

また、あなたがいるすべての場所で、hrefのglobのような参照を使用しないでください。例：親の場所ではhttp://localhost:8080/notが発生しhttp://localhost:8080/some/path/ます。

すべてのハイパーリンクを、bas urlなしで完全な文として参照することを示します。

— キャチャック
ソース
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

<base>タグで設定されている場合、どの回答もベースURLを考慮していないことに驚きます。現在のすべての回答は、ホスト名、サーバー名、またはアドレスの最初の部分を取得しようとします。これは、<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://が、上記の並べ替えのソリューションは完全な正しいパスを返します。

— アリ・シェイクプール
ソース
1
これは最善の方法ではありません。また、<base>要素を組み込んだ@DaniilSamoylovの回答も参照してください。
— ブラッド
baseURIはノードのベースURLを返すため、この場合はベースパス+ドキュメント名を返します。そのURLからドキュメント名を削除するには、さらにコードが必要になります。@Brad
— Ali Sheikhpour
このソリューションは、Webページのルートディレクトリがサブディレクトリ（example.com/appRootなど）内にある場合、正しいベースURLを返しません。これは、ウェブページのルートディレクトリがウェブホストのルートに直接配置されている場合にのみ機能します。
— Michael Hafner
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

ジェニッシュの回答とほとんど同じですが、少し短いです。

— マティーン
ソース
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

これは、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+"://")]
— ブッブル
ソース
0

example.comは変更される可能性があるとのことですので、スクリプトに相対パス表記を使用できるようにするためには、実際にはベースURLが必要だと思います。この特定のケースでは、スクリプトを使用する必要はありません。代わりに、ベースタグをヘッダーに追加します。

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

私は通常、PHPを介してリンクを生成します。

— ヘクソダス
ソース
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;
    }
— ヌーダー
ソース
これは単にURL全体を提供します。ベースURLではありません。
— サム
確かに、私がどこに向かっていたのかわかりません。私は久しぶりにサーバー側のコードでそれを設定するように切り替えました
— nuander
0

かんたん 

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

空のsrc-nameでimgを生成すると、ブラウザのベースURLが自動的に計算され/index.htmlます。

— グリム
ソース
これはすべての中で最もエレガントなソリューションのようであり、ブラウザロジックを複製しない唯一のソリューションであり、これはすばらしいことです。どんなに持ち運びできるのかしら。これがすべてのブラウザで機能することが保証されていることを示唆するHTML仕様に何かありますか？
— Matthijs Kooijman
@MatthijsKooijman HTML仕様の解釈に依存します。長さが0のファイル名が有効なリソース名であるとすると、すべてのブラウザに一致します。
— Grim
ブラウザーの作成方法を理解します。（間接的に）ブラウザーを作成したいプログラマーが何人かいます。最初のソースはhtml-specsです。彼らは仕様を読み、これは彼らが本当に解決したい質問の一つです。彼らは（すべて）この状況についてどのように判断すると思いますか？
— Grim
-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-fileまたはを取得しhttp://localhost/your-path-fileます。

— Asrofil Al Banna
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.