浏览器兼容性

Question

鉴于我在以下页面：

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

如何使用JavaScript检索主机名（"http://www.webmail.com"）？

Answer 1

var host = window.location.hostname;

或可能

var host = "http://"+window.location.hostname;

或者如果你喜欢连接

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

Answer 2

获取主机名：location.hostname

但是您的示例也在寻找该方案，因此location.origin似乎可以在Chrome中执行您想要的操作，但在Mozdev文档中没有提及。您可以使用

构建它

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

如果你想要端口号（当它不是80时），那么：

location.protocol + '//' + location.host

Answer 3

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

window.location.origin

浏览器兼容性

桌面

| Chrome                           | Edge  | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)                            |
|----------------------------------|-------|-----------------|-------------------|-------|--------------------------------------------|
| (Yes)                            | (Yes) | (Yes)           | (Yes)             | (Yes) | (Yes)                                      |
| 30.0.1599.101 (possibly earlier) | ?     | 21.0 (21.0)     | 11                | ?     | 7 (possibly earlier, see webkit bug 46558) |

移动

| Android                          | Edge  | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile                              |
|----------------------------------|-------|------------------------|----------|--------------|--------------------------------------------|
| (Yes)                            | (Yes) | (Yes)                  | (Yes)    | (Yes)        | (Yes)                                      |
| 30.0.1599.101 (possibly earlier) | ?     | 21.0 (21.0)            | ?        | ?            | 7 (possibly earlier, see webkit bug 46558) |

所有浏览器兼容性均来自Mozilla Developer Network

Answer 4

这应该有效：

window.location.hostname

Answer 5

let path = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;

Answer 6

我喜欢这个取决于目的

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

您可以在任何url-string

上应用它

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"

删除协议，域和＆amp;来自url-string（相对路径）的路径

var arr = url.split("/");
if (arr.length>3)
   "/" + arr.splice(3, arr.length).join("/") == "/sub1/sub2/mypage.html?q=12"

Answer 7

根据需要，可以使用window.location属性之一。在您的问题中，您正在询问主机，该主机可以使用window.location.hostname（例如www.example.com）进行检索。在您的示例中，您展示了一种称为 origin 的内容，可以使用window.location.origin（例如http://www.example.com）进行检索。

var path = window.location.origin + "/";

//result = "http://localhost:60470/"

Answer 8

使用窗口和位置

前请记住

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

window.location.host;

或

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

2.服务器端渲染

如果你使用 nuxt.js(vue) 或 next.js(react) 参考文档

对于nuxt js框架

req.headers.host

代码：

async asyncData ({ req, res }) {
        if (process.server) {
         return { host: req.headers.host }
        }

路由器中的代码：

export function createRouter (ssrContext) {



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

对于 next.js 框架

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

或

request.headers.host

针对 Laravel 用户

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

如何使用当前页面中的javascript获取主机URL

8 个答案:

浏览器兼容性

桌面

移动