Detailed analysis of javascript operation referer_javascript skills
Importance of Referrer
There is a referer header in the HTTP request, which is used to indicate the source reference page of the current traffic. For example, if you click a link on www.sina.com.cn/sports/ to reach the homepage of cctv.com, then the referrer will be www.sina.com.cn/sports/. In Javascript, we can get the same information through document.referrer. Through this information, we can know the channel from which visitors came to the current page. This is very important for Web Analytics. It can tell us the distribution of traffic brought by different channels, as well as the keywords searched by users, etc., which are all obtained by analyzing this referrer information.
However, for various reasons, sometimes the referrer read in Javascript is an empty string. The following summarizes the situations in which referrers will be lost.
Modify the Location object for page navigation
The Location object is a very practical object for page navigation. Because it allows you to change only part of the Url. For example, when switching from a cn domain name to a com domain name, the other parts remain unchanged:
window.location.hostname = "example.com";
However, the method of page navigation by modifying the Location will cause the Referrer to be lost under IE.
An empty string is returned under IE5.5
Chrome3.0, Firefox3.5, Opera9.6, and Safari3.2.2 all return to the source webpage normally
Open a new window with window.open method
Example:
Clicking this link will open the Google website in a new window. We can see the referrer sent by entering the following js code in the address bar.
javascript:alert(document.referrer)
Test results:
An empty string is returned under IE5.5
Chrome3.0, Firefox3.5, Opera9.6, and Safari3.2.2 all return to the source webpage normally
If the same domain name is redirected through this method, then we can obtain the lost referrer information by accessing the windoww.opener object. The code is as follows:
If it’s cross-domain, there’s no way~
Mouse drag to open a new window
Mouse drag is a very popular user habit nowadays. Many browsers have built-in or plug-in support for mouse drag browsing. However, pages opened in this way basically lose referrers. Moreover, in this case, it is impossible to use window.opener to obtain the lost referrer.
Tested:
Maxthon2.5.2, FireGesture plug-in for Firefox, Chrome3.0, Opera9.6, Safari3.2.
Click on the Flash internal link
When you click on Flash to reach another website, the Referrer situation becomes more complicated.
Under IE, the value read through document.referrer of client Javascript is empty, but if you use traffic monitoring software to take a look, you will find that the Referer header in the HTTP request is actually Valuable, this may be a bug implemented by IE. At the same time, this value points to the address of the Flash file, not the address of the source web page.
After clicking Flash to reach a new window under Chrome 4.0, the Referrer also points to the address of the Flash file, not the address of the source web page.
Chrome 3.0 and Safari 3.2 are the same, both will lose the Referrer information.
Opera is the same as Firefox, the value of Referrer is the address of the source web page.
HTTPS to HTTP
When jumping from an HTTPS website to an HTTP website, the browser will not send a referrer. The behavior of all major browsers is the same.
For example, when we use Google Reader or Gmail under HTTPS and click a link to go to another website, then technically speaking, there is no difference between such access and the user directly typing in the URL.
The impact of the loss of Referrer on advertising traffic monitoring
If the Referrer is lost, Web Analytics will lose a very important part of the information, especially for advertising traffic, it will be impossible to know the actual source. At present, many domestic websites that use Google Adsense ads use the window.open method to open advertising links, so the Referrer will be lost under IE, and we know that IE is the browser with the largest market share at present, so its impact is huge. Big ones. Many traffic statistics tools will therefore classify this part of the traffic as "direct traffic", which is equivalent to the user directly typing in the URL.
For such a situation, advertisers need to add specific tracking parameters to the URL of the landing page when placing ads.
For example, if you click on a Flash ad, the URL it reaches is http://www.example.com/. In order to monitor which channel this traffic comes from, we can modify the landing URL of this ad to http. ://www.example.com/?src=sina, similar to this method, and then use Javascript code to extract this src parameter in the landing page, so that the advertising source information can be obtained.
When running Google Adwords, the background system has an "auto-tagging" option. When this option is enabled, Google will automatically add a gclid parameter when generating the landing page URL of all ads. This parameter can integrate data from the Google Analytics backend and the Adwords advertising backend. In this way, you can know which advertising campaign the advertising traffic corresponds to, which advertising source and advertising keywords and other information. The idea is actually similar to the one mentioned above. It’s just that Google automatically modified the URL for you.
Solution to the empty referer under IE
If you use the window.location.href method to jump under IE, the referer value will be empty. If you jump within the tag, the referer will not be empty. Therefore, this IE problem can be solved by using the following code
function gotoUrl(url){
if(window.VBArray){
var gotoLink = document.createElement('a');
gotoLink .href = url;
document.body.appendChild(gotoLink) ;
gotoLink .click(); ;
Prohibit browsers from using referer when accessing links
When we click on a link from a website to enter another page, the browser will add the Referer value to the header to identify this time The source page visited. However, this kind of identification may leak the user's privacy. Sometimes I don't want others to know where I clicked in. Is there any way to prevent the browser from sending a Referer?
•Use the new html5 solution, use rel="noreferrer", declare the connection attribute as noreferrer, currently only supported by chrome4.
•Use an intermediate page, but actually still send the referrer, such as using Google's connection redirection, noreferrer.js.
•Use javascript protocol link transfer, see the instructions below.
Open a new window, equivalent to target="_blank":
function open_window(link){
var arg = 'u003cscriptu003elocation.replace("' link '")u003c/scriptu003e';
window.open('javascript:window.name;', arg) ;
}
redirects to a connection, equivalent to target="_self":
function redirect(link){
var arg ='u003cscriptu003etop.location.replace("' link '")u003c/ scriptu003e';
var iframe = document.createElement('iframe');
iframe.src='javascript:window.name;';
iframe.name=arg;
document.body. appendChild(iframe);
}

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
