How to get the URL of a page referrer and load the content in a div using jquery .load

Question

1.00/5 (1 vote)

See more:

I have a download page on my WordPress blog. On this page, I want to grab an HTML element with id="download" from any URL that linked to the download page.

please how do I accomplish this? look at my code below, but it is not working

What I have tried:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>

<script type="text/javascript">
var pagereferrer = Document.referrer;
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);

$( "#div1" ).load(pagereferrer #download);
</script>

<h2>
<span style="font-family: 'comic sans ms', sans-serif;">
Please wait ! Your download will begin in <span id="countdowntimer">10 </span> Seconds.......
</span>
</h2>

<div id="div1"> </div>

Posted 11-Feb-20 1:56am

Bill Mayheptad Ritchie

Updated 11-Feb-20 2:57am

Add a Solution

Comments

F-ES Sitecore 11-Feb-20 8:17am

Unless I'm mistaking your question, you can't. If you have gone from pagea to pageb, then pagea is gone and everything on it no longer exists so you can't access anything that was on it.

Bill Mayheptad Ritchie 11-Feb-20 12:37pm

if this your statement is true, how did w3school manage to make this work

$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt #p1");
});
});

I think the problem is maybe jquery .load method does not accept variables as the URL parameter

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2020-02-11T02:46:00

As your question is described, what you want is not possible.

Document.referrer only gives you the URL of the page that got you to this page. The DOM for that page no longer exists, so the fields you're looking for values from also no longer exist.

The only way I know of to get the value from the previous page is if that page passes the values you're looking for to the server controller and that controller places the values into the new page being served up.

Richard Deeming · Answer 2 · 2020-02-11T02:57:00

Solution 2

Assuming the referrer is a page on the some origin, then the load method should work:

JavaScript

var pageReferrer = document.referrer;
if (pageReferrer) {
    $("#div1").load(pageReferrer + " #download");
}

.load() | jQuery API Documentation[^]

NB: Pay attention to the documentation:

Quote:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy[^]; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Also note that the referrer might not be set, or might not contain the full URL, depending on the referrer policy set for the referring page:
Referrer-Policy - HTTP | MDN[^]

Posted 11-Feb-20 2:57am

Richard Deeming

Comments

Bill Mayheptad Ritchie 11-Feb-20 12:51pm

this still doesn't work,
the page is on the same domain https://howtechwork.com

but if I may ask, how did the https://thewpclub.net and https://www.neesrom.com
manage to get all the download link on their blog to redirect to the same particular page and ten display the download link on that page after some seconds countdown

Richard Deeming 11-Feb-20 13:10pm

"Doesn't work" doesn't give us much to go on. What happened when you debugged the code? What value was returned by the document.referrer property? What response did you get to the network request? What errors (if any) were logged in the console?

Bill Mayheptad Ritchie 11-Feb-20 13:49pm

thanks for your response @richard deeming.
there is no error in the console.
and the countdown timer on the download page work just fine.
but still, the jquery .load method did not seem to load the element with id="download" from the referring page into the selected div

but after removing the #download from the .load method, I only provide the pageReferrer variable, it loads the content into the div but the page appears like its auto-reloading the content.

look at the source code on the page https://howtechwork.com/downloadfiles/

<h2><span style="font-family: "comic sans ms", sans-serif">Please wait ! Your download will begin in <span id="countdowntimer">10 </span> Seconds.......</span></h2>

<div id="div1"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript">var pageReferrer = document.referrer;var timeleft = 10;var downloadTimer = setInterval(function(){timeleft--;document.getElementById("countdowntimer").textContent = timeleft;if(timeleft <= 0)clearInterval(downloadTimer);},1000);    $("#div1").load(pageReferrer);</script>

Richard Deeming 11-Feb-20 14:51pm

Looking at the source of that page isn't going to help. You need to start with a page on your site that contains an element with the ID "download", which refers the user to your "downloadfiles" page.

As I said, you need to debug your script to see what the document.referrer property returns, and examine the network request to make sure the AJAX request returns the page you were expecting.

Bill Mayheptad Ritchie 12-Feb-20 5:42am

thanks, @Richard Deeming, with the various debugging technique I have run so far.
I think the jquery .load function is loading the entire document of the referring page into the div. which is causing duplicate content in the console.

please if u no a better solution to my problem pls provide

all I was just trying to do is to send all the download links on each of my blog posts to howtechwork.com/downloadfiles then display the download link there.

