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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索location.href
跨窗口调用函数
window.location.href、location.href、location.href 新窗口、js location.href、location.href不跳转,以便于您获取更多的相关知识。

时间: 2024-09-07 01:11:18

浅析location.href跨窗口调用函数_javascript技巧的相关文章

快速解决js中window.location.href不工作的问题_javascript技巧

E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script type = "text/javascript" > function jump () { window . location . href = 'http://www.jb51.net' ; } function enjoy () { return false ; } < /script> html代码: <a href= "java

IE下通过a实现location.href 获取referer的值_javascript技巧

最近,公司网站需要统计用户都是从哪些页面进入到注册页面的数据.开始,仅仅简单的通过在服务器端$ _SERVER['HTTP_REFERER'](php)来获取.但是,发现有好多注册用户没有referer值,后来查了一下在IE下采用window.location.href方式跳转的话,referer值为空.而在标签<a></a>里面的跳转的话referer就不会空.所以,通过一下代码就可以解决这个IE问题: function gotoUrl(url){ if(document.all

关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别_javascript技巧

"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写 "window.location.href"."locatio

top.location.href 没有权限 解决方法_javascript技巧

这样一样,如果有人把我的网页保存后,或者用iframe包含进去,再打开的话就会直接跳到我的文章页,以前测试成功,今天看到有个网站把我的页面给包含了,我想我的首页被iframe也没什么呀,可是点内页后,发现没有进入我的网站,查看javascript错误提示发现提示"无权访问",在本地测试后发现问题依旧,看来是不对方网站做什么设置了,而是我网站问题,一步一步排除后发现,是 top.location.href 的问题,网上都大都使用的方法跟我的一样,找了半天终于有点解决方案了:  说是跨域问

IE6浏览器中window.location.href无效的解决方法_javascript技巧

本文实例讲述了IE6浏览器中window.location.href无效的解决方法.分享给大家供大家参考.具体方法如下: window.location.href是js中跳转功能,很多人在ie6中都会发现window.location.href不能跳转了,下面我给大家来介绍一下其原因与解决方法. 问题代码如下: 复制代码 代码如下: <a href="javascript:void(0);" onclick="javascript:test();">点击

js获取location.href的参数实例代码_javascript技巧

window.location.search.substr(1); //substr(1) 是去掉参数里最开头的?号. 复制代码 代码如下: function getQuery(para){ var reg = new RegExp("(^|&)"+para +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null){ return u

js实现iframe跨页面调用函数的方法_javascript技巧

本文实例讲述了js实现iframe跨页面调用函数的方法.分享给大家供大家参考.具体实现方法如下: 在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent.html中含有IFrame并且IFrame指向child.html.现在需要在parent.html/child.html中调用child.html/parent.html的一个js方法.    具体的

浅析JS刷新框架中的其他页面 &amp;amp;&amp;amp; JS刷新窗口方法汇总_javascript技巧

先来看一个简单的例子:下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做.frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: 复制代码 代码如下: <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >< HTML >< HEAD >< TITLE > frame

setinterval()与clearInterval()JS函数的调用方法_javascript技巧

本文实例讲述了setinterval()与clearInterval()JS函数的调用方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.