JavaScript 一些有关 BOM 的笔记

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

浏览器窗口

参看我以前的文章：

window.open()

var win = window.open(URL, name, specs, replace);

// win : 一个指向 window.open() 打开的窗口对象的引用
// Url : 需要载入的url地址
// name : 新窗口的名称
// specs : 可选值，设置新窗口的特性

更详细语法，点这里。下面举一个例子：

var win = window.open(
  "http://blog.percymong.com",
  "_blank",
  "width=400,height=600,left=100,top=50,scrollbars=yes,resizable=no"
);

setTimeout(function() {
  win.moveTo(500, 0);
}, 2000);
setTimeout(function() {
  var x = 400,
    y = 600;
  for (let i = 0; i < 200; i++) {
    setTimeout(function() {
      win.resizeTo(x++, y--);
    }, 100);
  }
}, 3500);
setTimeout(function() {
  if (confirm("要关掉这个窗口吗？")) {
    win.close();
    alert("已成功关闭！");
  } else {
    alert("好吧，听你的！");
  }
}, 5000);
  • 注意：如果你在本站某个页面上打开浏览器控制端，将上面的代码复制粘贴于控制端运行，会达到预期的效果。但是如果你在别的页面（比如在百度搜索结果页面上），运行上面的代码，会发现窗口不会被移动位置，也不会被改变宽度高度。这是因为浏览器的同源安全策略。这里先提一下，以后再总结。

先附上两个有关同源策略的链接：

系统对话框

  • alert()
  • confirm( text )
  • prompt( text , value )
if (confirm("你想测试这3个函数吗？")) {
  if (prompt("你喜欢谁？", "") === "zyj") {
    alert("哈哈，我也喜欢！");
  } else {
    alert("注单身！");
  }
} else {
  alert("我就呵呵了！");
}

location 对象

  • 属性

loaction-prop

location.search 返回的信息不便于我们直接访问，所以下面便封装了一个函数用来将这个返回的信息拼装成为一个对象，方便访问。

// 解析查询字符串

function getQueryStringArgs() {
  var qs = location.search; // 查询字符串
  var args = {}; // 返回保存数据的对象

  if (qs.length > 0) {
    qs = qs.substring(1);
  } else {
    return args;
  }

  var items = [],
    item = null,
    name = null,
    value = null,
    len;
  items = qs.split("&");
  len = items.length;

  for (let i = 0; i < len; i++) {
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);

    if (name.length) {
      args[name] = value;
    }
  }

  return args;
}
  • 方法
    • location.assign(url) : 打开新的文档
    • location.replace(url) : 用新的文档替换当前文档
    • location.reload(boolean) : 重新加载当前文档
// 我有 3 种办法跳转页面到百度首页

location.assign("https://www.baidu.com/");
window.location = "https://www.baidu.com/";
location.href = "https://www.baidu.com/";
location.reload(); //重新加载，有缓存，从缓存取资源
location.reload(true); //重新加载，服务器重新加载

navigator 对象包含有关浏览器的信息

暂时没怎么用过，先不写什么了。

history 对象

window.history 是一个只读属性，用来获取 History 对象的引用。History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

  • history.length : 当前标签页存在的历史纪录条数
  • history.go(-1) : 后退一页
  • history.go(1) : 前进一页
  • history.go(2) : 前进两页

还有两个简写方法 back() 和 forward() 用来代替 go() 方法，这两个方法用来模拟浏览器的 后退 和 前进 按钮。

history.back(); // 后退一页
history.forward(); // 前进一页