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. VS下 dllimport与dllexport作用与区别

    我相信写WIN32程序的人,做过DLL,都会很清楚__declspec(dllexport)的作用,它就是为了省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是C++的类的话 ...

  2. Friendly number

    Friendly number Long numbers can be made to look nicer, so let’s write some code to do just that. Yo ...

  3. Best Meeting Point 解答

    Question A group of two or more people wants to meet and minimize the total travel distance. You are ...

  4. Binary Search Tree DFS Template

    Two methods: 1. Traverse 2. Divide & Conquer // Traverse: usually do not have return value publi ...

  5. 烟雾检测笔记1--《Video-based smoke detection with histogram sequence of LBP and LBPV pyramids》解析、实现

    基于HEP(histograms of equivalent patterns[1])框架下的特征具有良好的纹理分类效果,LBP(local binary patterns[2])属于HEP框架下最常 ...

  6. 《Algorithms 4th Edition》读书笔记——2.4 优先队列(priority queue)-Ⅲ

    2.4.3 堆的定义 数据结构二叉堆能够很好地实现优先队列的基本操作.在二叉堆的数组中,每个元素都要保证大于等于另两个特定位置的元素.相应地,这些位置的元素又至少要大于等于数组中的两个元素,以此类推. ...

  7. Openstack no valid hot

    错误: 创建实例 "ce" 失败: 请稍后再试 [错误: No valid host was found. ].

  8. MVC中使用EF(1)：为ASP.NET MVC程序创建Entity Framework数据模型

    为ASP.NET MVC程序创建Entity Framework数据模型 (1 of 10) By  Tom Dykstra |July 30, 2013 Translated by litdwg   ...

  9. memcached学习——memcached的内存分配机制Slab Allocation、内存使用机制LRU、常用监控记录（四）

    内存分配机制Slab Allocation 本文参考博客:https://my.oschina.net/bieber/blog/505458 Memcached的内存分配是以slabs为单位的,会根据 ...

  10. 字符(汉子)转换为ASCII

    一般在jdk里面都会自包含一个官方提供的转换工具:native2ascii.exe 调用方法: 打开cmd界面,使用cd  C:\Program Files\Java\jdk1.6.0_39\bin命 ...