just like thewpclub.net and https://www.neesrom.com did it on their blog.

please assist me

Richard Deeming 12-Feb-20 6:07am

If you're just passing the referrer to the load method, then it will load the entire content of the referring page.

If you want to load a fragment of the referring page, you have to append a space followed by the jQuery selector which identifies the element on the referring page which you want to load - eg:

$("#div1").load(pageReferrer + " #download");

If that's not loading anything, then the referring page doesn't contain an element with id="download", or that element is empty. For example, if you use Javascript to create or populate that element in the referring page, then it won't work with the load method.

Bill Mayheptad Ritchie 12-Feb-20 7:55am

Thank you once again @Richard Deeming.
the referring page is not created using javascript, it is a normal HTML tag

below is the part of the content on the referring page that I want to load into a div on the download page

<a id="download" class="download-wait" href="https://howtechwork.com/downloadfiles/" target="_blank" rel="noopener noreferrer"><img class="aligncenter" src="https://howtechwork.com/wp-content/uploads/2019/11/download-previous-or-older-version.jpg" /></a>

And below is the script on the download page
Hide Copy Code

<div id="div1"> </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript">var pageReferrer = document.referrer;$("#div1").load(pageReferrer + " #download", function(responseTxt, statusTxt, xhr){    if(statusTxt == "success")var loadedContent = document.getElementById("div1").firstChild;      console.log("External content loaded successfully! " + loadedContent);    if(statusTxt == "error")      alert("Error: " + xhr.status + ": " + xhr.statusText);  });</script>

despite that, I append the #download to the page referrer it's still not loading the anchor tag from the referring page to the download page.

I even tried to grab and log the image which is the first child of the anchor tag into the console to see if the .load method actually grabs the anchor tag with the Id=" download". But it displays Null in the console.

see the console content below

(index):735 External content loaded successfully! null

please what am I doing wrong?

Richard Deeming 12-Feb-20 8:09am

Sorry, this makes no sense.

Firstly, the link to the download page explicitly sets noreferrer, which would suggest that the document.referrer on the download page will be blank.

Secondly, the element you're trying to load is empty. If you insert that into your document, you won't be able to see it unless you use the developer tools to inspect the DOM.

Thirdly, why are you trying to dynamically insert a link to the download page into the download page, when you're already on the download page? What purpose would that serve?

Bill Mayheptad Ritchie 12-Feb-20 10:17am

thanks you @Richard Deeming, I was just trying to implement the features I found on thewpclub.net and https://www.neesrom.com.
when u click on a download link on any of these sites' blog posts, it will redirect you to a page thesite.com/download and then on the download page, it will display a countdown timer of around 10 seconds and then display the download link button.
so that is why I was trying to get the anchor tag with the id="download" from the referring page to the download page.
so that I can now figure out how to change the src attribute to whatever the file a user want to download is.

please if u have a better and reasonable approach to solve this problem, please assist me.

Richard Deeming 12-Feb-20 10:37am

As I keep trying to explain, if the referrer is set correctly, and if the referring page is on the same site, and if the referring page contains a non-empty element with id="download" in the source, then $("#div1").load(pageReferrer + " #download"); will work.

If it's not working, then one of those conditions is not met. You need to debug your code to find out which.

Adding rel="noopener noreferrer" to your link will prevent the referrer from being passed to the page you're linking to. The document.referrer will be blank.

Bill Mayheptad Ritchie 12-Feb-20 12:07pm

Thank you very much @Richard Deeming, believe me you are God sent.
after removing the rel="noopener noreferrer" from the anchor tag, then the code work. I finally get the content of the anchor tag displayed inside the div tag on my download page. Thank you very much.
If not for your explanation, I never knew that the purpose of that rel="noopener noreferrer" is to stop the content from being accessed on another page.

But I still don't understand why Wordpress automatically inserted rel="noopener noreferrer" to any anchor tag with target="_blank" attribute.

Even if you remove the rel="noopener noreferrer" from the anchor tag once u set the target attribute to _blank and u update the page it will be inserted back automatically.

is there anyway to stop such behaviour

Richard Deeming 12-Feb-20 12:25pm

It looks like WordPress add that automatically to any link with target="_blank".

Google has various suggestions for removing it, including a plugin which looks like the simplest option:
Remove noreferrer from post's links on the frontend – WordPress plugin | WordPress.org[^]