通过JS自动隐藏手机浏览器的地址栏

2023-10-28

大家通过手机自带浏览器打开百度、淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App。实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片。

如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏超出视野范围

<script>
	window.οnlοad=function(){
		setTimeout(function() {
			window.scrollTo(0, 1)
		}, 0);
	};
</script>

但若你做一个简单页面,比如只有一句话,加上如上脚本,你会悲摧的发现, 地址栏就是不自动隐藏;难道window.scrollTo()方法在这个浏览器不生效?

但是若你网页内容比较多,超过屏幕高度时,却会自动隐藏地址栏;

如何解决在内容较少时,同样隐藏地址栏呢?需在滚动之前程序动态设置一下body的高度,增加如下代码:

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
	bodyTag = document.getElementsByTagName('body')[0];
	bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过JS自动隐藏手机浏览器的地址栏 的相关文章

  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • 用于交互式图形绘制的轻量级 JavaScript 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • 从keystore(jks)文件中提取私钥

    JKS文件是使用keytool生成的keystore文件 存放私钥和证书 但是我们用keytool的时候 私钥并没有单独生成出来 这个不利于我们后期的一些扩展工作 所以 我们需要把私钥从keytool中提取出来 这里可以使用在线转化工具 可
  • 【2023最新版】APP测试面试题(超详细~)

    一 web测试和app测试的相同点和区别 相同点 都离不开测试的基础知识和测试原理 具体包括以下几个方面 测试用例 均使用边界值分析法 等价类划分法等 多数采用黑盒测试 来验证业务功能是否能得到正确的应用 需要检查界面布局 风格 按钮是否美
  • Hadoop之Hive

    文章目录 一 Hive简介 1 1 Hive 基本概念 1 2 Hive架构图 1 3 Hive数据模型 二 Hive安装配置 2 1 内嵌模式 2 2 配置元数据到mysql 2 3本地模式 2 4远程模式 2 5 Hive JDBC H
  • vue不是内部或外部命令!!!配置vue.cmd的path就好!!

    网上找了很多资料 基本是说对了的 主要是环境问题 path 解决办法 用Everything这个软件 或者搜索 搜索vue cmd的位置 我的地址是 我是在在node里面直接安装的vue cli 搜索到这个批处理文件后把这个文件的路径加入P
  • 线程创建 三种方式

    文章目录 多线程编程 一 线程 进程 多线程 程序概念 二 线程创建的三种方法 重头戏 线程创建方式1 继承Thread类 线程创建方式2 实现Runnable接口 多线程实例 线程创建方式3 实现Callable接口 多线程编程 一 线程
  • 什么是云服务器?有什么作用?

    云服务器 Cloud Server 是一种基于云计算技术的虚拟服务器 它不依赖于特定的物理硬件 而是通过虚拟化技术将服务器资源划分为多个虚拟机实例 这些实例可以在云平台上动态创建 调整和删除 云服务器提供了一种灵活的计算资源分配和管理方式
  • 蓝桥杯文件夹命名

    蓝桥杯十四届单片机省赛 提交要求 1 新建考试证号文件夹 2 新建考试证号文件夹的 子文件夹 3 keil新建工程 位置Project 名称考试证号 上面的工程文件名 就是最后生成的hex文件名 4 选择设备 5 新建三个团体 Source
  • 图文:创建一个 idea + gradle + Springboot + MyBatis 项目

    最近项目用到了 springboot gradle 此文记录第一次使用 idea 创建 gradle springboot项目 部分参考网上资料 如有侵权 请联系我删除 1 new project gt spring initializr
  • 在IDEA中右键New没有创建Vue文件选项解决办法

    第一步 进入目录settings gt Editor gt File and Code Templates 第二步 添加模板步骤 模板内容如下所示
  • Docker部署fastdfs单机版

    1 拉取镜像 docker pull registry cn beijing aliyuncs com tianzuo fastdfs 2 创建映射目录 mkdir p home Data mkdir p home Html Data是fa
  • 452页24万字智慧城市顶层设计及智慧应用解决方案

    智慧城市总体设计 2 1 智慧城市核心技术 2 1 1 物联网 智慧城市是一个有机结合的大系统 涵盖了更透切的感知 更全面的互连 更深入的智能 物联网是智慧城市中非常重要的元素 它侧重于底层感知信息的采集与传输 城市范围内泛在网方面的建设
  • scss中引入字体找不到的问题

    scss中引入字体找不到的问题 在项目中引入一个字体文件 路径写法都没错 但是就是找不到这个文件 最终解决 使用 即可
  • 印度 IT人才那么多,为何出不了牛逼的互联网公司?

    作为世界上人口第二多的大国 印度一直都是IT互联网人才的原产地和输出地 在硅谷 有大量中高层管理人员来自印度 谷歌 微软等行业巨擎都由印度人担任首席执行官 可见印度的IT人才有多牛 虽然印度在国内外拥有相当多优质的IT人才 人口基数也足够庞
  • mysql数据库where语句_MySQL数据库入门——where子句,组合where的子句

    select语句的where子句指定搜索条件过滤显示的数据 1 使用where子句 在 select 语句中 where子句在from子句之后给出 返回满足指定搜索条件的数据 select prod name prod price from
  • [QT入门篇]3 QObject的拷贝构造函数与赋值运算符

    本文主要是针对QObject的拷贝构造函数和赋值运算符进行说明 先来看一下拷贝构造函数定义 拷贝构造函数 又称复制构造函数 是一种特殊的构造函数 它由编译器调用来完成一些基于同一类的其他对象的构建及初始化 其唯一的形参必须是引用 但并不限制
  • H-Permutation Counting 排列组合+并查集判环

    原题链接 输入 3 1 1 2 输出 3 说明 In the first sample all valid permutations are 1 2 3 1 3 2 1 2 3 1 3 2 and 2 3 1 2 3 1 so the an
  • phpmyadmin打开很慢的解决方法

    这篇文章主要介绍了phpmyadmin打开很慢的解决方法 一般这个问题的原因是phpmyadmin的版本检测造成的 因为phpmyadmin的官网有时会打不开 这时只要取消代码中的版本检测即可解决这个问题 需要的朋友可以参考下 phpmya
  • sort函数排序用法

    具体用法在上一篇博客中已经说明了 主要是sort函数实现了将数组数按从大到小的顺序给进行了排列 要注意的一点就是在头文件中声明 include跟 include 其次就是在调用函数时可以是sort a begin a end 也可以是表示具
  • LeetCode题目笔记——1351. 统计有序矩阵中的负数

    文章目录 题目描述 题目链接 题目难度 简单 方法一 暴力 代码 Python 方法二 二分搜索 代码 Python 方法三 倒序遍历 代码 Python 总结 题目描述 给你一个 m n 的矩阵 grid 矩阵中的元素无论是按行还是按列
  • 通过JS自动隐藏手机浏览器的地址栏

    大家通过手机自带浏览器打开百度 淘宝 在首页加载完毕后 会自动隐藏页面上方的地址栏 加之这些网站针对手机浏览器做了优化 乍看之下 还真难区分这是WEB APP还是Native App 如下左侧图片为通过safari打开淘宝网的首页 要不是因