前言:
此时我们对“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