首页 / 知识

JavaScript的BOM

2023-04-11 15:09:00

　　location对象
 
　　location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些
 
　　导航的功能，它既是window对象的属性，也是document对象的属性。
 
　　语法：location.href
 
　　功能：返回当前加载页面的完整URL
 
　　说明：location.href与window.location.href等价
 
　　语法：location.hash
 
　　功能：返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串
 
　　语法：location.host
 
　　功能：返回服务器名称和端口号（如果有）
 
　　语法：locationhostname
 
　　功能：返回不带端口号的服务器名称。
 
　　语法：location.pathname
 
　　功能：返回URL中的目录和（或）文件名。
 
　　语法：location.port
 
　　功能：返回URL中指定的端口号，如果没有，返回空字符串。
 
　　语法：location.protocol
 
　　功能：返回页面使用的协议
 
　　语法：location.search
 
　　功能：返回URL的查询字符串。这个字符串以问号开头。
 
　　语法：location.replace(url)
 
　　功能：重新定向URL
 
　　说明：使用location.replace不会再历时记录中生成新纪录。
 
　　语法：location.reload()
 
　　功能：重新加载当前显示的页面。
 
　　说明：
 
　　location.reload()有肯从缓冲中加载
 
　　location.reload(true)从服务器重新加载
 
　　history对象
 
　　history对象保存了用户在浏览器中访问页面的历史记录
 
　　语法：history.back()
 
　　功能：回到历史记录的上一步
 
　　说明：相当于使用了history.go(-1)
 
　　语法：location.forward()
 
　　功能：回到历时记录的下一步
 
　　说明：相当于使用了history.go(1)
 
　　语法：history.go(-n)
 
　　功能：回到历时记录的前n步
 
　　语法：history.go(n)
 
　　功能：回到历史记录的后n步
 
　　navigator对象
 
　　useragent：用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。
 
　　screen对象
 
　　语法：screen.availWidth
 
　　功能：返回可用的屏幕宽度
 
　　语法：screen.availHeight
 
　　功能：返回可用的屏幕高度
 
　　location01.html:
 
　　
 
　　
 
　　<!DOCTYPEhtml>
 
　　<html>
 
　　<head>
 
　　<metacharset="UTF-8">
 
　　<title>Document</title>
 
　　<styletype="text/css">
 
　　.box1{
 
　　height:900px;
 
　　background:#ccc;
 
　　}
 
　　.box2{
 
　　height:500px;
 
　　background-color:#333;
 
　　}
 
　　</style>
 
　　</head>
 
　　<body>
 
　　<divid="box1"></div>
 
　　<div></div>
 
　　<inputtype="button"id="btn"value="返回顶部">
 
　　<script>
 
　　btn.onclick=function(){
 
　　location.hash='#box1';
 
　　console.log(location.hash);
 
　　}
 
　　console.log(location.href);
 
　　console.log(location.hash);
 
　　console.log(location.host);
 
　　console.log(location.hostname);
 
　　console.log(location.pathname);
 
　　console.log(location.port);
 
　　console.log(location.protocol);
 
　　console.log(location.search);
 
　　</script>
 
　　</body>
 
　　</html>
 
　　location02.html:
 
　　
 
　　<!DOCTYPEhtml>
 
　　<html>
 
　　<head>
 
　　<metacharset="UTF-8">
 
　　<title>Document</title>
 
　　</head>
 
　　<body>
 
　　<inputtype="button"value="刷新"id="btn">
 
　　<script>
 
　　/*setTimeout(function(){
 
　　//location.href="https://www.baidu.com";
 
　　//window.location="https://www.baidu.com";
 
　　location.replace("https://www.baidu.com");
 
　　},1000);*/
 
　　document.getElementById('btn').onclick=function(){
 
　　location.reload();
 
　　//location.reload(true);
 
　　}
 
　　</script>
 
　　</body>
 
　　</html>
 
　　history01.html:
 
　　
 
　　<!DOCTYPEhtml>
 
　　<html>
 
　　<head>
 
　　<metacharset="UTF-8">
 
　　<title>Document</title>
 
　　</head>
 
　　<body>
 
　　<ahref="example_2.html">example_2.html</a>
 
　　<inputtype="button"value="后退"id="btn1">
 
　　<inputtype="button"value="前进"id="btn2">
 
　　<script>
 
　　varbtn1=document.getElementById('btn1');
 
　　varbtn2=document.getElementById('btn2');
 
　　btn1.onclick=function(){
 
　　//history.back();
 
　　history.go(-1);
 
　　}
 
　　btn2.onclick=function(){
 
　　history.forward()
 
　　//history.go(1);
 
　　}
 
　　</script>
 
　　</body>
 
　　</html>
 
　　navigator.html:
 
　　
 
　　<!DOCTYPEhtml>
 
　　<html>
 
　　<head>
 
　　<metacharset="UTF-8">
 
　　<title>Document</title>
 
　　</head>
 
　　<body>
 
　　<script>
 
　　functiongetBrowser(){
 
　　varexplorer=navigator.userAgent.toLowerCase();
 
　　varbrowser="";
 
　　if(explorer.indexOf("msie")>-1){
 
　　browser="IE";
 
　　}elseif(explorer.indexOf("chrome")>-1){
 
　　browser='Chrome';
 
　　}else{
 
　　browser='asdf';
 
　　}
 
　　returnbrowser;
 
　　}
 
　　varmsg="您用的是"+getBrowser()+'浏览器';
 
　　console.log(msg);
 
　　</script>
 
　　</body>
 
　　</html>
 
　　screen.html:
 
　　
 
　　<!DOCTYPEhtml>
 
　　<html>
 
　　<head>
 
　　<metacharset="UTF-8">
 
　　<title>Document</title>
 
　　</head>
 
　　<body>
 
　　<script>
 
　　console.log(screen.availWidth);
 
　　console.log(screen.availHeight);
 
　　console.log(window.innerWidth);
 
　　console.log(window.innerHeight);
 
　　</script>
 
　　</body>
 
　　</html>




本文转载自中文网



 

对象属性加载语法文档导航

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