javascript中的location用法简单介绍


Posted in Javascript onMarch 07, 2007

先前写了一片用window.location.href实现刷新另个框架页面 ,特此我看了一下locaiton的详细用法,对此有点改进,现在我将他整理成js,方便查阅,也贴上和朋友们分享一下,具体如下:

第一、简单介绍一下location属性、用法以及相关示例:
Location
包含了关于当前 URL 的信息。

描述
location 对象描述了与一个给定的 Window 对象关联的完整 URL。location 对象的每个属性都描述了 URL 的不同特性。
通常情况下,一个 URL 会有下面的格式:

协议//主机:端口/路径名称#哈希标识?搜索条件 例如:

http://skylaugh.cnblogs.com/index.html#topic1?x=7&y=2 这些部分是满足下列需求的:

“协议”是 URL 的起始部分,直到包含到第一个冒号。 
“主机”描述了主机和域名,或者一个网络主机的 IP 地址。
“端口”描述了服务器用于通讯的通讯端口。 
路径名称描述了 URL 的路径方面的信息。
“哈希标识”描述了 URL 中的锚名称,包括哈希掩码(#)。此属性只应用于 HTTP 的 URL。 
“搜索条件”描述了该 URL 中的任何查询信息,包括问号。此属性只应用于 HTTP 的 URL。“搜索条件”字符串包含变量和值的配对;每对之间由一个“&”连接。 

属性概览
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<=0)
{
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";
}
</script>

Javascript 相关文章推荐
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 #Javascript
动态控制Table的js代码
Mar 07 #Javascript
js+FSO遍历文件夹下文件并显示
Mar 07 #Javascript
学习js所必须要知道的一些
Mar 07 #Javascript
修改发贴的编辑功能
Mar 07 #Javascript
Javascript之文件操作
Mar 07 #Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 #Javascript
You might like
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
如何基于python实现不邻接植花
2020/05/01 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
局域网标准
2016/09/10 面试题
医学毕业生自荐信
2013/10/11 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
村委会贫困证明
2014/01/14 职场文书
物资采购方案
2014/06/12 职场文书
委托书的写法
2014/09/16 职场文书
入党转正介绍人意见
2015/06/03 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL