龙空技术网

JS|获取浏览器和窗口属性数据

小智雅汇 290

前言:

此时我们对“js全屏f11”大概比较注意,看官们都需要剖析一些“js全屏f11”的相关知识。那么小编也在网上搜集了一些关于“js全屏f11””的相关文章,希望看官们能喜欢,朋友们一起来了解一下吧!

1 JS获取浏览器属性数据

<h3>你目前所使用的浏览器的数据:</h3>

<div class="data">

<script type="text/javascript">

var userAgent = navigator.userAgent.toLowerCase();

var browser =

(browser = userAgent.match(/qqbrowser\/([\d.]+)/))?"qqbrowser/"+browser[1]:

(browser = userAgent.match(/se\s+2.x/))?"sogou/2.x": //sougou

(browser = userAgent.match(/msie\s+([\d.]+)/))?"msie/"+browser[1]: //ie

(browser = userAgent.match(/chrome\/([\d.]+)/))?"chrome/"+browser[1]: //chrome

(browser = userAgent.match(/firefox\/([\d.]+)/))?"firefox/"+browser[1]: //firefox

(browser = userAgent.match(/version\/([\d.]+)\s+safari\/([\d.]+)/))?"safari/"+browser[1]: //safari

(browser = userAgent.match(/opera\/([\d.]+)([\w\W]+)version\/([\d.]+)/))?"opera/"+browser[3]: //opera

"other browser";

//以上是条件运算符“?:"的嵌套使用

var browser4 = browser.substr(0,6);

document.write("<table>");

document.write("<tr><td>" + "Browser:" + "</td>");

document.write("<td>" + browser4 + "</td></tr>" );

document.write("<tr><td>" + "Browser Version:" + "</td>");

document.write("<td>" + browser + "</td></tr>" );

document.write("<tr><td>" + "userAgent:" + "</td>");

document.write("<td>" + userAgent + "</td></tr>" );

var appVersion = navigator.appVersion.toLowerCase();

document.write("<tr><td>" + "appVersion:" + "</td>");

document.write("<td>" + appVersion + "</td></tr>" );

var appCodeName = navigator.appCodeName.toLowerCase();

document.write("<tr><td>" + "appCodeName:" + "</td>");

document.write("<td>" + appCodeName + "</td></tr>" );

var appName = navigator.appName.toLowerCase();

document.write("<tr><td>" + "appName:" + "</td>");

document.write("<td>" + appName + "</td></tr>" );

//var language = navigator.language.toLowerCase(); (ie下无此属性)

//document.write("language:" + language + "<br>" );

var platform = navigator.platform.toLowerCase();

document.write("<tr><td>" + "platform:" + "</td>");

document.write("<td>" + platform + "</td></tr>" );

document.write("</table>");

</script>

</div>

使用chrome显示网页内容如下:

使用firefox显示网页内容如下:

2 JS获取窗口数据

<h3>浏览器窗口数据:</h3>

<div class="data">

<table>

<col width="50%" />

<col width="50%" />

<tr><td>右边的数据反映浏览器窗口高宽的数据(单位是px,不包括上端的菜单栏和工具栏,也不包括下端的状态栏;按F11全屏显示或“还原”按钮并调整大小也会有不同的数据反馈。)</td>

<td>

<form action="#" method="get" name="form1" id="form1">

<!--显示浏览器窗口的实际尺寸-->

<p>浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/> </p>

<p>浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/> </p>

</form>

</td></tr></table>

</div>

<script type="text/javascript">

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数:获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测,获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//调用函数,获取数值

window.onresize=findDimensions;

</script>

使用chrome显示网页内容如下:

使用firefox显示网页内容如下:

-End-

标签: #js全屏f11