• WEB开发技能树-JavaScript-BOM-Window对象

    1 需求

    • Window对象
      • 需求1：警告框
      • 需求2：对话框
      • 需求3：确认框
      • 需求4：打开一个页面，可以实现跳转
      • 需求5：关闭页面
    • History对象
      • 需求1：后退一个历史页面
      • 需求2：前进一个历史页面
      • 需求3：跳转到指定历史页面

    2 语法

    • Window 对象
      • alert(message)
      • prompt(msg,defaultText)
      • confirm(message)
      • window.open(URL,name,specs,replace)
      • window.close()
      • setInterval(code,millisec,lang)
      • clearInterval(id_of_setinterval)
      • setTimeout(code,millisec,lang)
      • clearTimeout(id_of_settimeout)

    Navigator 对象

    • 对象属性
      • navigator.platform
      • navigator.userAgent
      • navigator.appName
      • navigator.appVersion
      • navigator.appCodeName
      • navigator.cookieEnabled
    • 对象方法
      • navigator.javaEnabled()
      • navigator.taintEnabled() 
    • Screen 对象
      • 对象属性
        • screen.availHeight
        • screen.availWidth
        • screen.height
        • screen.width 
        • screen.colorDepth
        • screen.pixelDepth
    • History 对象
      • 对象属性
        • history.length
      • 对象方法
        • history.back()
        • history.forward()
        • history.go(number|URL)
    • Location 对象
      • 对象属性
        • location.href
        • location.protocol
        • location.host
        • location.hostname
        • location.port
        • location.pathname
        • location.search
        • location.hash
      • 对象方法
        • location.assign(URL)
        • location.reload(forceGet)
        • location.replace(newURL)

    3 示例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>JavaScript BOM Demo</title>
    6. 		<style>
    7. 			h1 {
    8. 				text-align: center;
    9. 			}
    10. 		</style>
    11. 		<script>
    12. 			mWindow;
    13.  
    14. 			function openWindow() {
    15. 				mWindow = window.open("https://www.baidu.com");
    16. 			}
    17.  
    18. 			function closeWindow() {
    19. 				mWindow.close();
    20. 			}
    21.  
    22. 			function mBack() {
    23. 				window.history.back();
    24. 			}
    25.  
    26. 			function mForward() {
    27. 				window.history.forward();
    28. 			}
    29.  
    30. 			function mGo() {
    31. 				window.history.go(-1);
    32. 			}
    33. 		</script>
    34. 	</head>
    35. 	<body>
    36. 		<h1>Window对象 属性和方法 演示</h1>
    37. 		<button onclick="javascript:window.alert('xss');">alert</button>
    38. 		<button onclick="javascript:window.prompt('title','content');">prompt</button>
    39. 		<button onclick="javascript:window.confirm('确认退出？');">confirm</button><br>
    40. 		<button onclick="openWindow()">打开新窗口</button>
    41. 		<button onclick="closeWindow()">关闭指定窗口</button>
    42. 		<button onclick="javascript:window.close();">关闭当前窗口</button><br>
    43. 		<button onclick="javascript:setInterval(function(){alert('xss');},1000);">setInterval</button>
    44. 		<hr>
    45. 		<h1>Screen对象 属性和方法 演示</h1>
    46. 		<script>
    47. 			document.write('screen.availHeight: ' + screen.availHeight + '
      '      );
    48. 			document.write('screen.availWidth: ' + screen.availWidth + '
      '      );
    49. 			document.write('screen.height: ' + screen.height + '
      '      );
    50. 			document.write('screen.width: ' + screen.width + '
      '      );
    51. 			document.write('screen.colorDepth: ' + screen.colorDepth + '
      '      );
    52. 			document.write('screen.pixelDepth: ' + screen.pixelDepth + '
      '      );
    53. 		</script>
    54. 		<hr>
    55. 		<h1>Navigator对象 属性和方法</h1>
    56. 		<script>
    57. 			document.write('navigator.platform: ' + navigator.platform + '
      '      );
    58. 			document.write('navigator.userAgent: ' + navigator.userAgent + '
      '      );
    59. 			document.write('navigator.appName: ' + navigator.appName + '
      '      );
    60. 			document.write('navigator.appCodeName: ' + navigator.appCodeName + '
      '      );
    61. 			document.write('navigator.appVersion: ' + navigator.appVersion + '
      '      );
    62. 			document.write('navigator.cookieEnabled: ' + navigator.cookieEnabled + '
      '      );
    63. 			document.write('navigator.javaEnabled(): ' + navigator.javaEnabled() + '
      '      );
    64. 		</script>
    65. 		<hr>
    66. 		<h1>Location对象 属性和方法 演示</h1>
    67. 		<script>
    68. 			document.write('location.href: ' + location.href + '
      '      );
    69. 			document.write('location.protocol: ' + location.protocol + '
      '      );
    70. 			document.write('location.host: ' + location.host + '
      '      );
    71. 			document.write('location.hostname: ' + location.hostname + '
      '      );
    72. 			document.write('location.port: ' + location.port + '
      '      );
    73. 			document.write('location.pathname: ' + location.pathname + '
      '      );
    74. 			document.write('location.search: ' + location.search + '
      '      );
    75. 			document.write('location.hash: ' + location.hash + '
      '      );
    76. 		</script>
    77. 		<button onclick="javascript:window.location.assign('https:\/\/www.baidu.com');">assign</button>
    78. 		<button onclick="javascript:window.location.replace('https\/\/www.baidu.com')">replace</button>
    79. 		<button onclick="location.reload()">reload</button>
    80. 		<hr>
    81. 		<h1>History对象 属性和方法 演示</h1>
    82. 		<script>
    83. 			document.write('history.length: ' + history.length + '
      '      );
    84. 		</script>
    85. 		<button onclick="mBack()">back</button>
    86. 		<button onclick="mForward()">forward</button>
    87. 		<button onclick="mGo()">go</button>
    88. 		<hr>
    89. 	</body>
    90. </html>
    91.  
    92. </!DOCTYPE>

    4 参考资料

  • 相关阅读:
    阿里云国际版云服务器Windows系统数据恢复操作步骤
    php面向对象-抽象一个类
    MySQL中的 增 删 查 改（CRUD）
    JavaScript中 slice, substr 和 substring 的区别
    停止线程的方法
    java毕业设计诊所信息管理系统Mybatis+系统+数据库+调试部署
    2022年最火的十大测试工具，你掌握了几个
    02 C++ 变量和基本类型
    SSTI注入利用姿势合集
    leetcode187. 重复的DNA序列
  • 原文地址：https://blog.csdn.net/pwp032984/article/details/128074252