javascript（十四）网页跳转、浏览器对象

location 当前URL的信息
示例：

location.href = "http://www.baidu.com";

history
history.back() 回到历史记录的上一网页
history.forward 回到下一个历史记录中的网址
history.go(num) 历史记录网页跳转
back()与go()的区别：
history.go(-1):后退+刷新
history.back():后退
示例：

<a href="javascript:history.back()">返回上一页</a>

浏览器对象
window：对象表示浏览器中打开的窗口。
1、open()：打开一个新的浏览器窗口或查找一个已命名的窗口。

<input type="button" id="btn" name="btn" value="打开窗口" onclick="open_new();">
<script type="text/javascript">
var new_window;
function open_new(){
    new_window = open('open.html','new_window','height=500,width=500,top=0,left=0,scrollbars=no');
}
</script>

2、print()：方法用于打印当前窗口的内容

 function btn_print(){
    //指定区域打印
    var str = document.getElementById('p_content').innerHTML;
    document.body.innerHTML = str;
    print();
}

3、close()：关闭浏览器窗口

function btn_close(){
	 new_window.close();
}

4、scrollTo(xpos,ypos)：方法可把内容滚动到指定的坐标,X和Y必填项。

function btn_scrollTo(){
    scrollTo(300,100);
}

5、scrollBy(xnum,ynum)：方法可把内容滚动指定的像素数,X和Y必填项。
X：把文档向右滚动的像素数。
Y：把文档向下滚动的像素数。

 function btn_scrollBy(){
     scrollBy(0,1000);
 }

6、onscroll：滚动条位置改变事件
例：

window.onscroll = function(){ 代码块.... }

7：location.reload([bForceGet])和location.replace(URL)方法
reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。 true, 则以GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)
replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
语法：location.replace(URL) 参数： URL

<script>
	function reloadPage(){
 		 location.reload()
	}
</script>
<input type="button" value="重新加载页面" onclick="reloadPage()">

8：window.scrollY / scrollX
document.documentElement.scrollTop/scrollLeft 获取浏览器整体滚动条纵向、横向位置。
谷歌：window.scrollY
IE：document.documentElement.scrollTop

window.onscroll = function(){
if(window.scrollY>200 || document.documentElement.scrollTop>200){
        document.getElementById('p_content').style.color="red";
    }
    else{
        document.getElementById('p_content').style.color="black";
    }
}

练习
制作动态导航条，高度大于500出现，小于500收起

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
    <style type="text/css">
        .container-fluid{
            width:100%;
            height:40px;
            background:blue;
            color:white;
            position:fixed;
            top:0px;
            left:0px;
        }
        p{
            height:2000px;
        }
    </style>
  </head>
  <body>
    <div class="container-fluid">
        Content here
    </div>
    <div>
        <p></p>
    </div>
    <script type="text/javascript">
     window.onscroll=function(){
        if (window.scrollY>500&&window.scrollY<1000||document.documentElement.scrollTop>500&&document.documentElement.scrollTop>1000) {
            document.getElementsByClassName('container-fluid')[0].style="display:none;";
        }else if (window.scrollY<500||document.documentElement.scrollTop<500) {
            document.getElementsByClassName('container-fluid')[0].style="position:fixed;";
        }
     }
    </script>
  </body>
</html>

javascript（十四）网页跳转、浏览器对象

猜你喜欢