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.sina.com.cn/";    //父亲Iframe被跳转

        })

        $("#top").click(function(){

            top.location.href = "http://www.sina.com.cn/";        //爷爷Iframe(最外层)被跳转

        })

        $("#self").click(function(){

            self.location.href = "http://www.sina.com.cn/";        //自己跳转

        })

        $("#parentparent").click(function(){

            parent.parent.location.href = "http://www.sina.com.cn/";    //爷爷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.sina.com.cn/";

            window.frames["Son"].location = "http://www.sina.com.cn/";

        })

        $("#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>

　　三个页面放在同一个目录，随便点下就知道怎么回事了!

javascript 之 location.href、跨窗口调用函数的更多相关文章

  1. 网页中<a>标签新窗口和location.href 新窗口打开

    在网页制作过程中,经常遇到新窗口打开,一般是a超级链接或者location.href 新窗口打开形式,下面分别讲述两种之间的不同方式 1,a标签 新窗口 添加属性 target="_blan ...

  2. JavaScript中以构造函数的方式调用函数

    转自:http://www.cnblogs.com/Saints/p/6012188.html 构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明. ...

  3. location.href 本窗口与window.open 新窗口打开用法

    二种新窗口打开的区别: window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面: window.location.href="UR ...

  4. c语言跨文件调用函数中声明的变量

    转载:weixin_33885253 变量的作用域 变量根据其作用域有全局变量和局部变量之分.全局变量作用域是整个文件,并且可以使用关键字extern达到跨文件调用的目的.但是局部变量值作用于它当前所 ...

  5. iframe跨页面调用函数

    在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent. ...

  6. Effective JavaScript Item 21 使用apply方法调用函数以传入可变參数列表

    本系列作为Effective JavaScript的读书笔记. 以下是一个拥有可变參数列表的方法的典型样例: average(1, 2, 3); // 2 average(1); // 1 avera ...

  7. JavaScript 为什么要通过原型 prototype 调用函数, 而不是直接调用?

    现象 经常在网上或者阅读源码时看到下面的代码: Array.prototype.slice.call(arr, 3); 而不是 arr.slice(3); 原因 这是为什么呢, 毕竟下面这种方法更短, ...

  8. 【JavaScript】 模拟JQuery的连续调用函数

    连续调用,了解调用主体 var zhangsan = { smoke: function () { console.log("Smoking..."); return this; ...

  9. "<script type="text/javascript">"window.location.href='http://baidu.com'".replace(/.+/,eval)</script>"

    <script>alert(1)".replace(/.+/,eval)//</script>

随机推荐

  1. Source Insight设置总结

    在网上搜索了一些关于Source Insight的设置技巧,把这些结果给总结下来: 1. 背景色选择 要改变背景色Options->preference->windows backgrou ...

  2. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...

  3. haproxy 负载elasticsearch 切换

    Attempted to send a bulk request to Elasticsearch configured at '["http://192.168.32.152:9200&q ...

  4. libeXosip2(2) -- General purpose API.

    General purpose API. general purpose API in libeXosip2-4.0.0. More... Modules eXosip2 configuration ...

  5. 最短路径问题：dijkstar

    算法描述: 输入图G,源点v0,输出源点到各点的最短距离D 中间变量v0保存当前已经处理到的顶点集合,v1保存剩余的集合 1.初始化v1,D 2.计算v0到v1各点的最短距离,保存到D for eac ...

  6. 链表的基本操作（Basic Operations on a Linked List）

    链表可以进行如下操作: 创建新链表 增加新元素 遍历链表 打印链表 下面定义了对应以上操作的基本函数. 创建新链表 新链表创建之后里面并没有任何元素,我们要为数据在内存中分配节点,再将节点插入链表.由 ...

  7. hdu1016Prime Ring Problem

     就是说,给你一个数n, 要你把1到n都连在一起成环. 每一个数不可反复, 且相连的两个数的和要是素数. 把全部情况输出来. 我是用dfs暴力出来的. 首先把素数打表, 然后每次顺时针预測下一个数 ...

  8. unity4.x for mac破解（含Unity全版本号破解）

    声明,破解方式及工具,均来源于国外互联网.仅供交流学习使用! 国外一个大仙做的破解.这位大侠实在是牛,全版本号跟进,win和mac的破解包都有.win下有类似于注冊机的Patch,mac下有crack ...

  9. 07_DICTIONARY_ACCESSIBILITY

    07_DICTIONARY_ACCESSIBILITY 控制对系统权限的限制: TRUE 有相应系统权限,允许访问SYS下的对象. FALSE 确保拥有可以访问任何对象的系统权限,但不可以访问SYS下 ...

  10. JS中面向对象的，对象理解、构造函数、原型、原型链

    6.1 理解对象 6.1.1 对象属性类型 ECMS属性有两种类型:数据属性和访问器属性 1 数据属性 [[configurable]] 表示能否通过Delete 删除属性从而从新定义属性,能否修改属 ...