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


Posted in Javascript onNovember 22, 2016

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

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
jQuery find和children方法使用
Jan 31 Javascript
JQuery datepicker 使用方法
May 20 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
JavaScript将数组转换为链表的方法
Feb 16 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 #Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
基于js实现checkbox批量选中操作
Nov 22 #Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 #Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 #Javascript
详解Js模板引擎(TrimPath)
Nov 22 #Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 #Javascript
You might like
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python Requests安装与简单运用
2016/04/07 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python中的元组介绍
2019/01/28 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
毕业学生推荐信
2013/12/01 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
羊脂球读书笔记
2015/06/30 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Django中celery的使用项目实例
2022/07/07 Python