JavaScript中的基本网址

Question

我正在使用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生成的绝对路径，所以我的解决方案是在每个页面添加一个虚拟标记，如下所示

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

然后我将javascript行修改为

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

它确实有效，但它看起来并不优雅，所以，我将非常感谢如何在javascript或任何其他解决方案中生成此基本网址，感谢：）

我更喜欢仅限Javascript的解决方案，因为我使用的是CodeIgniter，所以document.base_url变量包含从protocol到index.php的网址段似乎很方便< / p>

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

Answer 1

JavaScript中的基本网址

您可以使用window.location

在JavaScript中轻松访问当前网址

您可以通过此locations对象访问该网址的细分。例如：

// 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开发者工具中，您只需在控制台中输入window.location即可返回所有可用属性。

this Stack Overflow thread

可以进一步阅读

Answer 2

一种方法是使用脚本标记将您想要的变量导入视图：

<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");

Answer 3

只需通过执行此变量即可完成。

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

Answer 4

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

Answer 5

您可以通过在每个页面模板中生成以下行来使PHP和JavaScript协同工作：

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

然后您可以在JavaScript中的任何位置引用document.mybaseurl。这节省了一些调试和复杂性，因为这个变量总是与PHP计算一致。

Answer 6

JavaScript中的基本网址

以下是项目在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;
}

Answer 7

要获得与codeigniter的{{1}}完全相同的内容，您可以这样做：

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

如果您处理纯Javascript文件，这将更有用。

Answer 8

我可能会迟到但对所有未来的极客来说。首先，我想你想在你的.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>的View文件中调用<script> </script>。因此，要在base_url文件中调用.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文件中使用。希望它有所帮助。

Answer 9

在资源/视图/布局/app.blade.php 文件中

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

Answer 10

如果您要在网页中确切指定什么，只需使用：

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

Answer 11

假设您有全局脚本文件，并且不想在其他文件中重复定义该 URL。这就是 BASE_URL 发挥作用的地方。

在您的 global_script.js 文件中，执行此操作

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

然后您可以在其他任何地方使用该变量来调用您的 URL。例如...

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

如何在javascript中获取基本URL

11 个答案:

JavaScript中的基本网址