web-dev-qa-db-ja.com

JavaScriptでベースURLを取得する方法

CodeIgniter でWebサイトを構築していますが、このような base_url ヘルパー関数で読み込むさまざまなリソースがあります

<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>

生成します（つまりwww.mysite.com）

<link rel="stylesheet" type="text/css" href="http://www.mysite.com/assets/css/themes/default.css" id="style_color"/>

次に、このリソースをこのようなjavascriptの別のリソースと交換できます

$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");

何が起こるかは、PHPによって生成された絶対パスを使用せずにリソースをロードしようとするため、私の解決策は、このようなPHPですべてのページにダミータグを追加することでした

<div id="base_url" class="'.base_url().'"></div>

次に、javascript行を次のように変更しました

$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");

それは動作しますが、まったくエレガントに見えませんので、javascriptまたは他のソリューション内からこのベースURLを生成する方法についての助けを感謝します:)

私はJavascriptのみのソリューションを好み、 CodeIgniter を使用しているため、protocolからdocument.base_urlへのURLのセグメントを持つindex.php変数が便利だと思われました

document.base_url = base_url('index.php');

関数base_url()が

function base_url(segment){
   // get the segments
   pathArray = window.location.pathname.split( '/' );
   // find where the segment is located
   indexOfSegment = pathArray.indexOf(segment);
   // make base_url be the Origin plus the path to the segment
   return window.location.Origin + pathArray.slice(0,indexOfSegment).join('/') + '/';
}
javascriptphphtmlcsscodeigniter
39
Nehemias Herrera

JavaScriptのベースURL

JavaScriptでwindow.locationを使用すると、現在のURLに非常に簡単にアクセスできます

このlocationsオブジェクトを介して、そのURLのセグメントにアクセスできます。例えば：

// This article:
// https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.Origin;
// "http://stackoverflow.com"

var Host = window.location.Host;
// stackoverflow.com

var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

Chrome Dev Toolsでは、コンソールにwindow.locationと入力するだけで、使用可能なすべてのプロパティが返されます。

さらに詳しい情報は このStack Overflowスレッド で入手できます。

130
chantastic

1つの方法は、スクリプトタグを使用して、ビューに必要な変数をインポートすることです。

<script type="text/javascript">
window.base_url = <?php echo json_encode(base_url()); ?>;
</script>

ここでは、base_urlをjson_encodeでラップして、すべての文字を有効なJavascriptに自動的にエスケープします。 base_urlをグローバルウィンドウに配置して、base_urlを呼び出すだけでどこでも使用できるようにしますが、それを呼び出すJavascriptの上にscriptタグを必ず配置してください。あなたの与えられた例で：

...
$('#style_color').attr("href", base_url + "assets/css/themes/" + color_ + ".css");
6
sean
var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ? 
    baseTags[ 0 ].href.substr( location.Origin.length, 999 ) : 
    "";
5
goofballLogic

これは、単にこの変数を実行することで実行されます。

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

これでベースURLが作成されます。そして今、この変数を使用するjavascript関数を作成します

function base_url(string){
    return base_url + string;
}

そして今、これは常に正しいパスを使用します。

var path    =   "assets/css/themes/" + color_ + ".css"
$('#style_color').attr("href", base_url(path) );
4
Muhammad Raheel

JavaScriptのベースURL

JavaScriptでベースURLを取得するプロジェクトの簡単な関数を次に示します。

// base url
function base_url() {
    var pathparts = location.pathname.split('/');
    if (location.Host == 'localhost') {
        var url = location.Origin+'/'+pathparts[1].trim('/')+'/'; // http://localhost/myproject/
    }else{
        var url = location.Origin; // http://stackoverflow.com
    }
    return url;
}
3
hsn0331

各ページテンプレートで次の行を生成することにより、PHPとJavaScriptを連携させることができます。

<script>
document.mybaseurl='<?php echo base_url('assets/css/themes/default.css');?>';
</script>

その後、JavaScriptの任意の場所でdocument.mybaseurlを参照できます。この変数は常にPHP計算と一貫性があるため、これによりデバッグと複雑さが軽減されます。

2
Schien

base_url of codeigniterとまったく同じものを取得するには、次のようにします。

var base_url = window.location.Origin + '/' + window.location.pathname.split ('/') [1] + '/';

これは、純粋なJavascriptファイルで作業する場合に便利です。

1
Saddam

私は遅れるかもしれませんが、すべての未来のオタクのために。まず、.jsファイルでbase_urlを呼び出したいと思います。サンプル.jsファイルの下で呼び出していると考えてみましょう

sample.js

var str = $(this).serialize(); 

jQuery.ajax({
type: "POST",
url: base_url + "index.php/sample_controller",
dataType: 'json',
data: str,
success: function(result) {
alert("Success");
}

上記ではbase_urlが割り当てられていないため、コードは正常に機能しません。ただし、.jsタグを使用して<head></head>または<body></body>ofビューファイルの間にある<script> </script>を呼び出すことは確かです。したがって、base_url in.jsファイルを呼び出すには、.jsファイルを呼び出す予定の場所に以下のコードを記述する必要があります。また、共通のヘッダーファイルを作成し、以下のコードとすべての呼び出しスタイルシート（.css）およびjavascript（.js）ファイルをそこに配置することをお勧めします。以下の例のように。

共通ヘッダーファイル

<head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/sample.js">

<script>
  var base_url = '<?php echo base_url(); ?>';  
</script>


</head>

これで、base_urlはsample.jsファイルでも機能します。お役に立てば幸いです。

0
Jeeva

Webページで正確に指定されているものが必要な場合は、以下を使用します。

document.querySelector('head base')['href']
0
Javarome

resources/views/layouts/app.blade.phpファイル

<script type="text/javascript">
    var baseUrl = '<?=url('');?>';
</script>
0
Pasindu Jayanath