Mayheptad Ответов: 2

Как получить URL-адрес реферера страницы и загрузить содержимое в div с помощью jquery .load


У меня есть страница загрузки в моем блоге WordPress. На этой странице Я хочу захватить HTML-элемент с id="download" из любого URL-адреса, связанного со страницей загрузки.

пожалуйста, как мне это сделать? посмотрите на мой код ниже, но он не работает

Что я уже пробовал:

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

F-ES Sitecore

Если я не ошибаюсь в вашем вопросе, вы не можете. Если вы перешли с pagea на pageb, то pagea исчезла, и все на ней больше не существует, поэтому вы не можете получить доступ ни к чему, что было на ней.

Mayheptad

если это ваше утверждение верно, то как w3school удалось заставить это работать


$(документ).готово(функция(){
$("кнопка").click(функция(){
$("#див1").нагрузки("demo_test.txt #Р1");
});
});


Я думаю, что проблема, возможно, заключается в том, что метод jquery .load не принимает переменные в качестве параметра URL

2 Ответов

Рейтинг:
2

Richard Deeming

Предполагая, что реферер-это страница на некотором источнике, то load метод должен работать:

var pageReferrer = document.referrer;
if (pageReferrer) {
    $("#div1").load(pageReferrer + " #download");
}
.load() | jQuery API документация[^]

NB: Обратите внимание на документацию:
Цитата:
Из-за ограничений безопасности браузера большинство запросов "Ajax" подлежат та же политика происхождения[^]; запрос не может успешно получить данные из другого домена, поддомена, порта или протокола.

Также обратите внимание, что реферер может быть не задан или не содержать полный URL-адрес, в зависимости от политики реферера, установленной для ссылающейся страницы:
Реферер-политика - HTTP | MDN[^]


Mayheptad

это все еще не работает,
страница находится в том же домене https://howtechwork.com

но если позволите спросить, как это произошло? https://thewpclub.net и еще https://www.neesrom.com
умудритесь получить все ссылки на скачивание в своем блоге, чтобы перенаправить их на одну и ту же конкретную страницу, а затем отобразить ссылку на скачивание на этой странице через несколько секунд обратного отсчета

Richard Deeming

- Не работает." это не дает нам много информации. Что произошло, когда вы отладили код? Какое значение было возвращено пользователем document.referrer собственность? Какой ответ вы получили на сетевой запрос? Какая ошибка (если таковые имеются) были ли они зарегистрированы в консоли?

Mayheptad

спасибо за ваш ответ @richard deeming.
в консоли нет никакой ошибки.
и таймер обратного отсчета на странице загрузки работает просто отлично.
но все же метод jquery .load, похоже, не загружал элемент с id="download" со ссылочной страницы в выбранный div

но после удаления #download из системы .метод загрузки, я предоставляю только переменную pageReferrer, она загружает содержимое в div, но страница выглядит так, как будто она автоматически перезагружает содержимое.

посмотрите на исходный код на странице 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

Взгляд на источник этой страницы не поможет. Вам нужно начать со страницы на вашем сайте, которая содержит элемент с идентификатором "download", который отсылает пользователя на вашу страницу "downloadfiles".

Как я уже сказал, вам нужно отладить свой сценарий, чтобы увидеть, что происходит. document.referrer свойство возвращает, и проверьте сетевой запрос, чтобы убедиться, что запрос AJAX возвращает страницу, которую вы ожидали.

Mayheptad

спасибо, @Richard Deeming, с различными методами отладки, которые я использовал до сих пор.
Я думаю, что функция jquery .load загружает весь документ ссылающейся страницы в div. что приводит к дублированию содержимого в консоли.

пожалуйста, если у вас нет лучшего решения моей проблемы, пожалуйста, предоставьте

все, что я просто пытался сделать, это отправить все ссылки для скачивания на каждый из моих постов в блоге howtechwork.com/downloadfiles затем отобразите там ссылку для скачивания.

прямо как thewpclub.net и еще https://www.neesrom.com сделал это в своем блоге.

пожалуйста помогите мне

Richard Deeming

Если вы просто передаете реферера в load метод, то он будет загружать все содержимое ссылающейся страницы.

Если вы хотите загрузить фрагмент ссылающейся страницы, вы должны добавить пробел, за которым следует селектор jQuery, который идентифицирует элемент на ссылающейся странице, который вы хотите загрузить - например:

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

Если это ничего не загружает, то ссылающаяся страница не содержит элемента с id="download", или этот элемент пуст. Например, если вы используете Javascript для создания или заполнения этого элемента на ссылающейся странице, то он не будет работать с load метод.

