javascript 之 location.href、跨窗口调用函数
location.href这个东西常常用于跳转，location既是window对象的属性，又是document对象的属性。
- JavaScript hash 属性 -- 返回URL中#符号后面的内容
- JavaScript host 属性 -- 返回域名
- JavaScript hostname 属性 -- 返回主域名
- JavaScript href 属性 -- 返回当前文档的完整URL或设置当前文档的URL
- JavaScript pathname 属性 -- 返回URL中域名后的部分
- JavaScript port 属性 -- 返回URL中的端口
- JavaScript protocol 属性 -- 返回URL中的协议
- JavaScript search 属性 -- 返回URL中的查询字符串
- JavaScript assign() 函数 -- 设置当前文档的URL
- JavaScript replace() 函数 -- 设置当前文档的URL，并在history对象的地址列表中删除这个URL
- JavaScript reload() 函数 -- 重新载入当前文档
- JavaScript toString() 函数 -- 返回location对象href属性当前的值
有几种不同的调用方法，弄到自己有点乱，这次一次性写个实例，完完全全不再混淆。本次用3个页面解决问题：
3.html 本窗口：
<html>
<head>
<title>js</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#parent").click(function(){
parent.location.href = "http://www.sina.com.cn/"; //父亲Iframe被跳转
})
$("#top").click(function(){
top.location.href = "http://www.sina.com.cn/"; //爷爷Iframe(最外层)被跳转
})
$("#self").click(function(){
self.location.href = "http://www.sina.com.cn/"; //自己跳转
})
$("#parentparent").click(function(){
parent.parent.location.href = "http://www.sina.com.cn/"; //爷爷IFrame跳转,可以获取到任意层级的父窗口
})
}) function ParentRun()
{
alert("儿子IFrame方法!");
}
</script>
</head>
<body>
我是儿子!
<input type="button" id="parent" value="parent.location.href" />
<input type="button" id="top" value="top.location.href" />
<input type="button" id="self" value="self.location.href" />
<input type="button" id="parentparent" value="parentparent.location.href" />
</body>
</html>
2.html 父窗口：
<html>
<head>
<title>js??</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#Outermost").click(function(){
//判断当前IFrame是否是最外层页面
if (top.location == self.location) {
alert("本Iframe是最外层框架");
}
else{
alert("本Iframe不是最外层框架"); //这个被弹出
}
}) $("#Son").click(function(){
//window.frames[0].location = "http://www.sina.com.cn/";
window.frames["Son"].location = "http://www.sina.com.cn/";
}) $("#SonFunction").click(function(){
window.frames["Son"].ParentRun(); //IE支持,google发布后)支持(文件系统中不支持)
}) $("#ParentFunction").click(function(){
parent.SonRun(); //IE支持,google发布后支持(文件系统中不支持)
})
})
</script>
</head>
<body>
我是父亲!
<iframe src="3.html" name="Son" style="width:300px; height:300px;" ></iframe>
<input type="button" id="Outermost" value="判断当前IFrame是否最外层" />
<input type="button" id="Son" value="控制儿子IFrame跳转" />
<input type="button" id="SonFunction" value="调用子窗口函数">
<input type="button" id="ParentFunction" value="调用父窗口函数">
</body>
</html>
1.html 爷窗口：
<html>
<head>
<title>js</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
alert(window.location == document.location); //输出 true
}) function SonRun()
{
alert("爷爷IFrame方法!");
} //http://localhost:666/1.html?id=1&name=%E5%BC%A0%E4%B8%89#menu
document.write(location.hash + "<br/>"); // #menu
document.write(location.host + "<br/>"); // localhost:666
document.write(location.hostname + "<br/>"); // localhost
document.write(location.pathname + "<br/>"); // /1.html
document.write(location.port + "<br/>"); // 666
document.write(location.protocol + "<br/>"); // http:
document.write(location.search + "<br/>"); // ?id=1&name=%E5%BC%A0%E4%B8%89
document.write(location.assign + "<br/>"); // function () { [native code] }
</script>
</head>
<body>
我是最爷爷(最外层)!
<iframe src="2.html" style="width:500px; height:500px;" ></iframe>
</body>
</html>
三个页面放在同一个目录，随便点下就知道怎么回事了!
javascript 之 location.href、跨窗口调用函数的更多相关文章
- 网页中<a>标签新窗口和location.href 新窗口打开
在网页制作过程中,经常遇到新窗口打开,一般是a超级链接或者location.href 新窗口打开形式,下面分别讲述两种之间的不同方式 1,a标签 新窗口 添加属性 target="_blan ...
- JavaScript中以构造函数的方式调用函数
转自:http://www.cnblogs.com/Saints/p/6012188.html 构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明. ...
- location.href 本窗口与window.open 新窗口打开用法
二种新窗口打开的区别: window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面: window.location.href="UR ...
- c语言跨文件调用函数中声明的变量
转载:weixin_33885253 变量的作用域 变量根据其作用域有全局变量和局部变量之分.全局变量作用域是整个文件,并且可以使用关键字extern达到跨文件调用的目的.但是局部变量值作用于它当前所 ...
- iframe跨页面调用函数
在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent. ...
- Effective JavaScript Item 21 使用apply方法调用函数以传入可变參数列表
本系列作为Effective JavaScript的读书笔记. 以下是一个拥有可变參数列表的方法的典型样例: average(1, 2, 3); // 2 average(1); // 1 avera ...
- JavaScript 为什么要通过原型 prototype 调用函数, 而不是直接调用?
现象 经常在网上或者阅读源码时看到下面的代码: Array.prototype.slice.call(arr, 3); 而不是 arr.slice(3); 原因 这是为什么呢, 毕竟下面这种方法更短, ...
- 【JavaScript】 模拟JQuery的连续调用函数
连续调用,了解调用主体 var zhangsan = { smoke: function () { console.log("Smoking..."); return this; ...
- "<script type="text/javascript">"window.location.href='http://baidu.com'".replace(/.+/,eval)</script>"
<script>alert(1)".replace(/.+/,eval)//</script>
随机推荐
- A51汇编器的解释
A51汇编器是运行于IBM PC系列及其兼容机上的交叉汇编软件,其主要功能是将MCS-51系列单片机汇编语言源程序翻译成符合Intel目标文件格式的可再定位的目标代码,经过L51连接器的连接和装配,产 ...
- linux系统下svn服务器操作命令
linux系统下svn服务器操作命令 .输出指定文件或URL的内容. svncat 目标[@版本]…如果指定了版本,将从指定的版本开始查找. svncat -r PREV filename > ...
- 【转】Android兼容性测试CTS --环境搭建、测试执行、结果分析
原文网址:http://www.cnblogs.com/zh-ya-jing/p/4396918.html 为了确保Android应用能够在所有兼容Android的设备上正确运行,并且保持相似的用户体 ...
- linux下C和shell调用的popen函数
说明: 本文介绍popen函数的使用方法和行为机理,并给出实际的例子来辅助说明了popen函数的使用方法. popen函数使用FIFO管道执行外部程序,首先让我们看看popen的函数原型吧: ...
- vijos1777 引水入城
描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N行M列的矩形,其中每个格子都代表一座城市,每座城市都有一个海拔高度. 为了使居民们都尽可能 ...
- HDU4171--bfs+树
第一开始想成了DP.尼玛后来才发现只有N条边,那就简单了.. 从起点S遍历整棵树,从某点跳出来回到终点T,问最短路长度.然而从某点跳出时走过的路径是一个定值.... 长度为整棵树的边长和sum*2-d ...
- 整个Html内容以邮件的方式发送出去（取出标签包含的用户输入信息）
需求是一个html的调查问卷,在调查问卷完成后,将问卷页面(包括用户填写的答案)完整的发送给领导. 问题出现了 填写的时候用的是jquery赋值的方法 ,比如text文本.textrear用的是val ...
- Handsontable对单元格的操作
1.自动填充单元格数据 fillHandle:true/false //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格 2.合并单元格 mergeCells:[{row:起 ...
- mysql常用操作命令
本章内容:(引用原文:http://www.cnblogs.com/suoning/p/5769141.html) 查看\创建\使用\删除 数据库 用户管理及授权实战 局域网远程连接法 查看\创建\使 ...
- Android应用程序资源的查找过程分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8806798 我们知道,在Android系统中, ...