码迷,mamicode.com
首页 > Web开发 > 详细

JS BOM

时间:2018-10-22 22:17:26      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:forward   onclick   sele   ati   head   ons   name   目标   --   

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>

JS BOM

标签:forward   onclick   sele   ati   head   ons   name   目标   --   

原文地址:https://www.cnblogs.com/layerluo/p/9833165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!