菜单

浏览器里的JavaScript—— document

2019年7月27日 - Html/Html5

近年来要求经过 JavaScript 获取页面包车型地铁来自,那几个操作很简单,使用
document.referrer
就能够获取到了。不过,实际应用中照旧有无数竟然景况,那儿简单整理一下。

JavaScript
在浏览器里面运转,它供给这么些情况给它提供三个根对象。在浏览器的根对象便是window,window 代表了浏览器的窗口。

第一蒙受的主题素材,是从 HTTPS 页面转到 HTTP 页面后,document.referrer
的值为空。出于安全性思量,非常多网址的部分至关首要页面(例如Taobao的报到页面)都会利用
HTTPS 协议。假诺有些未登入用户在页面 A(HTTP 页面)点击了页面 B(HTTP
页面)的链接,但页面 B 必要用户登陆,于是先跳到登入页面 (HTTPS
页面),登陆成功今后再跳回 B(HTTP 页面),那时你会发觉 B 页面上取不到
document.referrer 了。也正是说,要是想依据 referrer
来还原用户访谈路线的话,假使路线中有 HTTP 页面也会有 HTTPS
页面,那么这几个门路就能在从 HTTPS 到 HTTP 的地点断掉。

在窗口下边七个档案的次序正是 document,document 代表了在浏览器窗口里面张开来的
HTML 页面,本人也是具备档案的次序的。

本条题指标起点是浏览器的安全计策,只靠 JavaScript
就像并未专门好的消除办法。多个抄袭的思路是利用 window.name,在 HTTPS
页面将近期页面的 url 写到 window.name 中,再在下二个页面(HTTP
页面)读取。

HTML
页面里面有美妙绝伦成分:段落,图片,表单(form),表格,链接。可经过自然手段在
JavaScript 中访谈,访谈片段也许是只读的,有的正是可写的。可写意味着在
JavaScript 里面能够动态的改换页面上展现的内容。

除了那些之外这种意况,别的页面跳转是还是不是都能健康取到 document.referrer
呢?笔者查找了一番,开采 这儿
有人整理了一个列表,可是不是很全,比方没有包含垂而不死的 IE6
的事态。于是便本人入手,在设想机里装了 N
个浏览器,把各个场合都测验了须臾间(这真是一个体力活),结果见下表:

1.Document Object Model

文书档案对象模型

document 对象的分子提供了 HTML 文书档案的消息。

images 是 document
对象成员,是三个数组。它表示了在那几个页面个中全体的图样,把图纸组合起来组成一个数组,能够访谈。

alert(document.images); // [object HTMLCollection]
是一种集合(容器)

alert(document.images[0]); //[object HTMLImageElement] 第三个因素是
HTML 图片成分

alert(document.images[0].src);  //  展现路线

不是怀有因素都像 images 同样通过二个数组直接待上访谈到持有图片,唯有像
images  / form 那样我有提供数组的本事够用 document.images 直接访谈。

<img name=”mama” src=”01.jpg”> 通过 alert(document.mama);
能够访谈 

对此段落 <p id=”p1″ name=”dancing”> name 和 id 是富有 HTML
标志都能够部分属性,name 无法重新,id 可重复。

alert(document.getElementsByName(“dancing”)); // [object NodeList]

alert(document.getElementById(“p1”)); // [object
HTMLParagraphElement]

通过那么些手法能够访谈到 HTML 中具备因素。

大家在做 HTML
页面时,如若不是做静态的事物,需求在页面有所动作,应该事先给全体不小希望用到的事物加上
name 或 class / id (类)。

操作 IE6 IE7 IE8 IE9 Firefox Chrome Opera Safari
直接在地址栏输入URL “” “” “” “” “” “” “” “”
从书签访问URL “” “” “” “” “” “” “” “”
从页面A点击超链接,跳转到页面B(target=”_self”)
从页面A点击超链接,跳转到页面B(target=”_blank”)
从页面A右键单击超链接,在新标签页中打开页面B “”
从页面A右键单击超链接,在新窗口中打开页面B “”
拖动链接到地址栏 “” 无法拖动 无法拖动 “” “” “” “” “”
拖动链接到标签栏 “” “” “” “” “” “” “”
使用浏览器的前进、后退按钮
JS 修改 location.href “” “” “”
JS 使用 window.open “” “” “” “”
服务器重定向(302跳转) 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面
页面 Meta Refresh “” “” “” “” “” 转向页 转向页 转向页

2.document 的成员

anchors[]    forms[]     images[]       cookie      title

bgColor      fgColor     linkColor       alinkColor     vlinkColor

在 JavaScript 里,不一致浏览器材体落实分裂,不是富有浏览器扶助 bgColor
可写。

上表中的“√”表示能健康取到 referrer,”” 表示 referrer 为空。

3.图像

image 对象的 src 能够改写以装入一副新的图纸。

能够创设 Image() 对象来提前装载图片。

onLoad 事件注解图片装载达成。

图片 1

images[i]=new Image(); 

Image() 是二个构造器,你能够用它去制作二个目的出来,用来发表三个image。

images[i].src=i+”.jpg”; 把 6 个图装载进来。

document.anm.src=images[index].src;

用数组里面早就装载的 6 个图片的 src 替换现在展现在页面包车型大巴图形的 src 。

index=(index+1)%6; 每调用贰遍换叁个图片,完结图片动态变化

除却 IE 外,其余浏览器都以当下官互连网能下载到的摩登版本,个中 Safari
同一时候测验了 Windows 版和 Mac 版,结论一致。

4.事件

onLoad / onUnload

onMouseOver / onMouseOut

onClick / onDblClick

onSubmit

别的还应该有一部分意况未做测验,比如点击 Flash 跳转时各浏览器下能还是无法保持
referrer 等。

上表中多数动静是符合预期的,不过就如也是有几处索要专注的:

1、在 Safari 中,右键展开链接会错失 referrer;
2、在 IE 中,修改 location.href 或利用 window.open 张开页面会放弃referrer(IE 9 有少数不一,使用 location.href 跳转不会丢弃referrer);
3、使用 meta 跳转时,IE / Firefox 下会遗弃 referrer。

最终,三个简练的下结论是:纵然您供给经过 document.referrer
收集页面访谈来源,最棒不用使用 JS 跳转或展开新窗口,也休想选拔 meta
跳转。

你大概感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图