Всем привет. Решил улучшить поведенческий фактор на страницах с товаром. В своей сфере, я могу выкладывать сервис-мануалы к технике для скачивания их пользователями, тем самым привлекая на сайт дополнительный трафик в виде спецов по ремонту. И в то же время не хочется что бы они зашли на страничку, кликнули на закачку и ушли. Выход один, сделать "отложенную загрузку", как это делается на файлообменниках. Ссылки будут на странице с товаром, в описании к товару. Нашел пару рабочих вариантов как это реализовать, но и в первом и во втором случае есть свои минусы. Помогите разобраться и сделать "как надо". Итак, вариант первый. Код: <script type="text/javascript"> var c = 45; // Числом указывается необходимый период задержки в секундах... function fcwait() { if (c > 0) { var el = document.getElementById("downloadDelayTimeSec") if( el ){ el.innerHTML = "" + c } c = c - 1 setTimeout("fcwait()", 1000) } else { document.getElementById("divDLWait").style.display = 'none'; document.getElementById("divDLStart").style.display = 'block'; } } </script> <p><span style="color:#293592;font-family:Tahoma;font-size:15px;"><!--регулируем color:#ЦВЕТ;font-family:ШРИФТ;font-size:РАЗМЕР.....НАДПИСИ--> </span></p> <div id="divDLWait" style="display:none;"><span style="color:#FF00FF;font-family:Tahoma;font-size:16px;">Ссылка появится через <b id="downloadDelayTimeSec">Load</b> секунд...</span></div> <div id="divDLStart" style="display:none;"><span style="color:#FF00FF;font-family:Tahoma;font-size:16px;"><a href="http://www_путь к файлу/тест.pdf">Теперь качаем</a></span></div> <!--a href="сюда вставить свою ссылку на скачивание"--> <p><a href="javascript://" onclick="fcwait();document.getElementById('divDLWait').style.display='block';style.display='none'">Скачать</a></p> Работает! Но, если посетитель нажмет сочетание Ctrl+U (просмотрит исходный код страницы), то может не дожидаясь обратного отсчета скачать файл скопировав полный путь к файлу на сервере (www_путь к файлу/тест.pdf) - ЭТО МИНУС. Вариант второй (более замудренный). На сервере, в корне сайта, создаем две папки к примеру upload и temp с вложенностью одной в другую (/upload/temp). В папке upload создаем файл up.php со следующим содержимым: Код: <head> <title></title> <script type="text/javascript" language="javascript"> function countdownRedirect() { var TARG_ID = "count_red"; var e = document.getElementById(TARG_ID); var cTicks = parseInt(e.innerHTML); var timer = setInterval(function() { if( cTicks > 0 ) { e.innerHTML = cTicks--; } else { clearInterval(timer); location.replace("<?php echo $link; ?>"); } }, 1000); } </script> </head> <body onload="countdownRedirect();"> <center> <p> Загрузка начнется через <h3><span class="counter" id="count_red"><?php echo $time; ?></span></h3> секунд... </p> </center> </body> этот файл после создания больше не изменяем. Затем в папку temp загружаем файл для закачки, к примеру test.pdf, и для этого файла в папке upload создаем файл test.php, со следующим содержимым: Код: <!DOCTYPE HTML> <html> <head> <?php $link = '/upload/temp/test.pdf'; $time = 45; ?> <?php include('up.php');?> и в последующем для каждого загружаемого файла надо создавать такой же файл (к примеру /upload/temp/moduli.zip - /upload/moduli.php)и редактировать его содержимое. После уже можно в любом месте сайта вставить ссылку /upload/test.php (или www_сайт/upload/test.php). Все. Здесь большой МИНУС (на мой взгляд) то, что посетителя тупо перекидывает на страницу, где кроме обратного отсчета ничего нет, ну и неудобство, после заливки файла создавать еще одноименный файл с расширением php. Но ссылка на файл здесь уже не бросается так в глаза при просмотре исходного кода (/upload/temp/test.pdf). Попробовал из второго варианта, запихать ссылку (/upload/test.php) в iframe, тогда ссылки вообще не видно!!! и грузится внутри нужной страницы!!!, но здесь идет автоматический отсчет с последующей "автоматической" закачкой. Подскажите, как решить проблему? Что бы нельзя было просмотреть ссылку пока не отсчитает счетчик и все происходило на одной странице. Можно ли как-то сделать запуск во фрейме только по клику? Или может есть другое решение?
Убери в первом варианте ссылку из html. В идеале, после завершения таймера её надо подгружать аяксом и вставлять на страницу, но можно просто завернуть в base64 и спрятать внутри js, а потом по таймеру подставлять оттуда (чтоб не пришлось шаманить с бекендом). Если сильно задаться целью выковырять ссылку не дожидаясь окончания таймера, такой вариант от этого не спасёт, но времени на это уйдёт не намного меньше, чем по таймеру и просто просмотра кода страницы будет не достаточно. А, и ещё: обязательно убери onclick и навесь обработчик внешним кодом. Этот онклик выдаёт функцию, в которой будет спрятана ссылка. Если в html не будет ни самой ссылки ни вызова функции, которая её должна туда подставить, в большинстве случаев этого должно быть достаточно + js код убрать подальше от самой кнопки.
Dotrox, помоги все правильно написать. Сделай один пример правильного написания, пожалуйста. Ты написал вроде понятно по смыслу, но без должных знаний придется долго мучится, как воткнуть base64 и без html ссылки? Подскажи.
Получилось! Со вторым вариантом совсем не стал работать, а сделал по совету Dotrox'a через base64, используя первый вариант. Решение (взято с просторов интернета). 1) Создал в и сохранил в папку upload фалик url.php со следующим содержимым: Код: <?php $url = (isset($_GET['url']) and $_GET['url']) ? base64_decode($_GET['url']) : ''; if ($url) { header("Location: $url"); } ?> 2) Кодирую ссылку, на файл для скачивания, в base64. Для примера, /upload/test.pdf будет выглядеть так L3VwbG9hZC90ZXN0LnBkZg== 3) Размещаю скрытую ссылку у себя на сайте вот так: Код: <a href="/upload/url.php?url=L3VwbG9hZC90ZXN0LnBkZg==Теперь качаем</a> Ну и в конечном варианте это выглядит так: Код: <script type="text/javascript"> var c = 45; // числом указывается необходимый период задержки в секундах... function fcwait() { if (c > 0) { var el = document.getElementById("downloadDelayTimeSec") if( el ){ el.innerHTML = "" + c } c = c - 1 setTimeout("fcwait()", 1000) } else { document.getElementById("divDLWait").style.display = 'none'; document.getElementById("divDLStart").style.display = 'block'; } } </script> <p><span style="color:#123456;font-family:Tahoma;font-size:16px;"><!--регулируем color:#ЦВЕТ;font-family:ШРИФТ;font-size:РАЗМЕР.....НАДПИСИ--> </span></p> <div id="divDLWait" style="display:none;"><span style="color:#123456;font-family:Tahoma;font-size:16px;">Ссылка появится через <b id="downloadDelayTimeSec">Load</b> секунд...</span></div> <div id="divDLStart" style="display:none;"><span style="color:#123456;font-family:Tahoma;font-size:16px;"><a href="/upload/url.php?url=L3VwbG9hZC90ZXN0LnBkZg==>Теперь качаем</a></span></div> <!--a href="сюда вставить свою ссылку на скачивание"--> <p><a href="javascript://" onclick="fcwait();document.getElementById('divDLWait').style.display='block';style.display='none'">Скачать</a></p> Все заработало как надо! --------------------------------------------------------------------------------------------------------------------------- UP Скрипт вынес в шаблон. А последние 4-е строчки вставляю там где мне надо вывести загрузки. --------------------------------------------------------------------------------------------------------------------------- Кому надо, можете скачать этот архив (в архиве два файла) Отложенная загрузка . И залить к себе на сервер, инструкция прилагается )))
Не совсем то, что я имел ввиду. Мне кажется, этот вариант от оригинального в плане защищённости не сильно отличается. Я имел ввиду такое: HTML: <script> var c = 4; // задержка в секундах var cc = c; function cT(b) { if (cc > 0) { $('#timer').html(cc); cc -= 1; setTimeout("cT()", 1000); } else { dL(b); cc = c; } } function dL(b){ var x = 'L3VwbG9hZC90ZXN0LnBkZg=='; //полная ссылка на файл включая домен var l = window.atob(x); var ra = $('<a/>').attr('href', l).text('Нажмите, если скачивание не началось'); $('#timer').html(ra); window.location = l; } $(function(){ $(document).on('click', '#downloadButton', function(e){ e.preventDefault(); cT(this); }); }); </script> <a href="#" id="downloadButton">Скачать</a> <div id="timer"></div>
