BOM中window简介

一、BOM-window简介

①window.location.href和window.location.assign均可跳转页面，支持回退

②window.location.replace可以跳转页面，不支持回退

③window.location.reload刷新页面，传入参数true时，强制刷新，不留缓存

<!DOCTYPE html>

<head>

<title>BOM window</title>

<style>

body {

background-color : red;

}

</style>

</head>

<body>

// BOM 对象 document

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

document.write(window.document);

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

// 展示当前页面中的所有框架的集合

document.write(window.frames);

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

// 用于反应浏览器及其功能的对象

document.write(window.navigator);

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

// 提供浏览器以外的环境信息

document.write(window.screen);

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

// window.location

// 跳转页面

function href() {

window.location.href = "js_math_demo.html";

}

// 刷新，可穿参数true，强制刷新不留缓存

function refresh(){

window.location.reload();

}

// assign()

// 加载新的页面

function func(){

window.location.assign("js_math_demo.html");

}

// 加载新页面，不能回退

function repl(){

window.location.replace("js_math_demo.html");

}

</script>

</body>

</html>

二、window.history对象

①获取历史长度window.history.length

②下一页window.history.forward

③上一页window.history.back

④跳转至指定页面window.history.go，是正数时前进，是负数时后退

三、window函数及事件

Ⅰ函数

①打开新窗口open

②关闭当前窗口close

<!DOCTYPE html>

<head>

<title>BOM window 函数</title>

</head>

<body>

<button οnclick="openWindow()"> 打开新窗口 </button>

<button οnclick="closeWindow()"> 关闭当前窗口 </button>

// open

function openWindow(){

window.open("BOM_window_demo.html","blank","width=200px, height=200px, top=10px, left=10px");

}

// close

function closeWindow(){

window.close();

}

</script>

</body>

</html>

Ⅱ事件

①onload 加载事件：页面加载完成后自动触发

②onscroll 滚动事件

<!DOCTYPE html>

<head>

<title>window 事件</title>

<style>

body {

height : 3000px;

}

</style>

</head>

<body>

// 事件

// onload 加载事件：页面完成加载后自动触发

window.onload = function(){

document.write("hello");

}

// onscroll 滚动事件

window.onscroll = function (){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

console.log(scrollTop);

}

</script>

</body>

</html>

BOM中window简介相关推荐

JavaScript中常见键盘事件以及BOM中window常用对象
一,键盘事件 keypress键盘按下触发,但是不能识别crtl,shift方向键 keydown键盘按下触发,所有按键都支持,区别于keypress keyup键盘弹起触发代码展示: docume ...
php 头bom_关于php中bom头的简介
关于php中bom头的简介发布时间:2020-06-30 17:48:12 来源:亿速云阅读:99 作者:清晨这篇文章主要介绍关于php中bom头的简介,文中示例代码介绍的非常详细,具有一定的参 ...
前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
html window 属性,html中window对象top 、self 、parent 等属性
top 属性返回最顶层的先辈窗口. 该属性返回对一个顶级窗口的只读引用.如果窗口本身就是一个顶级窗口,top 属性存放对窗口自身的引用.如果窗口是一个框架,那么 top 属性引用包含框架的顶层窗口. ...
js中WINDOW对象中的location成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...
js中WINDOW对象中的navigator成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的navigator成员对象 naviga ...
js中WINDOW对象
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象 BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一 ...
C++中rdbuf()简介及文件流的概念
2019独角兽企业重金招聘Python工程师标准>>> C++中rdbuf()简介及文件流的概念 Name:qianghaohao #include <cstring> ...
关于js中window.location.href、location.href 等如何跳转
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

BOM中window简介

BOM中window简介相关推荐

最新文章

热门文章