浅析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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
js实现无缝循环滚动
Jun 23 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python绘制地震散点图
2019/06/18 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
python中实现栈的三种方法
2020/12/19 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
法律系毕业生求职信
2014/05/28 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
教师节随笔
2015/08/15 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
python flappy bird小游戏分步实现流程
2022/02/15 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python