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

Question

鉴于我在以下页面:

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

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

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

你可以尝试这样的事情：

1. Get the full URL:

     window.location

2. Get the only protocol:

    window.location.protocol

3. Get the host (without port):

    window.location.hostname

4. Get the host + port:

    window.location.host

5. Get the host and protocol:

    window.location.origin

6. Get pathname or directory without protocol and host:

    var url = 'http://www.example.com/somepath/path2/path3/path4';
    
    var pathname = new URL(url).pathname;
    
    alert(pathname); 

Answer 5

这应该工作:

window.location.hostname

Answer 6

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

Answer 7

根据您的需要，您可以使用其中一个window.location属性。在您的问题中，您询问的是host，可以使用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; 
}