search
HomeWeb Front-endJS TutorialDetailed 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:

Copy the code The code is as follows:

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:

Copy code The code is as follows:

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.
Copy code The code is as follows:

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:

Copy code 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

Copy code The code is as follows:

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":

Copy the code The code is as follows:

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":
Copy the code The code is as follows:

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);
}

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UsePython vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesPython vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C   to JavaScript: How It All WorksFrom C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsJavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldBeyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)