JavaScript操作BOM

最新推荐文章于 2022-09-29 16:28:43 发布

废柴前端

最新推荐文章于 2022-09-29 16:28:43 发布

阅读量268

点赞数

分类专栏： JavaScript操作BOM对象文章标签： JavaScript操作BOM

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/zhuxiandan/article/details/77035208

版权

JavaScript操作BOM对象专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BOM概念

BOM是浏览器对象模型的简称（Browser Object Model），BOM尚无正式标准，由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

Window对象

所有浏览器都支持Window对象，它表示浏览器窗口。所有的JavaScript全局对象，函数，以及变量均自动成为Window的对象成员，全局变量是Window对象的属性，全局函数时Window对象的方法。甚至可以说HTML DOM的document也是BOM的Window对象之一。

Window尺寸

在JavaScript中，有三种方法能够确定浏览器窗口的宽度、高度（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerWith;     // 获取浏览器窗口的内部宽度
window.innerHeigth;  //获取浏览器窗口的内部高度

对于IE8、7、6、5：

document.body.clientWidth;   //获取浏览器窗口的内部宽度

document.body.clientHeight; //获取浏览器窗口的内部高度

实例：

<script>
      window.οnlοad=function () {
          var btn=document.getElementsByTagName('button');
          btn[0].οnclick=function () {
              var width=window.innerWidth;
              var height=window.innerHeight;
              alert(width);
              alert(height);
          }
      }
</script>
</head>
<body>
<button>click me</button>
</body>

Window对象的一些其他方法：

①window.open():浏览器打开一个新窗口。

②window.close():浏览器关闭当前窗口。

③window.moveTo():移动当前浏览器窗口。

④window.resizeTo():调整当前浏览器窗口的尺寸。

实例：

<script>
      window.οnlοad=function () {
          var btn=document.getElementsByTagName('button');
          var thisWindow;
          btn[0].οnclick=function () {
              var width=window.innerWidth;
              var height=window.innerHeight;
              alert(width);
              alert(height);
          }
          btn[1].οnclick=function () {
             thisWindow= window.open('http://www.baidu.com','_blank','width=500,height=800');
              //打开一个新窗口，第一个参数为URL地址，第二个参数为打开方式，第三个参数设置浏览器的宽高
          }
          btn[2].οnclick=function () {
              thisWindow.close();              //关闭当前窗口
          }
          btn[3].οnclick=function () {
             thisWindow.moveTo(500,500);     //移动当前窗口位置，第一个参数为横坐标，第二个参数为纵坐标
          }
          btn[4].οnclick=function () {
             thisWindow.resizeTo(600,300)   //重置浏览器窗口大小，第一个参数为width，第二个参数为height
          }
          btn[5].οnclick=function () {
              thisWindow.focus()
          }
      }
</script>
</head>
<body>
<button>click me</button>
<button>window.open()</button>
<button>window.close()</button>
<button>window.moveTo()</button>
<button>window.resizeTo()</button>
<button>window.focus()</button>
</body>

window.screen对象

①window.screen.availWidth:获取屏幕可用宽度。（window可以省略不写）

②window.screen.availHeight：获取屏幕可同高度。（window可以省略不写）

实例：

<script>
      window.οnlοad=function () {
          var btn=document.getElementsByTagName('button');
          btn[0].οnclick=function () {
              alert(window.screen.availWidth);  //获取屏幕可用宽度
              alert(window.screen.availHeight);  //获取屏幕可用高度
          }
      }
</script>
</head>
<body>
<button>click me</button>
</body>

window.location对象

JavaScript里使用window.location来获取当前页面的URL地址，并把浏览器重定向到新的页面。

①location.hostname：返回web主机的域名

②location.pathname：返回当前页面的路径和文件名

③location.port：返回web主机的端口号

④location.href：返回当前页面的URL地址

实例：

<script>
      window.οnlοad=function () {
          var btn=document.getElementsByTagName('button');
          btn[0].οnclick=function () {
              alert('当前页面的URL为：'+location.href);
              alert("当前页面的路径和文件名为："+location.pathname);
              alert("当前页面的端口号为："+location.port);
              alert("当前主机域名为："+location.hostname)
          }
      }
</script>
</head>
<body>
<button>click me</button>
</body>

⑤location.assign：打开一个新的路径窗口

实例：
<script>
      window.οnlοad=function () {
          var btn=document.getElementsByTagName('button');
          btn[0].οnclick=function () {
              location.assign('http://www.baidu.com'); //打开新的URL路径
          }
      }
</script>
</head>
<body>
<button>click me</button>
</body>

⑥location.reload:如果为true，将强制刷新当前窗口

实例：
<script>
      window.οnlοad=function () {
          var btn=document.getElementsByTagName('button');
          btn[0].οnclick=function () {
              location.reload(true);  //强制刷新当前窗口
          }
      }
</script>
</head>
<body>
<button>click me</button>
</body>

⑦history.back：返回上一页

⑧history.forward：进入下一页

JavaScript弹窗

①警告框：window.alert() wnidow可以省略不写，直接调用alert()方法。

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

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("你好，我是一个警告框！");
}
</script>
</head>
<body>

<input type="button" οnclick="myFunction()" value="显示警告框">

</body>
</html>

②确认框：window.confirm()

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Confirm</title>
</head>
<body>
<p>点击按钮，显示确认框。</p>
<button οnclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

③提示框： window.prompt(" sometext "," defaultvalue ");

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prompt</title>
</head>
<body>
<p>点击按钮查看输入的对话框。</p>
<button οnclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "！今天感觉如何？";
	    document.getElementById("demo").innerHTML=x;
	}
}
</script>
</body>
</html>

标注：在弹窗里面如果要换行，请使用“\n”来换行

废柴前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript操作BOM

BOM概念BOM是浏览器对象模型的简称（Browser Object Model），BOM尚无正式标准，由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。Window对象所有浏览器都支持Window对象，它表示浏览器窗口。所有的JavaScript全局对象，函数，以及变量均自动成为Window的对象成员，全局变量是Window对
复制链接

扫一扫