JS---BOM

最新推荐文章于 2024-10-02 21:42:33 发布
最新推荐文章于 2024-10-02 21:42:33 发布
阅读量107 收藏
点赞数
分类专栏： 前端（JavaScript、Vue）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55999942/article/details/119224964
版权

​

BOM

1、open和close

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>open和close</title>

    </head>

    <body>

        <script type="text/javascript">

            /*

                1、BOM编程中，window对象是顶级对象，代表浏览器窗口

                2、window有open和close方法，可以开启窗口和关闭窗口

            */

        </script>



        <input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>

        <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self');"/>

        <input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com','_blank');"/>

        <input type="button" value="开启百度（父窗口）" onclick="window.open('http://www.baidu.com' ,'_parent')"/>

        <input type="button" value="开启百度（顶级窗口）" onclick="window.open('http://www.baidu.com','_top');"/>



        <input type="button" value="打开open" onclick="window.open('003、open.html');"/>

    </body>

</html>

2、弹出消息框和确认框

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>弹出消息框和确认框</title>

    </head>

    <body>

        <script type="text/javascript ">

            function del() {

               /* var ok=window.confirm("确认删除数据吗？？")

                if (ok){

                    alert('已成功删除')

                }else {

                    alert('已退出删除')

                }*/

                if (window.confirm("确认删除数据吗？？")){

                    alert('已成功删除')

                }else {

                    alert('已退出删除')

                }

            }

        </script>

        <input type="button" value="弹出消息框" onclick="window.alert('消息框')">

        <input type="button" value="弹出消息框（删除）" onclick="del()">

    </body>

</html>

3、open


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>open</title>

    </head>

    <body>

        <input type="button" value="关闭当前窗口" onclick="window.close()">

    </body>

</html>

4、将当前窗口设置为顶级窗口


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>将当前窗口设置为顶级窗口</title>

    </head>

    <body>

        <script type="text/javascript">

            /*

                  如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口

            */

        </script>

        <iframe src="005.html" width="500px" height="500px"></iframe>

    </body>

</html>

5、005

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>005</title>

    </head>

    <body>

        005页面

        <script type="text/javascript">

        /*

        如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口

        */

        function setTop() {

            /*      005打开的话

                    window是当前浏览器窗口，代表005.html

                    “当前窗口的顶级窗口”如果“不是自己”

                    window.top就是当前窗口对应的顶级窗口

                    window.self表示当前自己这个窗口

                    004.将当前页面设置为顶级窗口打开的话

                    window.top就是004

                    window.self表示005

            */

           // console.log((window.top!==window.self))

            if (window.top!==window.self){

                //将当前窗口设置为顶级窗口

                //window.top.location是005地址

                window.top.location=window.self.location;

            }

        }

        </script>

        <br><br>

        <input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口">

    </body>

</html>

6、history对象


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>history对象</title>

    </head>

    <body>

        <a href="007.html">007页面</a>

        <input type="button" value="前进" onclick="window.history.go(1)"/>

    </body>

</html>

7、007

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>007</title>

    </head>

    <body>

        007 page！

        <input type="button" value="后退" onclick="window.history.back()"/>

        <input type="button" value="后退" onclick="window.history.go(-1)"/>

    </body>

</html>

8、设置浏览器地址栏上的URL


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>设置浏览器地址栏上的URL</title>

    </head>

    <body>

        <script type="text/javascript">

            function goBaidu(){

                //var locationObj = window.location;

                //locationObj.href="https://www.baidu.com/"

                window.location.href="https://www.baidu.com/"

            }

            function goWangyi() {

                document.location="https://www.126.com/"

            }

        </script>

        <input type="button" value="百度" οnclick="goBaidu()">

        <input type="button" value="网易" οnclick="goWangyi()">

    </body>

</html>

总结：有哪些可以通过浏览器往服务器发请求？

1、表单form的提交

2、超链接

3、document.location

4、window.location

5、window.open("url")

6、直接在浏览器地址栏上输入URL，然后回车，（这个也可以手动输入，提交也可以是动态的）

