Home > Web Front-end > JS Tutorial > A brief introduction to the usage of location in javascript_Basic knowledge

A brief introduction to the usage of location in javascript_Basic knowledge

WBOY
Release: 2016-05-16 19:17:54
Original
1552 people have browsed it

I previously wrote a piece about using window.location.href to refresh another frame page. Here I took a look at the detailed usage of locaiton, and improved it a bit. Now I organized it into js for easy reference, and also posted it to share with friends. The details are as follows:

First, a brief introduction to the location attribute, usage and related examples:
Location
contains information about the current URL.

Description The
location object describes the complete URL associated with a given Window object. Each property of the location object describes a different characteristic of the URL.
Normally, a URL will have the following format:

Protocol//Host:Port/Pathname#Hash Identification?Search criteria For example:

http://skylaugh .cnblogs.com/index.html#topic1?x=7&y=2 These parts meet the following requirements:

"Protocol" is the initial part of the URL until it includes the first colon.
"Host" describes the host and domain name, or the IP address of a network host.
"Port" describes the communication port used by the server for communication.
The path name describes the path information of the URL.
"Hash ID" describes the anchor name in the URL, including the hash mask (#). This attribute only applies to HTTP URLs.
"Search criteria" describes any query information in the URL, including question marks. This attribute only applies to HTTP URLs. The Search Criteria string contains pairs of variables and values; each pair is connected by an "&". 

属性概览
hash: Specifies an anchor name in the URL. 
host: Specifies the host and domain name, or IP address, of a network host.  
hostname: Specifies the host:port portion of the URL.  
href: Specifies the entire URL.  
pathname: Specifies the URL-path portion of the URL.  
port: Specifies the communications port that the server uses.  
protocol: Specifies the beginning of the URL, including the colon.  
search: Specifies a query. 

方法概览
reload Forces a reload of the window's current document.  
replace Loads the specified URL over the current history entry.  


主要功能示例,其他类同:
hash:

newWindow.location.href = http://skylaugh.cnblogs.com
newWindow.location.hash = #59831 


host
A string specifying the server name, subdomain, and domain name.
newWindow.location.href =   http://skylaugh.cnblogs.com
newWindow.location.host = skylaugh.cnblogs.com


href
A string specifying the entire URL.

window.location.href="http://home.netscape.com/"


pathname
A string specifying the URL-path portion of the URL.

search
A string beginning with a question mark that specifies any query information in the URL.

newWindow.location.href = http://skylaugh.cnblogs.com
newWindow.location.search = ?newsid=111 

二、location之页面跳转js如下:
//简单跳转
function gotoPage(url)
{
// eg. var url = "newsview.html?catalogid=" catalogID "&pageid=" pageid;
window.location = url;
}
// 对location用法的升级,为单个页面传递参数
function goto_catalog(iCat)
{
if(iCat{
top.location = "../index.aspx"; // top出去
}
else
{
window.location = "../newsCat.aspx?catid=" iCat;
}
}
// 对指定框架进行跳转页面,二种方法皆可用
function goto_iframe(url)
{
parent.mainFrame.location = "../index.aspx"; //
// parent.document.getElementById("mainFrame").src = "../index.aspx";// use dom to change page // 同时我增加了dom的写法
}
// 对指定框架进行跳转页面,因为 parent.iframename.location="../index.aspx"; 方法不能实行,主要是 "parent.iframename" 中的iframename在js中被默认为节点,而不能把传递过来的参数转换过来,所以用dom实现了该传递二个参数的框架跳转页面,希望那位仁兄不吝赐教!
function goto_iframe(iframename,url) 
{
parent.document.getElementById(iframename).src = "../index.aspx";// use dom to change page by iframeName

//}
// 回到首页
function gohome()
{
top.location = "/index.aspx";
}


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template