浅析location.href跨窗口调用函数

作者：逆心时间：2024-04-17 09:41:37　

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 = "https://www.aspxhome.com/article/97882.htm"; //父亲Iframe被跳转
})
$("#top").click(function(){
top.location.href = "https://www.aspxhome.com/article/97882.htm"; //爷爷Iframe(最外层)被跳转
})
$("#self").click(function(){
self.location.href = "https://www.aspxhome.com/article/97882.htm"; //自己跳转
})
$("#parentparent").click(function(){
parent.parent.location.href = "https://www.aspxhome.com/article/97882.htm"; //爷爷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 = "https://www.aspxhome.com/article/97882.htm";
window.frames["Son"].location = "https://www.aspxhome.com/article/97882.htm";
})

$("#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>

三个页面放在同一个目录，随便点下就知道怎么回事了!

jQuery对IFrame的操作主要是通过

$("iframe").contents().find("#id1");

进行跨IFrame操作。

来源：http://www.cnblogs.com/kissdodog/p/3412866.html

标签：location.href,跨窗口调用函数

投稿

浅析location.href跨窗口调用函数

猜你喜欢

JS实现点击li标签弹出对应的索引功能【案例】

asp 各种进制转换函数

修改mysql默认字符集的两种方法详细解析

浅析Bootstrap缩略图组件与警示框组件

python如何提取xml指定内容

分享几种python 变量合并方法

python-jwt用户认证食用教学的实现方法

Go语言学习之操作MYSQL实现CRUD

删除sqlserver数据库日志和没有日志的数据库恢复办法

Go语言操作数据库及其常规操作的示例代码

10个值得深思的PHP面试题

用PHP实现标准的IP Whois查询

利用C#远程存取Access数据库

python 读写文件包含多种编码格式的解决方式

微信小程序访问mysql数据库流程详解

javascript ajax的5种状态介绍

Win10安装MySQL5.7.18winX64 启动服务器失败并且没有错误提示

Django日志及中间件模块应用案例

Tensorflow中的降维函数tf.reduce_*使用总结

常用原生js自定义函数总结