• 技术文章 >web前端 >js教程

    Location对象怎么使用

    不言不言2019-01-29 16:57:52原创2055
    JavaScript中的Location对象可以用来访问和更改访问者浏览器中显示的当前URL,Location对象本身是Window对象的属性,下面我们就来看看Location对象的具体用法。

    JavaScript

    Location对象是窗口和文档对象的属性,因此window.location和document.location指向同一个对象。

    我们来看一下Location对象的属性

    href:当前加载的页面的完整URL。

    protocol:目前正在使用的协议。

    host :服务器名称和端口号。

    hostname:表示URL的服务器名称,子域和域名。

    port:表示指定服务器使用的通信端口。

    pathname:URL的目录和文件名。

    search:表示以问号开头的字符串,该问号指定HTTP URL中的任何查询信息 。

    hash:表示以#开头的字符串,指定HTTP URL中的锚名称。

    我们来看具体示例

    代码如下

    <!DOCTYPE HTML>
    <html>
    <head>
    	<title>JavaScript Location Object</title>
    	<script type="text/javascript">
    		function gotoUrl()
    		{
    			window.location.href = window.document.loctn.ProtocolFld.
    			options[window.document.loctn.ProtocolFld.selectedIndex].
    			text + document.loctn.HostnameFld.value + document.loctn.
    			PathnameFld.value
    		}
    	</script>
    </head>
    <body>
    <h3>在以下部分输入URL</h3>
    <form name="loctn" method="post">
    <pre>协议:
    <select name="ProtocolFld" size="1">
    <option>http://</option>
    <option>file://</option>
    <option>javascript:</option>
    <option>ftp://</option>
    <option>mailto:</option>
    </select>
    </pre>
    <pre>
    主机名:
    <input type="text" size="20" maxlength="256" name="HostnameFld" value="php.cn">
    </pre>
    <pre>
    路径:
    <input type="text" size="20" maxlength="100" name="PathnameFld" value="/">
    </pre>
    <pre>
    <input type="button" name="Go" value="Go" onclick="gotoUrl()">
    </pre>
    </form>
    </body>
    </html>

    运行效果如下

    微信截图_20190129164714.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注PHP中文网的其他相关栏目教程!!!

    以上就是Location对象怎么使用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Location对象
    上一篇:JavaScript中substr()方法和substring()方法的区别 下一篇:return语句怎么使用
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript window.location对象_基础知识• html文档中的location对象属性理解及常见的用法_基础知识• location对象的属性和方法应用(解析URL)_javascript技巧• JavaScript中的location对象如何使用
    1/1

    PHP中文网