如何使用JavaScript从当前页面获取主机URL

鉴于我在下一页：

http://www.webmail.com/pages/home.aspx

如何检索主机名（

）http://www.webmail.com“

）使用JavaScript？

获取主机名：

但您的示例也在寻找该方案，因此

location.origin

似乎在Chrome中实现了您想要的功能，但在Mozdev文档中没有提及。您可以使用

location.protocol + '//' + location.hostname

如果还需要端口号（当端口号不是80时），则：

或者可能

var host = window.location.protocol + "//" + window.location.host;

或者如果你喜欢连接

var protocol = location.protocol;
var slashes = protocol.concat("//");
var host = slashes.concat(window.location.host);

// or as you probably should do
var host = location.protocol.concat("//").concat(window.location.host);

// the above is the same as origin, e.g. "https://stackoverflow.com"
var host = window.location.origin;

如果您拥有或期望使用自定义端口请使用

窗口.位置.主机

而不是

窗口.位置.主机名

，这样应该可以：

window.location.hostname

---

您可以使用以下方法获取协议、主机和端口：

window.location.origin

---

浏览器兼容性 桌面 铬 边缘 火狐（壁虎） Internet Explorer 歌剧院 Safari（网络工具包） （是的） （是的） （是的） （是的） （是的） （是的） 30.0.1599.101（可能更早） ? 21.0 (21.0) 11 ? 7（可能更早，请参阅webkit bug 46558）

---

我喜欢这个取决于我的目的

window.location.href.split("/")[2] == "localhost:17000" //always domain + port

您可以将其应用于任何url字符串

var url = "http://localhost:17000/sub1/sub2/mypage.html?q=12";
url.split("/")[2] == "localhost:17000"
url.split("/")[url.split("/").length-1] == "mypage.html?q=12"

正在从url字符串（相对路径）中删除协议、域和路径

---

根据您的需要，您可以使用其中一个属性。 在您的问题中，您询问的是主机，可以使用

window.location.hostname

（例如

www.example.com

）检索主机。在您的示例中，您展示了一种称为原点的东西，可以使用

window.location.origin

（例如

http://www.example.com

）

---

在使用窗口和位置

1.在客户端渲染中使用窗口和位置（注意：不要在ssr中使用）

或

2.服务器端渲染

如果您正在使用nuxt.js（vue）或next.js（react），请参阅文档

用于nuxt js框架

req.headers.host

Home.getInitalProps = async(context) => {
   const { req, query, res, asPath, pathname } = context;
   if (req) {
      let host = req.headers.host // will give you localhost:3000
     }
  }

代码：

路由器中的代码：

export function createRouter (ssrContext) {



console.log(ssrContext.req.headers.host)   
      return new Router({
        middleware: 'route',
        routes:checkRoute(ssrContext),
        mode: 'history'
      })
    }

用于next.js框架

req.headers.host

Home.getInitalProps = async(context) => {
   const { req, query, res, asPath, pathname } = context;
   if (req) {
      let host = req.headers.host // will give you localhost:3000
     }
  }

适用于node.js用户

var os = require("os");
var hostname = os.hostname();

public function yourControllerFun(Request $request) {

    $host = $request->getHttpHost();

  

    dd($host);

}

或

适用于laravel用户

var os = require("os");
var hostname = os.hostname();

public function yourControllerFun(Request $request) {

    $host = $request->getHttpHost();

  

    dd($host);

}

或

直接在web.php中使用

Request::getHost();

注:

您可以手动检查csr和ssr应用程序 例子 ssr渲染

if(req.server){
host=req.host;
}
if(req.client){
host=window.location.host; 
}

---

Firefox4似乎没有，但Chrome12有。它是在规范中定义的吗？嗨..为了获得端口，这个示例非常有用..感谢thatFF支持location.origin自21.0开始：我应该提到IE不支持此功能。请务必提到它是一个新功能，不受旧浏览器支持。@kabirbaidhya详细兼容性如何！好。但是，当MDN人员更新浏览器兼容性表时会发生什么情况，这种情况在较新的浏览器版本中经常发生。您可能需要不断更新此文件以与他们的表同步；）。不是真的，这是已知的最早支持它的版本，不是最新的，而且他们所看到的所有浏览器都已经支持它了。这只有在他们决定包含另一个浏览器时才会改变，因为他们可以计算出某些受支持浏览器的版本号，这有点没有意义，因为大多数较新的浏览器都是从其初始版本开始的。但可能的重复版本可能不指定

http

。使用相对协议。可能比硬编码更合适。使用window.location.host而不是hostname，否则如果端口不是80，它将失败。@MattBrowne在处理将产生字符串的内容时，我认为您应该始终使用

concat

。例如

var a=1+2+“应该是12”与该
变量a=”“.concat（1.concat（2.concat）（“应为12”）的concat版本相比。使用concat将为您节省大量麻烦
+
用于计算，而不是连接。
主机名将只提供域，
主机也将提供端口。这是一个很好的迷你工具，可以查看link analysis window.location.origin，它也可以很好地工作-它包括协议和端口。如果您还需要端口，也可以使用
host
var os = require("os");
var hostname = os.hostname();

request.headers.host

public function yourControllerFun(Request $request) {

    $host = $request->getHttpHost();

  

    dd($host);

}

Request::getHost();

if(req.server){
host=req.host;
}
if(req.client){
host=window.location.host; 
}