Purl.js 可以帮助我们来获取地址栏的一些信息, 可以使用原生 js, 也可以使用 jQuery
点击代码运行, 可查看具体信息
可以自己设置 url 进行测试, 也可清空 url, 那么就会获取当前页的 url
预览如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Purl.js-JS 地址栏插件 </title>
- <link rel="stylesheet" href="https://cdn.bootCSS.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
- crossorigin="anonymous">
- <style>
- .code-wper pre {
- display: block;
- margin: 0 0 10px;
- color: #333;
- border: 1px solid #ccc;
- padding: 16px;
- overflow: auto;
- line-height: 1.45;
- background-color: #f6f8fa;
- border-radius: 3px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col-md-12">
- <p class="text-center mt-3">
- <a class="btn btn-primary" href="https://www.bootcdn.cn/purl/readme/">Purl.js 官方文档 </a>
- </p>
- <div class="input-group input-group-lg mb-3">
- <div class="input-group-prepend">
- <span class="input-group-text" id="inputGroup-sizing-lg">URLTest</span>
- </div>
- <input id="urlArea" type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" value="http://baidu.com:8080/folder/dir/index.html?item=value&title=purltest&name=yang&age=20#top">
- </div>
- <div class="input-group mb-3" id="clickBtn">
- <button type="button" class="mr-1 btn btn-outline-primary">source</button>
- <button type="button" class="mr-1 btn btn-outline-secondary">protocol</button>
- <button type="button" class="mr-1 btn btn-outline-success">host</button>
- <button type="button" class="mr-1 btn btn-outline-danger">port</button>
- <button type="button" class="mr-1 btn btn-outline-warning">relative</button>
- <button type="button" class="mr-1 btn btn-outline-info">path</button>
- <button type="button" class="mr-1 btn btn-outline-dark">directory</button>
- <button type="button" class="mr-1 btn btn-outline-primary">file</button>
- <button type="button" class="mr-1 btn btn-outline-secondary">query</button>
- <button type="button" class="mr-1 btn btn-outline-success">fragment</button>
- <button type="button" class="mr-1 btn btn-outline-danger">anchor</button>
- <button type="button" class="mr-1 btn btn-outline-warning">param</button>
- <button type="button" class="mr-1 btn btn-outline-info">segment</button>
- </div>
- <div class="input-group input-group-lg mb-3">
- <div class="input-group-prepend">
- <span class="input-group-text" id="inputGroup-sizing-lg">Result</span>
- </div>
- <input id="inputRes" type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
- </div>
- <table class="table table-hover">
- <thead>
- <tr class="table-active">
- <th scope="col">Attributes</th>
- <th scope="col">Info</th>
- </tr>
- </thead>
- <tbody>
- <tr class="table-primary">
- <td>source</td>
- <td>The whole url being parsed</td>
- </tr>
- <tr class="table-secondary">
- <td>protocol</td>
- <td>eg. http, https, file, etc</td>
- </tr>
- <tr class="table-success">
- <td>host</td>
- <td>eg. www.mydomain.com, localhost etc</td>
- </tr>
- <tr class="table-danger">
- <td>port</td>
- <td>eg. 80</td>
- </tr>
- <tr class="table-warning">
- <td>relative</td>
- <td>The relative path to the file including the querystring (eg. /folder/dir/index.html?item=value)</td>
- </tr>
- <tr class="table-info">
- <td>path</td>
- <td>The path to the file (eg. /folder/dir/index.html)</td>
- </tr>
- <tr class="table-primary">
- <td>directory</td>
- <td>The directory part of the path (eg. /folder/dir/)</td>
- </tr>
- <tr class="table-secondary">
- <td>file</td>
- <td>The basename of the file eg. index.html</td>
- </tr>
- <tr class="table-success">
- <td>query</td>
- <td>The entire query string if it exists, eg. item=value&item2=value2</td>
- </tr>
- <tr class="table-danger">
- <td>fragment or anchor</td>
- <td> The entire string after the # symbol</td>
- </tr>
- </tbody>
- </table>
- <h4>The <code>.param()</code> method is used to return the values of querystring parameters.</h4>
- <div class="code-wper md-3">
- <pre><span class="pl-k">var</span> url <span class="pl-k">=</span> <span class="pl-smi">$</span>.<span class="pl-en">url</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>); <span class="pl-c"><span class="pl-c">//</span> jQuery version</span>
- <span class="pl-k">var</span> url <span class="pl-k">=</span> <span class="pl-en">purl</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>); <span class="pl-c"><span class="pl-c">//</span> plain JS version</span>
- <span class="pl-smi">url</span>.<span class="pl-en">segment</span>(<span class="pl-c1">1</span>); <span class="pl-c"><span class="pl-c">//</span> returns 'folder'</span>
- <span class="pl-smi">url</span>.<span class="pl-en">segment</span>(<span class="pl-k">-</span><span class="pl-c1">2</span>); <span class="pl-c"><span class="pl-c">//</span> returns 'example'</span></pre>
- </div>
- <h4>The <code>.segment()</code> method is used to return values of individual segments from the URL's path.</h4>
- <div class="code-wper md-3">
- <pre><span class="pl-smi">$</span>.<span class="pl-en">url</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>).<span class="pl-en">segment</span>(); <span class="pl-c"><span class="pl-c">//</span> jQuery version - returns ['folder','dir','example','index.html']</span>
- <span class="pl-en">purl</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>).<span class="pl-en">segment</span>(); <span class="pl-c"><span class="pl-c">//</span> plain JS version - returns ['folder','dir','example','index.html']</span></pre>
- </div>
- </div>
- </div>
- </div>
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
- crossorigin="anonymous"></script>
- <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
- crossorigin="anonymous"></script>
- <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
- crossorigin="anonymous"></script>
- <script src="https://cdn.bootcss.com/purl/2.3.1/purl.js"></script>
- <script>
- $(function () {
- var url;
- var myurl;
- $("#clickBtn").find('button').click(function (e) {
- var res, resInfo;
- myurl = $("#urlArea").val();
- // 如果 myurl 为空, 则会获取当前页面的 url
- url = purl(myurl);
- $("#urlArea").val(myurl);
- res = $(this).text();
- resInfo = getUrlInfo(url, res);
- $("#inputRes").val(resInfo);
- });
- function getUrlInfo(url, res) {
- if (res === 'param') {
- return url.param();
- } else if (res === 'segment') {
- return url.segment();
- } else {
- return url.attr(res);
- }
- }
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/32286/0a69e234cca1cab2f2005425338623a8.html