window location href 手机端无法跳转_Window对象在前端领域的角色

40e1eb8cab7433d181cc921c3b68549a.png

特殊的window

提起window,在网页当中很常见,比如像这样:

window.onload=function(){
//执行函数体
}

这段代码的意思是当网页内容加载完成后要做什么。

在js的领域,window对象有着双重角色,既是用来访问浏览器窗口的接口,又是Global对象。

也正因为此,所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。

比如这样:

var age = 29;
function sayAge(){alert(this.age);
}
alert(window.age); //29
sayAge();         //29
window.sayAge();  //29

但二者也不是完全等同,全局变量不能通过delete删除,而直接在window上定义的属性可以。

历史遗留

早期的网页中会使用较多的窗口和框架,在同一个窗口内展示有嵌套形式的网页,以及各种弹窗alert、confirm、prompt等,给用户输入或者确认信息,但随着网页开发技术和设计的发展,它们已经难寻踪迹,所以这里不重点说。

location对象

基本属性

location是最有用的BOM对象之一,它提供了当前窗口所加载文档的信息和导航功能。它的主要用途都跟url有关:

  • hash:返回url中#符号后面的字符,如果没有,返回空。
  • host/hostname:返回服务器名称或者端口号之类。
  • href:返回完整url
  • port:返回指定端口号
  • protocol:返回使用的协议
  • search:返回url的查询字符串,即从问号开始到末尾的所有内容

位置操作

location可以通过多种方式改变浏览器的位置,最常用的是assign()方法,比如:

location.assign("http://www.baidu.com");

这样就会马上打开新的url,并在浏览历史中增加一条记录,下面两行代码等效:

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

最常见的是location.href。

当然,修改其他属性也可以改变当前加载的页面,通过任何一种方式修改url之后,都会有一条新记录生成,用户可以通过点击后退按钮导航到前一个页面,不过,有时候我们不希望这种操作发生,可以使用replace()方法。像下面这样:

location.replace("http://www.baidu.com");

它只接收一个参数,即导航到的url,且不会生成记录,用户不能返回前一个页面。

与位置有关的另一个方法是reload(),作用就是它的字面意思,重新加载当前页,但这里有一点点小讲究,如果仅仅是reload,不带参数,页面会从浏览器缓存中重新加载,如果强制从服务器重新加载,则需要传递参数,像这样:

location.reload(true);

history对象

history保留着用户上网的记录,每个浏览器窗口、标签页,都有自己的history对象与特定的window对象相关联,出于安全考虑,开发人员一般无法得知用户浏览过哪些网页,但仍然有办法实现前进后退功能,方法就是go()。例如这样:

history.go(-1);
history.go(1);

其参数不仅是数字,也可以是一个字符串,浏览器会跳到历史记录中包含该字符串的第一个位置,可以是前进,也可能是后退。比如

history.go("baidu.com");

另外,前进或者后退也有更直接一些的方法back()、forward()。

除此之外,history还有个length属性,保存历史记录的数量,如果你想确定用户是否一开始就打开了你的页面,可以用到它。

if(history.length == 0){//干你想干的事
}

history对象不是特别常用,但在某些特殊用途的设计当中,还是要请它出马来搞定问题。

总结

window对象在移动互联网浪潮下的地位已经不像PC端那么重,更多涉及的是功能和检测方面,涉及交互较多,其他方面则交由功能更丰富的自定义的代码来实现了。

尽管如此,window对象也不止这么简单,还有一个重要的navigator对象,但说到它内容有有点多,后续单独一篇文章跟大家分享。

欢迎交流!~

Window对象在前端领域的角色

欢迎关注我的公众号:灵感周末

2ba1091c22d68fc1b57e0b8cc82b1615.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/329977.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode初级算法2.旋转数组

leecode初级算法2.旋转数组 仅为个人刷题记录&#xff0c;不提供解题思路 题解与收获 我自己的解法&#xff1a; public static void rotate(int[] nums, int k) {int move k % nums.length;Stack<Integer> stack new Stack<>();if(move 0){return;}else {f…

java运行环境变量及自定义变量

【README】 本文主要介绍java运行环境变量的获取&#xff0c;如何读取 env.properties 文件并将自定义变量写入到系统变量&#xff1b; 【1】System.getenv() 获取环境变量 public static void main1() {Map<String, String> envMap System.getenv();envMap.entrySet(…

Java HashSet和HashMap源码剖析

转载自 Java HashSet和HashMap源码剖析总体介绍 之所以把HashSet和HashMap放在一起讲解&#xff0c;是因为二者在Java里有着相同的实现&#xff0c;前者仅仅是对后者做了一层包装&#xff0c;也就是说HashSet里面有一个HashMap&#xff08;适配器模式&#xff09;。因此本文将重…

怎么把页面按比例缩小_meta viewport 是做什么用的,怎么写?

前置知识&#xff08;有助于viewport的理解&#xff09;李明&#xff1a;设备像素、设备独立像素、CSS像素、分辨率、PPI、devicePixelRatio​zhuanlan.zhihu.com移动端的问题屏幕窄&#xff0c;一般来说设备独立像素不超过400px。比如把网站侧边栏宽度设置为10%&#xff0c;这…

(转)java动态代理与aop

转自&#xff1a; Java 动态代理与AOP - 如果的事 - 博客园动态代理与AOP 代理模式 代理模式给某一个目标对象(target)提供代理对象(proxy)&#xff0c;并由代理对象控制对target对象的引用。 模式图&#xff1a; 代理模式中的角色有&#xff1a; 抽象对象角色(Abstrachttps://…

ConcurrentHashMap的红黑树实现分析

