-->

臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > JS > js基础-窗口-浏览器-客户端屏幕-历史

js基础-窗口-浏览器-客户端屏幕-历史

所属分类: JS   2019-12-27 16:19:24  编辑:admin  浏览次数 30 次

JavaScript Window(窗口)

获取文档显示区域的高度和宽度

页面加载会自动创建window对象,所以无需手动创建。通过window对象可以获取文档显示区域的高度和宽度

<script>

  document.write("文档内容");

  document.write("文档显示区域的宽度"+window.innerWidth);

  document.write("<br>");

  document.write("文档显示区域的高度"+window.innerHeight);

</script>

 

获取外部窗体的宽度和高度

所谓的外部窗体即浏览器,可能用的是360,火狐,IE, Chrome等等。

<script>

  document.write("浏览器的宽度:"+window.outerWidth);

  document.write("<br>");

  document.write("浏览器的高度:"+window.outerHeight);

</script>

 

打开一个新的窗口

碰到一些网站会自动打开另一个网站是通过windowopen方法做到的(不建议使用),如果需要打开一个新的网站,应该通过超级链接等方式让用户主动打开,在没有告知用户的前提下就打开一个新的网站会影响用户的体验

<script>

function openNewWindow(){

  myWindow=window.open("/");

}

</script>

<button onclick="openNewWindow()">打开一个新的窗口</button>

 

JavaScript Navigator(浏览器)

打印浏览器相关信息

<script type="text/javascript">

document.write("<p>浏览器产品名称:");

document.write(navigator.appName + "</p>");

 

document.write("<p>浏览器版本号:");

document.write(navigator.appVersion + "</p>");

 

document.write("<p>浏览器内部代码:");

document.write(navigator.appCodeName + "</p>");

 

document.write("<p>操作系统:");

document.write(navigator.platform + "</p>");

 

document.write("<p>是否启用Cookies");

document.write(navigator.cookieEnabled + "</p>");

 

document.write("<p>浏览器的用户代理报头:");

document.write(navigator.userAgent + "</p>");

</script>

 

JavaScript Screen (客户端屏幕)

返回用户的屏幕大小,以及可用屏幕大小

<html>

<body>

<script type="text/javascript">

document.write("用户的屏幕分辨率: ")

document.write(screen.width + "*" + screen.height)

document.write("<br />")

document.write("可用区域大小: ")

document.write(screen.availWidth + "*" + screen.availHeight)

document.write("<br />")

</script>

</body>

</html>

 

JavaScript History(访问历史)

返回上一次的访问

<script>

function goBack()

  {

     history.back();

  }

</script>

 

<button onclick="goBack()">返回</button>

 

返回上上次的访问

<script>

function goBack()

  {

     history.go(-2); //-1表示上次,-2表示上上次,以次类推

  }

</script>

<button onclick="goBack()">返回上上次</button>


Web文章检索

Web文章目录