浅析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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
对javascript继承的理解
2016/10/11 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python中xlrd模块的使用详解
2021/02/01 Python
客服专员岗位职责范本
2013/11/29 职场文书
教师专业自荐书范文
2014/02/10 职场文书
优秀家长自荐材料
2014/08/26 职场文书
个人剖析材料范文
2014/09/30 职场文书
起诉书范文
2015/05/20 职场文书
2015年审计人员工作总结
2015/05/26 职场文书