js-location.href几种用法的区别

最新推荐文章于 2024-02-01 09:13:50 发布

Mars-xq

最新推荐文章于 2024-02-01 09:13:50 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_31057219/article/details/65441416

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #fce8cd">

<form id="form1" action="" >
    <div>
        <strong>这是a.html页面<strong>
            <br>
            <iframe src="b.html" width="500px" height="300px">

            </iframe>
        </strong></strong>
    </div>
</form>


</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #ff8888">

<span>这是b.html</span>
<span id="span1"></span>
<br/>
<iframe src="c.html" width="500px" height="300px">

</iframe>

</body>
</html>

c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: #03A9F4">

<span><strong>这是c.html：</strong>
</span>
<span id="span1">

</span>
<br/>
<iframe src="d.html" width="500px" height="300px"></iframe>

</body>
</html>

d.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function jump() {
            //经测试：window.location.href与
            // location.href,
            // self.location.href,
            // location.href都是本页面跳转作用一样
            window.location.href = "http://www.baidu.com";//d 本界面被替换
//                   location.href="http://www.baidu.com";
//              self.location.href="http://www.baidu.com";
//              this.location.href="http://www.baidu.com";


            //本页面的父页面跳转：上一层页面跳转
//            parent.location.href='http://www.baidu.com';//c 父界面被替换

            //最外层的页面跳转
//            top.location.href = 'http://www.baidu.com';//全被替换

        }
    </script>
</head>
<body style="background-color: aqua">

<span>这是d.html：</span>
<span id="span1"></span>
<br/>
<br/>
<br/>
<input type='button' onclick='jump();' value='跳转'>
<!--<iframe src="d.html" width="500px" height="300px"></iframe>-->
</body>
</html>

点击前：

这里写图片描述

window.location.href和
location.href,
self.location.href
this.location.href
都是本页面跳转作用一样

这里写图片描述

parent.location.href
本页面的父页面跳转：上一层页面跳转

这里写图片描述

top.location.href
最外层的页面跳转

这里写图片描述

参考：

详解location.href几种用法的区别

Mars-xq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js-location.href几种用法的区别

a.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body style="bac
复制链接

扫一扫