浅析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 cookie解码函数(兼容ff)
Mar 17 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
layui表格内放置图片,并点击放大的实例
Sep 10 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
动易数据转成dedecms的php程序
2007/04/07 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python使用PyQt5的简单方法
2019/02/27 Python
Django REST framework 分页的实现代码
2019/06/19 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
自荐信不宜过于夸大
2013/11/06 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
爱国演讲稿500字
2014/05/04 职场文书
运动员代表致辞
2015/07/29 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL