JavaScript-BOM编程

简介: JavaScript-BOM编程

一、window.open和window.close


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


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


示例代码:


<body>
<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="开启指定窗口" onclick="window.open('SSS-open窗口测试.html');" />
</body>


窗口测试.html


<body>
  <input type="button" value="关闭指定窗口" onclick="window.close();">
  </body>


二、弹出确认框


示例代码:


<body>
  <script type="text/javascript">
    function del(){
    /* var ok = window.confirm("亲,你确认删除此消息吗?");
    if(ok){
      alert("正在删除数据!");
    }
    } */
    //优化
    if(window.confirm("亲,你确认删除此消息吗?")){
    alert("正在删除数据!");
    }
    }
  </script>
  <input type="button" value="弹出警示框" onclick="window.alert('警示信息!');" /> 
  <!-- 删除操作的时候都要提前先得到用户的确认 -->
  <input type="button" value="弹出确认框(删除)" onclick="window.del();" /> 
  </body>


0a2653c851af460fa595bd959398a8f1.png2d65d23f6d4748949b924e4057485923.png6de278e6d6694ce5bb08e7e842b7e74b.png


三、如果当前窗口不是顶级窗口,将当前窗口设置为顶级窗口


核心语法:


if(window.top != window.self){
    window.top. location = window.self. location;
}

示例代码:


<body>
  <iframe src="007-顶级窗口测试页面.html" width="500px" height="500px"></iframe>
  </body>


顶级窗口测试页面.html:


<body>
  <script type="text/javascript">
    //如果当前这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口.
    function setTop(){
    //window是当前浏览器的窗口,代表007.html
    //"当前窗口的顶级窗口"如果"不是自己"
    //window.top就是当前窗口对应的顶级窗口
    //window.self表示当前自己这个窗口
    //window.top 是006窗口
    //window.self 是007窗口
    if(window.top != window.self){
      window.top.location = window.self.location;
      }
    }
  </script>
  007-html
  <input type="button" value="把不是顶级窗口的设置成顶级窗口" onclick="setTop();">
  </body>


8ec4f2997fb246878c34ecd6d122b7c6.png12c3b7f3f8814309a195c64f051d4445.png


四、历史记录


window.history.back();    window.history.go(-1);    window.history.go(1);


示例代码:


<body>
  <a href="004-history测试页面.html">004-history测试呀!</a>
  <!-- 前进不常用!!!!! -->
  <input type="button" value="前进" onclick="window.history.go(1)" />
  </body>


历史测试页面.html:


<body>
  004 page!
  <input type="button" value="后退" onclick="window.history.back();" />
  <input type="button" value="后退" onclick="window.history.go(-1);" />
  </body>


34e8d716411043c08c7ffba9fbba23de.png

92ba0822ed0b46e1ae72df8a17d3a45b.png


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


跳转页面可以通过多种方式:(这些都是发送请求!!!!)

     第一种方式:直接在浏览器地址栏上写URL。(重点)


     第二种方式:可以点击超链接(重点)


     第三种方式:提交表单(重点)


     第四种方式:window.open(url,target) (了解)


     第五种方式:js代码(重点)


window.location.href

     window.location

     document.location.href

     document.location


通过浏览器向服务器发送请求,通常是以上的五种方式。只有form可以动态的修改数据!

示例代码:


<body>
  <script type="text/javascript">
    function goBaidu(){
    /* var locationS = window.location;
    locationS.href = "http://www.baidu.com"; */
    // window.location.href = "http://www.126.com";
    // window.location = "http://www.126.com";
    //document.location.href = "http://www.baidu.com";
    document.location = "http://www.baidu.com";
    }
  </script>
  <input type="button" value="百度" onclick="goBaidu();" />
  </body>

d79b274929334152a6d38be91e2d1be3.pngdfc80ca9d8004e6c9ddc00e8448ffc6a.png


相关文章
|
3月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
40 3
|
3月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
35 2
|
5月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
5月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
5月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
5月前
|
JavaScript 前端开发 安全
JavaScript编程实现字符和字符串翻转
JavaScript编程实现字符和字符串翻转
|
5月前
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值
|
6月前
|
JavaScript 前端开发 Oracle
|
6月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
68 3
|
6月前
|
JavaScript 前端开发 开发者
震撼揭秘!JS模块化进化史:从混沌到秩序,一场代码世界的华丽蜕变,你怎能错过这场编程盛宴?
【8月更文挑战第23天】在 Web 前端开发领域,JavaScript 模块化已成为处理日益复杂的 Web 应用程序的关键技术。通过将代码分解成独立且可重用的模块,开发者能够更有效地组织和管理代码,避免命名冲突和依赖混乱。从最早的全局函数模式到 IIFE,再到 CommonJS 和 AMD,最终进化到了 ES6 的原生模块支持以及 UMD 的跨环境兼容性。本文通过具体示例介绍了这些模块化规范的发展历程及其在实际开发中的应用。
70 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    46
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55