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

公告

昵称：逆心
园龄： 13年4个月
粉丝： 2573
关注： 31

+加关注

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

1. Re:逻辑数据库设计 - 单纯的树(递归关系数据)
不错
--Just-Like
2. Re:SQL Server Profiler工具
感谢分享
数据库ID:SELECT DB_IC('Northwind') ，这里应该是SELECT DB_ID('Northwind')
--尛鱻鱻
3. Re:逻辑数据库设计 - 单纯的树(递归关系数据)
可以，确实很好的解决方案
--瓜瓜龙
4. Re:NHibernate之映射文件配置说明
宝藏文章
--无烟棒棒糖
5. Re:C# 排列组合
膜拜大佬
--协作者

javascript 之 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.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>