zoukankan      html  css  js  c++  java
  • JS BOM

    BOM

    1、窗口操作 open

    // 新tag打开目标地址
    open("http://www.yahoo.com");
    // 自身tag转跳目标地址
    open("http://www.yahoo.com", '_self');
    // 自定义窗口打开目标地址
    open("http://www.yahoo.com", '_blank', 'width=300, height=300');
    

    2、历史记录 history

    // 历史后退
    history.back();
    // 历史前进
    history.forward()
    

    3、导航器 navigator

    // 拥有浏览器信息的字符串
    navigator.userAgent;
    

    4、地址信息 location

    // 协议
    location.protocol
    // 服务器
    location.hostname
    // 端口号
    location.port
    // 参数拼接
    location.search
    

    JS BOM操作

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<title>BOM</title>
    </head>
    <body>
    	<button class="b1">open</button>
    	<button class="b2">前进</button>
    	<button class="b3">浏览器信息</button>
    </body>
    <!-- open -->
    <script type="text/javascript">
    	var b1 = document.querySelector('.b1');
    	b1.onclick = function () {
    		// 新tag打开目标地址
    		// window.open("http://www.yahoo.com");
    		// 自身tag转跳目标地址
    		// open("http://www.yahoo.com", '_self');
    		// 自定义窗口打开目标地址
    		open("http://www.yahoo.com", '_blank', 'width=300, height=300');
    	}
    </script>
    <script type="text/javascript">
    	var b2 = document.querySelector('.b2');
    	b2.onclick = function () {
    		// 历史后退
    		// history.back();
    		// 历史前进
    		history.forward();
    		// history.go(num)
    	}
    </script>
    <script type="text/javascript">
    	var b3 = document.querySelector('.b3');
    	b3.onclick = function () {
    		console.log(navigator.userAgent);
    		if (navigator.userAgent.match("Chrome")) {
    			alert("谷歌浏览器")
    		}
    	}
    </script>
    <script type="text/javascript">
    	// 协议
    	console.log(location.protocol);
    	// 服务器
    	console.log(location.hostname);
    	// 端口号
    	console.log(location.port);
    	// 参数拼接
    	console.log(location.search);
    </script>
    </html>
    
  • 相关阅读:
    Android Sensor Test
    [转]Android重力感应开发
    nexus5 root教程
    C# split字符串 依据1个或多个空格
    leetcode
    [ffmpeg 扩展第三方库编译系列] 关于须要用到cmake 创建 mingw32编译环境问题
    JAVA网络爬虫WebCollector深度解析——爬虫内核
    Apache htaccess 重写假设文件存在!
    javascript --- 事件托付
    LeetCode——Populating Next Right Pointers in Each Node II
  • 原文地址:https://www.cnblogs.com/layerluo/p/9833165.html
Copyright © 2011-2022 走看看