js--BOM--系统对话框\location对象\ history对象

最新推荐文章于 2024-08-22 14:32:34 发布

米卡小米

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量63

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cmy741741/article/details/121230269

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

u 系统对话框

alert(),confirm(),prompt() 方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。

l alert()

该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个 "OK" 按钮。主要用来显示警告信息

l confirm()

确认对话框，显示包含指定的文本和一个 "OK" 按钮以及 "Cancel" 按钮。该方法返回布尔值， true 表示单击了 OK ， false 表示单击 cancel或者 X 按钮

l prompt()

会话框，提示用户输入一些文本。显示包含文本， ok 按钮 ,cancel 按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数, 要显示给用户的文本提示和文本输入域的默认值。

如果用户单击 OK 按钮，该方法返回输入域的值，如果用户单击了Cancel 或者关闭对话框该方法返回 null

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统对话框</title>
  <script>
    console.log(1);
    // 警告弹框
    // alert(111)
    // 确认弹框
    // var result = confirm('是否确认删除')
    // 会话框
    var result = prompt('请输入姓名');
    console.log(result);
  </script>
</head>
<body>
  
</body>
</html>

u location对象

是最有用的 BOM 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。 location 是个神奇的对象，既是 window 的对象也是 document 的对象。

console.log(window.location == document.location);//true

属性：

host 返回服务器名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整 URL

pathname 返回 URL 的目录和文件名

port 返回 URL 中指定的端口号

protocol 返回页面使用的协议

search 返回 URL 的查询字符串。这个字符串以问号开头

方法：

assign() 传递一个 url 参数，打开新 url ，并在浏览记录中生成一条记录。

replace() 参数为一个 url, 结果会导致浏览器位置改变，但不会在历史记录中生成新记录

reload() 重新加载当前显示的页面，参数可以为 boolean 类型，默认为 false, 表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为 false, 强制从服务器中重新加载

为 location.href; window.location 设置为一个 URL 值，也会以该值调用 assign() 方法。以下三句话效果一样

window.location="http://www.baidu.com";

location.href="http://www.baidu.com"

location.assign("http://www.baidu.com") ;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOM-location</title>
  <script>
    // console.log(window.location === document.location);
    // console.log(location);
    window.onload = function() {
      var btns = document.getElementsByTagName('button')
      btns[0].onclick = function() {
        // location.assign('./1-超时调用-间歇调用.html')
        // location.replace('./1-超时调用-间歇调用.html')
        // location.href = './1-超时调用-间歇调用.html'
        // 前进一步
        // history.forward()
        history.go(1)
        
      }
      btns[1].onclick = function() {
        // 后退一步
        history.back()
      }
      btns[2].onclick = function() {
        // 页面重载
        location.reload(true)
      }
      btns[3].onclick = function() {
        window.open('./1-超时调用-间歇调用.html')
      }
    }
  </script>
</head>
<body>
  <button>下一页</button>
  <button>上一页</button>
  <button>刷新</button>
  <button>新窗口</button>
</body>
</html>

u history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL ，不过借由用户访问过的页面列表，同样可以在不知道实际 URL 的情况下实现后退前进 , 注意：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

length 返回历史列表中的网址数

注意： IE 和 Opera 从 0 开始，而 Firefox 、 Chrome 和 Safari 从 1 开始。

back() 加载 history 列表中的前一个 URL

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

go() 加载 history 列表中的某个具体页面负数表示向后跳转，正数表示向前跳转

米卡小米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js--BOM--系统对话框\location对象\ history对象

u 系统对话框 alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。 l alert() 该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息 l confirm() 确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击cancel或者X按钮 l
复制链接

扫一扫

专栏目录