Click here to Skip to main content
14,449,842 members
Rate this:
Please Sign up or sign in to vote.
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
Updated 11-Feb-20 3:57am
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.
Mayheptad 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
Rate this:
Please Sign up or sign in to vote.

Solution 1

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.
   
Comments
Mayheptad 11-Feb-20 12:41pm
   
than you @dave kreskowiak
please if you know any other way to accomplish this task, please help me
Rate this:
Please Sign up or sign in to vote.

Solution 2

Assuming the referrer is a page on the some origin, then the load method should work:
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[^]
   
Comments
Mayheptad 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?
Mayheptad 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.
Mayheptad 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.
Mayheptad 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?
Mayheptad 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.
Mayheptad 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[^]

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100