js简单学-尺寸

最新推荐文章于 2024-03-26 16:10:14 发布

凉川望远

最新推荐文章于 2024-03-26 16:10:14 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/qq_24193261/article/details/52535914

版权

History 对象：记录了用户曾经浏览过的页面（URL）,并可以实现浏览器前进与后退相似导航的功能

window.history.[属性|方法]

属性：

length 返回浏览器历史列表中的URL数量。

方法：

back（）加载history列表中的前一个URL

forward() 加载history列表中的下一个URL

go() 加载history列表中的某一个具体的页面

例子：使用length属性，当前窗口的浏览历史总长度

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
</head>
<body>
</body>

</html>

例子：返回前一个/下一个浏览的页面

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
        function GoBack() {
           //window.history.back();
           window.history.go(-1);

window.history.forward();

// window.history.go(1);

        }

    </script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:

    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回前一个页面:
    <form>
       <input type="button" value="返回前一个页面" οnclick="GoBack();" />
    </form>
</body>
</html>

window.history.go(number);

参数：

1 前一个，go(1)等价forward();

0 当前页面

-1 后一个，go（-1）等价back();

其他数值要访问的URL在History的URL列表中的相对位置

Location 对象：用于获取或设置窗体的URL,并且可以用解析URL

location.[属性|方法]

属性

hash 设置或返回从井号（#）开始的URl(锚)

host 设置或返回主机名和当前URL的端口号

hostname 设置或返回当前URL的主机名

href 设置或返回完整的URL

pathname 设置或返回当前URL的路径部分

port 设置或返回当前的URL的端口号

protocol 设置或返回当前的URL的协议

search 设置或返回从问号（？）开始的URL(查询部分)

方法：

assign（）加载新的文档

reload(）重新加载当前文档

replac(）用新的文档替换当前的文档

例子：

location.assign("http://www.baidu.com");
   location.reload("http://wwwb.aidu.com");
   location.replace("http://www.baidu.com");

Navigator对象：包含有关浏览器的信息，通常用于检测浏览器与操作系统懂得版本

属性：

appCodeName 浏览器代码名的字符串表示

appName 返回浏览器的名称

appVersion 返回浏览器的平台和版本信息

platform 返回运行浏览器的操作系统平台

userAgent 返回由客户机发送服务器的user-agent头部的值

例子：查看浏览器的名称和版本

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

userAgent:返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）

语法:navigator.uerAgent

浏览器 chrome firefox IE

例子：使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
}

screen对象：用于获取用户的屏幕信息

window.screen.属性

属性

availHeight 窗口可以使用的屏幕的高度，单位像素

availWidth 窗口可以使用的屏幕宽度，单位像素

colorDepth 用户浏览器表示的颜色位数，通常为32（每像素的位数）

pixelDepth 用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持此属性）

height 屏幕的高度，单位像素

width 屏幕的宽度，单位像素

屏幕分辨率的高和宽

window.screen对象包含有关用户屏幕的信息

1.screen.height返回屏幕的分辨率的高、

2.screen.width返回屏幕分辨率的宽

例子：获取屏幕的高和宽

<script type="text/javascript">
  document.write( "屏幕宽度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>

屏幕可用高和宽度

1.screen.availlWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏

2.screen.avavilHeight属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏

例子：获取屏幕可用的高和宽

<script type="text/javascript">
  document.write( "可用宽度："+screen.availWidth+"px<br />" );
  document.write( "可用高度："+screen.availHeight+"px<br />" );
</script>

凉川望远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单学-尺寸

History 对象：记录了用户曾经浏览过的页面（URL）,并可以实现浏览器前进与后退相似导航的功能window.history.[属性|方法]属性：length 返回浏览器历史列表中的URL数量。方法：back（）加载history列表中的前一个URLforward() 加载history列表中的下一个URLgo() 加载history列表中的某一个具体的页面例
复制链接

扫一扫

js简单学-尺寸

“相关推荐”对你有帮助么？