JavaScript（12）浏览器对象模型

最新推荐文章于 2024-05-17 20:45:22 发布

馨宇心苑

最新推荐文章于 2024-05-17 20:45:22 发布

阅读量695

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u014194675/article/details/25797971

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location
window.location 对象在编写时可不使用 window 这个前缀。
一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL。

document.write(location.href);

location.pathname 属性返回 URL 的路径名。

document.write(location.pathname);

location.assign() 方法加载新的文档。

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.w3school.com.cn")
  }
</script>
</head>
<body>

<input type="button" value="加载新文档" οnclick="newDoc()">

</body>
</html>

JavaScript Window History

window.history 对象包含浏览器的历史。

Window History
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

history.back() 方法加载历史列表中的前一个 URL。

<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" οnclick="goBack()">

</body>

history forward() 方法加载历史列表中的下一个 URL。

<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" οnclick="goForward()">

</body>

JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

Window Navigator
window.navigator 对象在编写时可不使用 window 这个前缀。

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，可以据此识别出 Opera。
例子：if (window.opera) {...some action...}

JavaScript 消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框
警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert("我是警告框！！")

alert("带有折行的" + '\n' + "警告框")

确认框
确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</script>
</head>
<body>

<input type="button" οnclick="show_confirm()" value="Show a confirm box" />

</body>

提示框
提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
    document.write("你好！" + name + " 今天过得怎么样？")
    }
  }
</script>
</head>
<body>

<input type="button" οnclick="disp_prompt()" value="显示提示框" />

</body>