javascript--30--bom

浏览器标识兼容做法

在谷歌浏览器中

#box{
      padding: 10px;
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
    #child{
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child"></div>
  </div>
</body>

结果是320

#box{
      padding: 10px;
      width: 200px;
      height: 200px;
    }
    #child{
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child"></div>
  </div>
</body>
<script>
  console.log(box.scrollHeight);
</script>

结果是310 在其他浏览器都是310

兼容写法

#box{
      padding: 10px;
      width: 200px;
      height: 200px;
    }
    #child{
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child"></div>
  </div>
</body>
<script>
  function getScrollHeight(ele) {
      var attr =getComputedStyle(ele);
      if (attr.overflow !="visibel" && window.navigator !=-1){//判断是不是谷歌浏览器并且是不是overflow:hidden
          return parseFloat(ele.scrollHeight - attr.paddingBottom);
      } else{
          return ele.scrollHeight;
      }
  }
</script>

location对象

  1. 浏览器标识 window.navigatior userAgent
  2. window.location url 信息 可读可写
https://www.baidu.com/?a=1&b=2 在地址栏后添加这些
 window.location.href  在控制台打印

结果是"https://www.baidu.com/?a=1&b=2" 整条信息 在控制台打印 window.location.href="https://www.bilibili.com/"就会跳转到该网站

  1. window.location.search获取的是问号后面的值
https://www.bilibili.com/v/game/?spm_id_from=333.334.primary_menu.33
window.location.search

"?spm_id_from=333.334.primary_menu.33"

  1. window.location.pathname 获取url中的路径部分 /后面
https://www.bilibili.com/v/game/?spm_id_from=333.334.primary_menu.33
window.location.pathname
"/v/game/"
  1. window.location.hash 获取哈希值 #后面的参数 改变哈希值页面不会刷新,页面发生变化是因为改变了框架
https://www.bilibili.com/v/game/?spm_id_from=333.334.primary_menu.33#a=123
window.location.hash
"#a=123"
  1. window.location.hostname 获取主机名
https://www.bilibili.com/v/life/?spm_id_from=333.334.primary_menu.50
window.location.hostname
"www.bilibili.com"
  1. window.location.protocol获取协议
https://www.bilibili.com/v/life/?spm_id_from=333.334.primary_menu.50
window.location.protocol
"https:"

方法

  1. window.histiory.back();上一页历史记录
  2. window.histiory.forward(); 下一页历史记录
  3. window.histiory.back(); window.histiory.back();可以后退两次
  4. window.history.go(-1)后退一步 window.history.go(2)前进两步 正数是前进,负数是后退
  5. 监听哈希值的改变
window.onhashchange   当哈希值改变触发

窗口新开 window.open() 第一个值是地址,第二个值是选择当前窗口打开还是新窗口 _self _blank new(是在新窗口打开,但是在次打开还是在新窗口这一个上打开) 第三个参数可以写宽高位置 打开窗口样式

window.open("https://www.baidu.com/","new","width=400px,height=400px,menubar=no,status=no,titlebar=no,left=500px,top=500px");

关闭弹窗

var new_window=window.open("https://www.baidu.com/","new","width=400px,height=400px,menubar=no,status=no,titlebar=no,left=500px,top=500px");
  setTimeout(function () {
      new_window.close();
  },3000);

控制滚动条位置

  1. window.scrollTo(0,900)第一个值是水平,第二个值是垂直 滚动到指定位置 2. window.scrollby(0,900) 是增加滚动 如果再次写window.scrollby(0,900)那么会叠加
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页