页面 - 跳转方法

时间：2021-05-01 23:22:15

location

  • Location 接口表示其链接到的对象的位置（URL），构造函数
  • Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问
    • 尽管 window.location 是一个只读 Location 对象，你仍然可以赋给它一个 DOMString。window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com'的同义词 。
      • DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String
    • location = url（对未过期的资源直接读取本地缓存），location.href = url （不检查是否过期，一律发起请求进行协商缓存）（该特性未经验证）
    • 安全设置，如 CORS（跨域资源共享），可能会限制实际加载新页面。（谷歌、IE9 从百度跳转新浪未发现限制）

属性

  • Location.href：包含整个URL，例如"http://ihrsit.midea.com/salary/ihr/salary/core/empBankSet"，赋值页面实现跳转
  • Location.protocol：包含URL对应协议，例如："https:"
  • Location.host：包含了域名，可能包括端口号，例如："www.baidu.com"
  • Location.hostname：包含URL域名，不包含端口号
  • Location.port：返回端口号，默认端口80时返回空字符串
  • Location.pathname：包含URL中路径部分，例如：“/system/ihr/system/agenda/agenda”
  • Location.search：包含URL参数的一个DOMString，开头有一个“?”，单独设置该项能导致浏览器重新加载
  • Location.hash：包含块标识符的DOMString，开头有一个“#”。
  • Location.username：包含URL中域名前的用户名的一个DOMString。例如https://anonymous:flabada@developer.mozilla.org 该地址返回‘anonymous’
  • Location.password：包含URL域名前的密码，例如https://anonymous:flabada@developer.mozilla.org 该地址返回'flabada'
  • Location.origin：包含页面的协议和域名（只读），例如：'http://ihrsit.midea.com'

方法

Location.assign() 页面跳转

  • 支持跨域跳转
  • 会触发窗口加载并显示指定的URL的内容
  • 执行该方法的脚本文件的域和 Location 对象所在页面的跨不同时会抛出错误（指通过window.opener.location操作来源location ？）

Location.reload()

  • 重新加载来自当前 URL的资源
  • 有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
    • 参数false或未加时，不检查是否过期，一律发起请求进行协商缓存
    • 有兼容的差异，如果不生效，可以采用万能的带时间戳方式解决：location.reload(location.href + '?t=timeStamp')时间戳是通过查询带入的，而不是通过哈希
  • 执行该方法的脚本文件的域和 Location 对象所在页面的跨不同时会抛出错误（指通过window.opener.location操作来源location ？）

Location.replace()

  • 用给定的URL替换掉当前的资源。
  • 与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中
  • 当传入的url带有#哈希时，苹果浏览器似乎不能正确更改hash ？

Location.toString()

  • 返回一个DOMString，包含整个URL

————————————————————

history

属性

History.length

  • 返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。只读

History.scrollRestoration

  • 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
  • 实验性属性，IE和苹果未实现
  • 具体如何使用？等待扩展

History.state

  • 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。
    • 假如页面（通过pushState() 或 replaceState() 方法）设置了状态对象而后用户重启了浏览器。那么当页面重新加载时，页面会接收一个onload事件，但没有 popstate 事件。
  • 通过History.pushState插入历史条目时可以传入state储存在history对象中，普通url访问该值返回null

方法

History.back()

  • 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1).
  • 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。

History.forward()

  • 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1).
  • 当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。

History.go()

  • 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。当前页面的相对位置标志为0
  • 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错
  • 没有参数的 go() 方法或者不是整数的参数时也没有效果。( 这点与支持字符串作为url参数的IE有点不同)。（IE是怎么支持字符串的？IE下history.go('www.baidu.com')并不能实现页面跳转）
  • IE、谷歌下没有参数会刷新当前页面

History.pushState()

  • 该方法向history添加了一条历史记录，url会改变，但是页面不会重新加载，window.onpopstate不会被触发
  • 从History.pushState添加的记录返回，或重新进入该记录，url会改变，页面依然不会重新加载，但是window.onpopstate将会被触发
  • 可以改变 document.referrer，它在用户发送 XMLHttpRequest 请求时在HTTP头部使用，改变state（状态）后创建的 XMLHttpRequest 对象的referrer都会被改变。
    • 因为referrer是标识创建 XMLHttpRequest 对象时 this 所代表的window对象中document的URL。
    • referer报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了
  • pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.
    • 状态对象：状态对象可以是能被序列化的任何东西。状态对象在序列化表示后有640k的大小限制。
      • 无论什么时候用户导航到新的状态，popstate事件就会被触发（这句说明并不准确，popstate事件的触发条件，在页面进入相关事件文章中有详细说明）。
    • 标题：目前忽略这个参数，建议传入空字符串
    • URL：新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。
  • 注意 pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是如此。
