如何在javascript中获取基本网址JavaScript 中的基本 URL

php javascript html css codeigniter

2022-08-30 08:59:57

我正在用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，一个变量，从到的URL片段似乎很方便document.base_urlprotocolindex.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('/') + '/';
}

答案 1

JavaScript 中的基本 URL

您可以使用JavaScript轻松访问当前网址window.location

您可以通过此对象访问该 URL 的段。例如：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

有关此堆栈溢出线程的进一步阅读

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