前端：JavaScript(三) BOM对象

最新推荐文章于 2022-04-20 22:38:57 发布

Savannah_Wen

最新推荐文章于 2022-04-20 22:38:57 发布

阅读量91

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_48723926/article/details/115007022

版权

🌟BOM (Browser Object Model):浏览器对象模型，可以与浏览器进行互动的对象结构。
🌟BOM 的 window对象
✨frame();//获取所有窗口，数组形式输出
document.write(window.frames.length); 输出窗口数量1
✨open(); //打开一个窗口
<button οnclick=“window.open(‘js.html’,’aa’,’width=“200”,height=“200”)”>打开一个窗口
点击这个按钮会打开一个地址为js.html,名字为aa的页面，如果不命名，会一直打开很多窗口，命名只会打开一个
✨window.alert(“ok”);//弹框只有一个按钮
✨boolean b =window.confirm(“确定要删除吗”);//弹框有两个按钮
✨var mister = window.prompt(“请输入你的邮箱？”);//弹框可输入 alert(mstr); //弹框弹出输入内容

🌟BOM 的 navigator 对象和 screen对象
✨navigator浏览器信息的获取

<script type="text/javascript">
    with(document) {
         write ("你的浏览器信息：<ul>");
         write ("<li>代码："+navigator.appCodeName+"</li>");
         write ("<li>名称："+navigator.appName+"</li>");
         write ("<li>版本："+navigator.appVersion+"</li>");
         write ("<li>语言："+navigator.language+"</li>");
         write ("<li>编译平台："+navigator.platform+"</li>");
         write ("<li>用户表头："+navigator.userAgent+"</li>");
         write ("</ul>");
    }

    //判断当前浏览器
    var explorer =navigator.userAgent ;
if (explorer.indexOf("MSIE") >= 0) {
        alert("ie");
    }
    //Chrome
    else if(explorer.indexOf("Chrome") >= 0){
        alert("Chrome");
    }

✨Screen
用于获取屏幕窗口的大小（分辨率）

<body>
    <h1>JavaScript中的BOM--screen对象</h1> 
    <a href="js04.html">js04.html</a><br/><br/>
</body>
<script>
    document.write( "屏幕宽度："+screen.width+"px<br />" );
    document.write( "屏幕高度："+screen.height+"px<br />" );
    document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );
    document.write( "屏幕可用高度："+screen.availHeight+"px<br/>" );
    document.write( "宽度："+window.innerWidth+"px<br />" );
    document.write( "高度："+window.innerHeight+"px<br />" );
</script>

🌟BOM 的history 对象和 location对象
✨history.go();//后退或前进一步,回顾刚才访问的网页

<body>
    <h1>JavaScript中的BOM--history对象</h1>
    <button onclick="window.history.back();">后退一步</button>
    <button onclick="window.history.go(-1);">后退一步</button>
    <button onclick="window.history.go(-2);">后退二步</button><br/><br/>
    <button onclick="window.history.forward();">前进一步</button>
    <button onclick="window.history.go(1);">前进一步</button>
    <button onclick="window.history.go(2);">前进二步</button><br/><br/>
    <a href="js03.html">js03.html</a><br/><br/>
</body>

✨location 对象
1）location.href=“”//获取一个完整的url地址，当前页面直接跳转到所给地址
2）location.reload(); //刷新页面
3）window.location.href;//输出当前地址

<body>
    <h1>JavaScript中的BOM--location对象</h1>
    <button onclick="window.location.href='http://www.baidu.com'">点击跳转到百度</button>
    <button onclick="window.location.reload()">刷新</button>
</body>
<script type="text/javascript">
      document.write("<br/>当前地址："+window.location.href);
</script>

Savannah_Wen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：JavaScript(三) BOM对象

????BOM (Browser Object Model):浏览器对象模型，可以与浏览器进行互动的对象结构。????BOM 的 window对象✨frame();//获取所有窗口，数组形式输出document.write(window.frames.length); 输出窗口数量1✨open(); //打开一个窗口<button οnclick=“window.open(‘js.html’,’aa’,’width=“200”,height=“200”)”>打开一个窗口点击这个按钮会
复制链接

扫一扫