以上所有的请求方式均可以携带数据给浏览器，只有通过表单提交是动态的
洛尘~~
关注
专栏目录
批量utf文件转utf8-bom
01-15
3. 编写脚本：如果你熟悉编程，可以用Python、JavaScript或其他语言编写脚本，遍历指定目录下的所有文件，读取、转换后再写入，这样可以自动化整个过程。 4. 第三方工具：网络上也有一些专门的文件编码转换工具，如...
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成，具体指出了BOM（浏览器对象模型）和DOM（文档对象模型）。这两个模型是实现JavaScript功能的重要组成部分，而ECMAScript则是JavaScript的核心规范。 BOM主要涉及window对象...
js---BOM
测试媛
07-11 83
1）BOM：Bom是浏览器对象模型（顶级对象为windows,可以省略） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c
JavaScript-BOM编程
weixin_44201223的博客
05-15 976
DOM对象 window对象的常见属性 window对象的常见方法
JavaScript---BOM和DOM
weixin_65440201的博客
07-30 658
1.DOM简单学习：为了满足案例要求 1.1操作Element对象： 1.2事件简单学习 案例1：电灯开关 2.BOM 2.1概念：Browser Object Model 浏览器对象模型 2.2组成： 2.3Window：窗口对象 2.3.1创建 2.3.2方法 2.3.3属性： 2.3.4特点 案例：轮播图 2.4Location：地址栏对象 2.4.1创建(获取)： 2.4.2方法： 2.4.3属性 2.5History：历史记录对象 2.5.1创建(获取)： 2
JavaScript --- BOM
wzg0817的博客
05-21 294
BOM简介---------（BOM详细总结） JavaScript的实现包括以下3个部分： 1）核心（ECMAScript）：描述了JS的语法和基本对象。 2）文档对象模型 （DOM）：处理网页内容的方法和接口 3）浏览器对象模型（BOM）：与浏览器交互的方法和接口 ECMAScript扩展知识： ① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。 ② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的
js---bom---history对象
2301_80310942的博客
07-11 581
window对象给我们提供了一个history对象,与浏览器历史进行交互,该对象包含用户(在浏览器窗口中)访问过的url。go(参数)---前进后退功能 参数如果是1 前进 如果是-1 后退一个页面。back()---可以实现后退功能。forward()---前进功能。history对象方法。
javascript---BOM
翾的博客
02-20 1133
ECMASript是javascript的核心. 但如果要在Web中使用javascript, 那么BOM(浏览器对象模型)则无疑才是真正的核心. BOM提供了很多对象, 用于访问浏览器的功能. 这些功能与任何网页内容无关. 多年来, 缺少事实上的规范导致BOM既有意思又有问题, 因为浏览器提供商会按照各自的想法去扩展它. 于是浏览器之间共有的对象就成为了事实上的标准. 这些对象在浏览器中得以存在
JS -- BOM
XWenXiang的博客
04-28 923
文章目录BOMBOM 简介window对象打开与关闭窗口弹框计时事件setInterval() 方法setTimeout() 方法window.clearIntervalNavigator 对象Location 对象History 对象Screen 对象 BOM BOM 简介 BOM 指的是浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。BOM由多个对象构成，其中window对象是BOM的顶层对象，也是JavaScript最高层对象之一，其他对象都是该对象的子对象。 BOM对
JavaScript---BOM，DOM 对象
2401_86102746的博客
10-02 372
Browser Object Model 浏览器对象模型。JavaScript 将浏览器的各个组成部分封装为对象。直接使用 window调用window对象中的属性和函数，其中window.可以省略。属性：获取其他BOM对象。1 window对象。
javascript--BOM
puhuihui的博客
04-15 115
本文资料来自pink老师视频，作为自己的学习笔记 文章目录一、BOM概述1. BOM的构成2. 窗口加载事件3. 调整窗口大小事件4. 定时器二、三、 一、BOM概述 1. BOM的构成 2. 窗口加载事件 load DOMContentLoaded 3. 调整窗口大小事件 4. 定时器 setTimeout()定时器 停止setTimeout()定时器 setInterval()定时器 区别 setTimeout() 调用一次回调函数 setInterval()
JavaScript---BOM基础
maidu_xbd的博客
05-15 223
JavaScript发展进程 1995.2月 Netscape公司发布LiveScript，后临时改为JavaScript，为了蹭上Java的热浪。 欧洲计算机制造商协会（ECMA）英文名称是European Computer Manufacturers Association 1997 年，以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland ...
strip-bom:从字符串中删除UTF-8字节顺序标记（BOM）
04-29
从字符串中删除UTF-8（BOM） 从维基百科： Unicode标准允许使用UTF-8中的BOM，但既不需要也不建议使用它。 字节顺序在UTF-8中没有意义。 安装 $ npm install strip-bom 用法 import stripBom from 'strip-bom' ; ...
add-bom:将BOM表标记添加到UTF-8文件
05-20
将BOM表标记添加到文件 一个简单的cli实用程序，用于向UTF-8文件添加BOM表标记。 适合在npm版本中使用。... node add-bom.js -f file-without-bom.js 或来自package.json的npm脚本部分 add-bom -f file-without-bom.js
基于水平井光纤应变的压裂裂缝长度反演模型及应用研究
10-17
内容概要：本文基于三维位移不连续边界元法建立了光纤应变计算模型，并构建了基于裂缝前缘光纤应变的裂缝参数反演模型。通过敏感性分析，探讨了光纤应变与裂缝长度、高度和宽度分布的关系，提出了一种利用光纤应变快速评估裂缝长度的方法，并验证了其在实际应用中的有效性。 适合人群：从事压裂裂缝诊断的技术人员、科研人员和工程师。 使用场景及目标：① 提供一种新的方法来评估压裂裂缝的长度，提高裂缝诊断的精度；② 在压裂施工过程中，实时监测裂缝长度变化，指导压裂工艺优化。 其他说明：该研究不仅提高了压裂裂缝参数解释的准确性，还为现场工程师提供了实用的工具和技术支持。
毕业设计论文SpringBoot数码商城交易平台.docx
10-17
毕业设计论文
毕业设计论文SpringBoot网上水果超市.docx
最新发布
10-17
毕业设计论文
小熊猫ios版本，苹果电脑版下载
10-17
小熊猫ios版本，苹果电脑版下载
奥林匹斯众神之庙环境包：Modular Temple Environment v3.0 (24 Jun 2024)
10-17
这款资源以其独特的设计和高质量的素材，为游戏开发者提供了一个充满神话色彩的 3D 环境，让他们能够轻松地打造出一个逼真的奥林匹斯山神庙场景。 资源亮点 丰富的网格资源 该资源包包含了 63 个独特的网格，这些网格设计精美，非常适合用来建造众神之庙。无论是庙宇的主体结构，还是周围的装饰物，这些网格都能满足开发者的需求，让他们能够快速构建出一个完整的场景。 多功能光束效果 资源包中还包含了一个多功能的光束效果，这不仅适用于神庙场景，也适合任何需要增加戏剧性的场景。此外，还附带了一个流动的粒子效果，为场景增添了更多的动态元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛尘~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值