堆棧內存溢出
  簡體   English   中英

如何在javascript中獲取基本網址

[英]how to get the base url in javascript

 原文  2014-01-21 00:19:52  4   11    javascript/ php/ html/ css/ codeigniter

問題描述

我正在使用CodeIgniter構建一個網站，我使用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 ，一個document.base_url變量，其中包含從protocol到index.php的 url 段似乎很方便

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

11 個解決方案

解決方案1
 190 已采納  2014-01-21 00:31:23

JavaScript 中的基本 URL

您可以使用window.location在 JavaScript 中輕松訪問當前 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 線程上進一步閱讀

解決方案2
 9  2014-01-21 00:33:06

一種方法是使用腳本標簽將您想要的變量導入到您的視圖中：

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

在這里，我用 json_encode 包裝了 base_url，以便它會自動將任何字符轉義為有效的 Javascript。 我將 base_url 放在全局窗口中，因此您可以通過調用 base_url 在任何地方使用它，但請確保將腳本標記放在調用它的任何 Javascript 之上。 用你給出的例子：

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

解決方案3
 6  2016-07-18 03:13:25

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

解決方案4
 5  2015-03-07 13:22:16

var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ? 
    baseTags[ 0 ].href.substr( location.origin.length, 999 ) : 
    "";

解決方案5
 4  2014-01-21 07:07:54

這只需通過執行此變量即可完成。

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

這將現在有基本網址。 現在創建一個將使用此變量的 javascript 函數

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

現在這將始終使用正確的路徑。

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

解決方案6
 3  2014-01-21 00:23:46

您可以通過在每個頁面模板中生成以下行來使 PHP 和 JavaScript 協同工作：

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

然后您可以在 JavaScript 中的任何位置引用 document.mybaseurl。 這為您節省了一些調試和復雜性，因為此變量始終與 PHP 計算一致。

解決方案7
 3  2017-10-31 11:49:35

要獲得與codeigniter base_url完全相同的內容，您可以執行以下操作：

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

如果您處理純 Javascript 文件，這將更有用。

解決方案8
 0  2016-09-30 10:25:10

我可能會遲到，但對於所有未來的極客來說。 首先我想你想在你的.js文件中調用 base_url 。 所以讓我們考慮你在下面的示例.js文件中調用它

示例.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。因此代碼將無法正常工作。 但是可以肯定的是，您將使用<script> </script>標記在 View 文件的<head></head>或<body></body>之間調用.js 。 因此，要在.js文件中調用base_url ，我們必須編寫以下代碼，您計划在其中調用.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文件中工作。 希望它有所幫助。

解決方案9
 0  2018-10-24 14:27:19

在資源/視圖/布局/app.blade.php文件中

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

解決方案10
 0  2019-09-05 07:49:46

如果您想要網頁中確切指定的內容，只需使用：

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

解決方案11
 0  2021-01-15 11:41:39

假設您有全局腳本文件，並且不想在其他文件中重復定義該 URL。 這就是 BASE_URL 發揮作用的地方。

在您的 global_script.js 文件中，執行以下操作

<script>
 var BASE_URL = "http://localhost:8000";
</script>

然后您可以在其他任何地方使用該變量來調用您的 URL。 例如...

<script>
   fetch(`{{BASE_URL}}/task-create/`,{
         ..............
            
        }).then((response) => {
            .............
   })
</script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript：如何獲取絕對的基本URL？ 如何從 JavaScript 中的 URL 獲取基域 如何使用 jquery 或 javascript 獲取基本 url？ 如何在javascript中使用正則表達式獲取基本URL 如何獲取除基本 URL 之外的 URL 中的值 - Javascript 如何使用javascript獲取MVC應用程序的基本URL 使用JavaScript獲取我的Web App基本URL 使用正則表達式和 Javascript 從字符串中獲取基本 url 如何在meanjs中獲取基本URL？ 如何在 reactjs 中獲取當前 url 和基本 url？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM