首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:52:31
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家有所帮助,谢谢对武林网的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表