首页 > 代码库 > javascript 之 location.href、跨窗口调用函数

javascript 之 location.href、跨窗口调用函数

2024-07-15 16:01:26   223人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/parent.location.href" /><input type="button" id="top" value="http://www.mamicode.com/top.location.href" /><input type="button" id="self" value="http://www.mamicode.com/self.location.href" /><input type="button" id="parentparent" value="http://www.mamicode.com/parentparent.location.href" /></body></html>

　　2.html 父窗口：

<html><head><title>js??</title><script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/3.html" name="Son" style="width:300px; height:300px;" ></iframe><input type="button" id="Outermost" value="http://www.mamicode.com/判断当前IFrame是否最外层" /><input type="button" id="Son" value="http://www.mamicode.com/控制儿子IFrame跳转" /><input type="button" id="SonFunction" value="http://www.mamicode.com/调用子窗口函数"><input type="button" id="ParentFunction" value="http://www.mamicode.com/调用父窗口函数"></body></html>

　　1.html 爷窗口：

<html><head><title>js</title><script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/2.html" style="width:500px; height:500px;" ></iframe></body></html>

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


联系
我们