js与浏览器,html内容的交互

一. window 全局变量

1.script 中var 声明变量
没有var 声明的变量 都是window全局变量
2.有id命名过的html节点也是全局对象 可以通过window访问
3.常用全局方法,都是省略了window alert 警告,confirm 确认,prompt弹框 setinterval延迟调用 isNaN 是否为非数字,document文档

二.Bom window对象

1.(window.)document.write()文档打印 对象

可以先var 一个值 ,然后再打印这个变量名,也可直接打印内容 结果都是相同的

 var arr = 'hello world'
            document.write(arr)

2.(window.)alert()警告 对象

alert(‘hello world’)

3.(window.)confirm 确认对象

confirm('hello world');

4.screen对象

screen对象可以调用差看 当前屏幕的宽高,可用屏幕宽高,还有当前浏览器的可视区域,通过打印即可查看

具体如下:

width 屏幕宽
height 屏幕高
avialWidth 除任务栏宽
avialHeight 除任务栏高
window.innerWidth 可视浏览器窗口宽
window.innerHeight 可视浏览器窗口高

查看方法:

document.write('<br/>屏幕的宽'+screen.width)
            document.write('<br/>屏幕的高'+screen.height)
            document.write('<br/>可用屏幕的宽'+screen.availWidth)
            document.write('<br/>可用屏幕的高'+screen.availHeight)
            document.write('<br/>浏览器可视区域的宽'+window.innerWidth)
            document.write('<br/>浏览器可视区域的高'+window.innerHeight)

 5.history 历史记录对象

当我们打开浏览器进行操作的时候,就会出现历史浏览记录,除了浏览器自带的上下步,我们还可以在浏览器内设置按钮实现操作。

 history.go(1)和 history.go(1)分别代表前进一步和后退一步,写完方法以后,在上面button按钮里面进行调用,就可以实现前进与倒退的点击效果了

6.location对象

location地址栏信息:可以查询地址信息,协议,域名,端口号等一些信息

    document.write('<br/>全信息'+location.href)
            document.write('<br/>协议'+location.protocol)
            document.write('<br/>域名'+location.hostname)
            document.write('<br/>路径'+location.pathname)
            document.write('<br/>端口号'+location.port)
            document.write('<br/>查询'+location.search)
            document.write('<br/>哈希'+location.hash)

7.navigator对象 

navigator对象  主要用于判断当前浏览器是pc端/还是移动端浏览如果当前值包含‘’Mobile‘’即为移动端,否则为pc端

var ua = navigator.userAgent;
            document.write("<br/>"+ua)
            if(ua.includes("Mobile")){
                document.write("<br/>手机浏览器")
            }else{
                document.write("<br/>pc浏览器")
            }

8.open与close方法

var win;

win.open()打开

win.close()关闭

设置按钮点击事件后即可使用

open用于实在在页面点击后,实现打开新页面,而且可以设置这个新页面的宽高,还有起始出现位置

width,height 打开窗口的宽
 top 距离屏幕左上角的位置, 
 left 与屏幕左上角的水平距离 

 三,事件

1.onload事件

<body οnlοad="myFunction()">

onload 事件在对象被加载后发生。

onload 最常用于 <body> 元素中,用于在网页完全加载所有内容(包括图像、脚本文件、CSS 文件等)后执行脚本。

 2.onscroll事件

调用方法:<div οnscrοll="myFunction()">

onscroll 事件在元素滚动条在滚动时触发。

 可以看到页面滚动后就会触发。

3.rasize事件

resize 事件是在浏览器窗口被重置时触发的,如当用户调整窗口大小,或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。 利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小。

window.onresize = function(){
                console.log('页面发生了变化');
                console.log('<br/> 页面宽度:'+window.innerWidth,'页面高度'+window.innerHeight);
            }

当我们在控制台收缩页面时就会触发,可以查看当前页面的宽高变化。

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值