Mayheptad

Еще раз спасибо @Richard Deeming.
ссылающаяся страница не создается с помощью javascript, это обычный HTML метка

ниже приведена часть контента на ссылочной странице, которую я хочу загрузить в div на странице загрузки

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

А ниже приведен скрипт на странице загрузки
Скрыть   скопировать код
<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>


несмотря на это, я добавляю #download к рефереру страницы, он все еще не загружает тег привязки со ссылочной страницы на страницу загрузки.

Я даже попытался захватить и записать изображение, которое является первым дочерним тегом якоря, в консоль, чтобы увидеть, есть ли он .метод load фактически захватывает якорный тег с идентификатором=" download". Но он отображает Null в консоли.

смотрите содержимое консоли ниже

(индекс):735 внешний контент загружен успешно! нулевой

пожалуйста, что я делаю не так?

Richard Deeming

Извините, но это не имеет смысла.

Во - первых, ссылка на страницу загрузки явно устанавливает noreferrer, что позволило бы предположить, что document.referrer на странице загрузки будет пусто.

Во-вторых, элемент, который вы пытаетесь загрузить, пуст. Если вы вставите это в свой документ, вы не сможете увидеть его, если не используете инструменты разработчика для проверки DOM.

В-третьих, почему вы пытаетесь динамически вставить ссылку на страницу загрузки на страницу загрузки, когда вы уже находитесь на странице загрузки? Какой цели это послужит?

Mayheptad

спасибо вам @Richard Deeming, я просто пытался реализовать функции, которые я нашел на thewpclub.net и еще https://www.neesrom.com.
когда вы нажмете на ссылку для загрузки в блоге любого из этих сайтов, она перенаправит вас на страницу thesite.com/download а затем на странице загрузки он отобразит таймер обратного отсчета примерно на 10 секунд, а затем отобразит кнопку ссылки на загрузку.
вот почему я пытался получить якорный тег с идентификатором="download" со ссылочной страницы на страницу загрузки.
так что теперь я могу выяснить, как изменить атрибут src на любой файл, который пользователь хочет загрузить.

пожалуйста, если у вас есть лучший и разумный подход к решению этой проблемы, пожалуйста, помогите мне.

Richard Deeming

Как я все пытаюсь объяснить, если реферер установлен правильно, и если ссылочная страница находится на том же сайте, и если ссылающаяся страница содержит непустой элемент с id="download" значит, в источнике $("#div1").load(pageReferrer + " #download"); будет работать.

Если это не работает, то одно из этих условий не выполняется. Вам нужно отладить свой код, чтобы выяснить, какой именно.

Добавление rel="noopener noreferrer" переход по вашей ссылке предотвратит переход реферера на страницу, на которую вы ссылаетесь. То document.referrer будет пусто.

Mayheptad

Большое вам спасибо @Richard Deeming, поверьте мне, что Вы посланы Богом.
после снятия атрибута rel="noreferrer noopener" от тега "Anchor", тогда код будет работать. Наконец-то я получаю содержимое якорного тега, отображаемого внутри тега div на моей странице загрузки. Большое спасибо.
Если бы не ваше объяснение, Я никогда не знал, что цель этого rel="noopener noreferrer" состоит в том, чтобы остановить доступ к контенту на другой странице.

Но я до сих пор не понимаю, почему Wordpress автоматически вставляет rel="noopener noreferrer" в любой якорный тег с атрибутом target="_blank".

Даже если вы удалите rel="noopener noreferrer" из тега привязки, как только вы установите целевой атрибут в _blank и обновите страницу, он будет вставлен обратно автоматически.

есть ли вообще способ остановить такое поведение

Richard Deeming

Похоже, что WordPress добавляет это автоматически к любой ссылке с помощью target="_blank".

У Google есть различные предложения по его удалению, включая плагин, который выглядит как самый простой вариант:
Удалите noreferrer из ссылок поста на frontend – WordPress plugin | WordPress.org[^]

Рейтинг:
1

Dave Kreskowiak

Как описано в вашем вопросе, то, что вы хотите, невозможно.

Document.referrer дает вам только URL-адрес страницы, которая привела вас на эту страницу. DOM для этой страницы больше не существует, поэтому поля, из которых вы ищете значения, также больше не существуют.

Единственный известный мне способ получить значение с предыдущей страницы-это если эта страница передает значения, которые вы ищете, контроллеру сервера, а этот контроллер помещает значения на новую обслуживаемую страницу.


Mayheptad

чем ты @dave kreskowiak
пожалуйста, если вы знаете какой-либо другой способ выполнить эту задачу, пожалуйста, помогите мне