当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-07 03:42 编辑：来源：阅读：
扫一扫，手机访问

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

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 = "http://www.1sucai.cn/article/97882.htm";  //父亲Iframe被跳转
    })
    $("#top").click(function(){
      top.location.href = "http://www.1sucai.cn/article/97882.htm";    //爷爷Iframe(最外层)被跳转
    })
    $("#self").click(function(){
      self.location.href = "http://www.1sucai.cn/article/97882.htm";    //自己跳转
    })
    $("#parentparent").click(function(){
      parent.parent.location.href = "http://www.1sucai.cn/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 = "http://www.1sucai.cn/article/97882.htm";
      window.frames["Son"].location = "http://www.1sucai.cn/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的操作主要是通过　　[code]$("iframe").contents().find("#id1");[/code] 　　进行跨IFrame操作。以上就是本文的全部内容，希望对大家有所帮助，谢谢对编程素材网的支持！

全部评论(0)

上一篇：JS简单实现仿百度控制台输出信息效果
下一篇：javascript字符串拼接的效率问题

资讯排行榜
更多>>