// history.state 中包含了 stateObj 的一份拷贝（改变外部对象时该对象不会被改变）。
// 假设现在用户又访问了 http://google.com，然后点击了返回按钮。此时，地址栏将显示 http://mozilla.org/bar.html，history.state 中包含了 stateObj 的一份拷贝。页面此时展现为bar.html。
// 且因为页面被重新加载了，所以popstate事件将不会被触发。？（谷歌测试，popstate被触发了，这里不明白）
let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

history.replaceState()

  • history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。
  • 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
    • 全局浏览器历史记录（WebExtensions history）是对用户所访问的页面按时间顺序进行的记录和保存。（谷歌在菜单-历史记录中展现）

————————————————————

window.open

  • open() 方法，创建一个新的浏览器窗口对象，如同使用文件菜单中的新窗口命令一样。strUrl 参数指定了该窗口将会打开的地址。
  • 调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。（实际加载这个URL的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行。）
  • 语法：let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
    • WindowObjectReference：打开的新窗口对象的引用。如果调用失败，返回值会是 null 。如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。
      • 跨域的话也能获取新窗口对象，但是无法访问到内部资源，只能对窗口本身进行操作（谷歌）
      • 纠错：IE下跨域能够成功打开，不会抛出异常
    • strUrl：新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。
      • strUrl设为空字符串时，可以在不改变窗口地址的情况下获得一个已经打开的同名窗口的引用。（该说法在谷歌没有校验通过，结果是请看下一条）
      • 如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口（加载about:blank）。
    • strWindowName：新窗口的名称。该字符串可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。
      • 如果已经存在以 strWindowName 为名称的窗口，则不再打开一个新窗口，而是把 strUrl 加载到这个窗口中。并忽略参数 strWindowFeatures 。
      • 如果要在每次调用 window.open()时都打开一个新窗口，则要把参数 strWindowName 设置为 _blank
      • _self：在当前窗口显示目标网页
    • strWindowFeatures：可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。
      • 在窗口打开之后，就不能用JavaScript改变窗口的功能和工具栏的设置
      • 如果名称是 strWindowName 的窗口不存在并且又没有提供 strWindowFeatures 参数（或者 strWindowFeatures 参数为空字符串），则子窗口以父窗口默认的工具栏渲染。
      • 如果 strWindowFeatures 参数中没有定义窗口大小，则新窗口的尺寸跟最近渲染的窗口尺寸一样。
      • 如果 strWindowFeatures 参数中没有定义窗口位置，则新窗口显示在最近渲染的窗口的坐标偏移22个像素的位置。
      • 如果 strWindowFeatures 参数中没有定义窗口位置，如果最近使用的窗口是最大化的，则没有这22像素的偏移，新（子）窗口也会被最大化。
      • 如果你定义了 strWindowFeatures 参数，那么没有在这个字符串中列出的特性会被禁用或移除 （除了 titlebar 和 close 默认设置为yes）（新打开的窗口才有效，可以禁用工具栏等）
      • 包含的选项不详解请参考https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open
window.open(
    "https://www.domainname.ext/path/ImageFile.png",
    "DescriptiveWindowName",
    "resizable,scrollbars,status"
);

————————————————————

标签a

  • 可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
  • a标签跳转的本质应该和修改location是一致的

属性

download

  • 此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件
  • 如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名
    • 此属性对允许的值没有限制，但是 / 和  会被转换为下划线
    • 大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名
    • 如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。
    • 如果 HTTP 头属性 Content-Disposition 被设置为inline（即 Content-Disposition='inline'），那么 Firefox 优先考虑 HTTP 头 Content-Dispositiondownload 属性。
  • 此属性仅适用于同源 URL
  • 尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。
// 允许用户下载一个HTML画布，你可以创建一个下载属性和画布数据作为文件URL链接图像：
var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

href

  • 包含超链接指向的 URL 或 URL 片段。
    • URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。
      • 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。
    • URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的file:、ftp:和mailto：。
      • 任何标准的邮件头字段可以被添加到你提供的邮件URL。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。
      • 参考https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
<a href="https://example.com">Website</a>
<a href="mailto:m.bluth@example.com">Email</a> // 电子邮件
<a href="tel:+123456789">Phone</a> // 电话
  • "javascript:void(0)" 被滥用，会在拖动 / 复制链接时导致意外行为，会向辅助技术（如屏幕阅读器）传达不正确的语义，推荐使用 <button> 来代替。通常情况下，您应该只将锚点用于正常的 URL 导航。