转载自 ConcurrentHashMap的红黑树实现分析红黑树 红黑树是一种特殊的二叉树&#xff0c;主要用它存储有序的数据&#xff0c;提供高效的数据检索&#xff0c;时间复杂度为O(lgn)&#xff0c;每个节点都有一个标识位表示颜色&#xff0c;红色或黑色&#xff0c;有如下5种特性&a…

leetcode初级算法3.存在重复元素

leetcode初级算法3.存在重复元素 仅为个人刷题记录&#xff0c;不提供解题思路 题解与收获 我的解法&#xff1a; Arrays.sort(nums);for(int i 0; i < nums.length-1; i){if(nums[i] nums[i1]){return true;}}return false;官方题解&#xff1a; public boolean con…

sql server累计求和函数_SQL基础--SQL高级功能

一.窗口函数有什么用&#xff1f;在日常工作中&#xff0c;经常会遇到需要在每组内排名&#xff0c;比如下面的业务需求&#xff1a;排名问题&#xff1a;每个部门按业绩来排名topN问题&#xff1a;找出每个部门排名前N的员工进行奖励面对这类需求&#xff0c;就需要使用sql的高…

(转)【SpringMvc】如何使用form发送PUT和DELETE请求

转自&#xff1a; https://blog.csdn.net/cockroach02/article/details/82194126https://blog.csdn.net/cockroach02/article/details/82194126 一、当前现状 浏览器使用form提交信息的时候只支持GET和POST&#xff0c;如果需要在浏览器上使用PUT和DELETE请求方式的话&#…

leetcode初级算法4.只出现一次的数字

leetcode初级算法4.只出现一次的数字 仅为个人刷题记录&#xff0c;不提供解题思路 题解与收获 我的解法&#xff1a; public static int singleNumber(int[] nums) {if(nums.length 1){return nums[0];}Arrays.sort(nums);int slow 0;int fast 1;while(fast < nums.…

集合总结(Collection)

转载自 集合总结(Collection) 最近项目上线完&#xff0c;闲来无事&#xff0c;整理了关于集合相关对比&#xff0c;具体详见以下几点&#xff1a;1.ArrayList和Vector区别&#xff1a;这两个类都实现了List接口(List接口继承了Collection接口)&#xff0c;他们都是有序集合&am…

springboot接收浏览器发送delete请求( method not allowed 405解决方法)

【README】 浏览器使用form提交信息的时候只支持GET和POST&#xff0c;如果需要在浏览器上使用PUT和DELETE请求方式的话&#xff0c;只能使用欺骗的方式了&#xff0c;SpringMvc提供了HiddenHttpMethodFilter类来提供支持&#xff1b; 【1】前端 1&#xff09;list.html <…

tensorflow图形检测_社交距离检测器——Tensorflow检测模型设计

在隔离期间&#xff0c;我花时间在github上探索Tensorflow的大量预训练模型。这样做时&#xff0c;我偶然发现了一个包含25 个带有性能和速度指标的预训练对象检测模型的存储库。拥有一些计算机视觉知识并给出了实际的背景知识&#xff0c;我认为使用其中之一来构建社交隔离应用…

leetcode初级算法4.两个数组的交集 II

leetcode初级算法4.两个数组的交集 II 仅为个人刷题记录&#xff0c;不提供解题思路 题解与收获 我的解法&#xff1a;&#xff08;总结在代码中&#xff09; public int[] intersect(int[] nums1, int[] nums2) {//为空则返回if(nums1 null || nums2 null){return null;…

Java NIO:Buffer、Channel 和 Selector

转载自 Java NIO&#xff1a;Buffer、Channel 和 Selector本文将介绍 Java NIO 中三大组件 Buffer、Channel、Selector 的使用。 本来要一起介绍非阻塞 IO 和 JDK7 的异步 IO 的&#xff0c;不过因为之前的文章真的太长了&#xff0c;有点影响读者阅读&#xff0c;所以这里将它…

(转)使用IDEA将普通MAVEN项目转为WEB项目

转自&#xff1a; 使用IDEA将普通MAVEN项目转为WEB项目_yun0000000的博客-CSDN博客使用IDEA将普通MAVEN项目转为WEB项目https://blog.csdn.net/yun0000000/article/details/70664944 1、file--project Structure--,然后点“”号&#xff0c;,若没有war包&#xff0c;可修改mav…

python创建文件对象_python基础教程:文件读写

在Linux系统中&#xff0c;一切都是文件。但我们通常说的文件是保存在磁盘上的图片、文档、数据、程序等等。而在程序的IO操作中&#xff0c;很多时候就是从磁盘读写文件。本节我们讲解Python中的文件对象如何操作文件。创建文件对象 通过Python内置函数open()可以很容易的创建…

(转)springboot:添加JSP支持

转自&#xff1a; 14.springboot:添加JSP支持 - 简书&#xff08;1&#xff09;创建Maven web project 使用Eclipse新建一个Maven Web Project &#xff0c;项目取名为&#xff1a;spring-boot-jsp &#xff08;2&#xff09;在pom.xm...https://www.jianshu.com/p/4216bbd1e0…

leetcode初级算法5.加一

leetcode初级算法5.加一 仅为个人刷题记录&#xff0c;不提供解题思路 题解与收获 我的解法&#xff1a;&#xff08;总结在代码中&#xff09; public int[] plusOne(int[] digits) {//获取digits长度int length digits.length;//判断条件int count 0;//全是9的情况for …

epoll 浅析以及 nio 中的 Selector

转载自 epoll 浅析以及 nio 中的 Selector首先介绍下epoll的基本原理&#xff0c;网上有很多版本&#xff0c;这里选择一个个人觉得相对清晰的讲解&#xff08;详情见reference&#xff09;&#xff1a;首先我们来定义流的概念&#xff0c;一个流可以是文件&#xff0c;socket&…