hreflang

  • 该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。？

ping

  • 包含一个以空格分隔的url列表，当跟随超链接时，将由浏览器(在后台)发送带有正文 PING 的 POST 请求。通常用于跟踪。（正文 PING 是什么？）

referrerpolicy

  • 表明在获取URL时发送哪个提交者（referrer）
    • "no-referrer" 表示 Referer: 头将不会被发送。
    • "no-referrer-when-downgrade" 表示当从使用HTTPS的页面导航到非 HTTPS 页面时不会发送 Referer: 头。如果没有指定策略，这将是用户代理的默认行为。
    • "origin" 表示 referrer将会是页面的来源，大致为这样的组合：主机和端口（不包含具体的路径和参数的信息）。
    • "strict-origin-when-cross-origin" 表示导航到其它源将会限制为这种组合：主机 + 端口，而导航到相同的源将会只包含 referrer的路径。（参数可能是origin-when-cross-origin）
    • "unsafe-url" 表示 referrer将会包含源和路径（domain + path）（但是不包含密码或用户名的片段）。这种情况是不安全的，因为它可能会将安全的URLs数据泄露给不安全的源。

rel

  • 该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。
  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types

target

  • 该属性指定在何处显示链接的资源。
    • _self: 当前页面加载，此值是默认的，如果没有指定属性的话。
    • _blank: 新窗口打开，即到一个新的未命名的窗口或浏览器上下文
      • 将在与您的页面相同的进程上运行新页面，要避免这种情况，请使用rel=noopener。
      • 因为是同一个进程，所以新窗口能够通过 window.opener 访问到来源页的winodw对象
    • _parent: 加载响应到当前的浏览上下文的父浏览上下文。如果没有浏览上下文，此选项的行为方式与 _self 相同。
    • _top: 加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
  • 使用target时，考虑添加 rel="noopener noreferrer" 以防止针对 window.opener API 的恶意行为。
    • noopener: 指示浏览器打开链接，而不向打开链接的文档授予新的浏览上下文访问权限-不在打开的窗口上设置window.opener属性（返回空）。
    • noreferrer:阻止浏览器跳到另一个页面时，通过HTTP头，发送当前页面的名字或其他值，以及把当前页设为另一个页面的引用(另一个页面的referrer值 )。

type

  • 该属性指定在一个 MIME type 链接目标的形式的媒体类型。其仅提供建议，并没有内置的功能。
    • MIME type （现在称为“媒体类型(media type)”，但有时也是“内容类型(content type)”）是指示文件类型的字符串，与文件一起发送（例如，一个声音文件可能被标记为 audio/ogg ，一个图像文件可能是 image/png ）。它与传统Windows上的文件扩展名有相同目的。

————————————————————

标签area

  • 在图片上定义一个热点区域，可以关联一个超链接。
  • <area>元素仅在<map>元素内部使用。
  • 它是一个空的元素不允许嵌套任何子元素或者文本。

属性

alt

  • 在未显示图像的浏览器上显示代替的文本字符串。在href 属性被使用的时候才是必需的。

coords

  • 给热点区域设定具体的坐标值。
  • 对于矩形或长方形, 这个coords 值为两个X,Y对：左上、右下。
  • 对于圆形, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。
  • 对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。
  • HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.
<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

download

  • 这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。（同a 标签）

href

  • area的超链接, 值为一个URL.

hreflang

  • 指明链接资源的语言类型，这个属性只能在指明href属性之后使用.

media

  • 指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在href属性存在情况下使用。

rel

  • 对于包含href属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
  • 这些值及其语义将由一些可能对文档作者有意义的权威进行注册。
  • 如果没有其他的关系，默认的关系是无效的。
  • 只有当href属性存在时时才使用该属性

shape

  • 相关联的热点的形状。
  • rect，它定义了一个矩形区域
  • default：规定全部区域。
  • circle：定义圆形。
  • poly：定义多边形区域。

target

  • 本属性指明了在什么地方显示链接的资源（参考标签a）
  • 本属性只能在指明href属性之后使用.

type

  • 该属性指定了用于链接目标的MIME类型的媒体类型。
  • 在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav时，浏览器可能会添加一个小的扬声器图标。
  • 只有当href属性存在时才使用该属性。

————————————————————

标签map

  • 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).

属性

name

  • name属性 给map一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。
  • name属性不准与同文档中其他map元素的值相同，如果id属性也被添加，name属性和id属性的值必须相同。
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
标签：

相关文章