Блог

Мне нужно запретить пользователю загружать файл (PDF), пока он не введет некоторые простые данные в форму. Нам нужно зафиксировать детали, чтобы мы могли видеть, кто загружает файл.

Смотрите jsFiddle здесь http://jsfiddle.net/ctn7N/1 /

Шаги, которые мне нужно выполнить, следующие:

1. Пользователь открывает страницу. Если пользователь уже заполнил форму захвата, сохраните это состояние в переменной.
2. Они нажимают на ссылку для скачивания. Сохраните ссылку, чтобы ее можно было использовать позже.
3. Если пользователь уже ввел сведения, т.Е. проверил переменную, откройте ссылку на новой вкладке в обычном режиме (поведение по умолчанию).
4. Если они не ввели данные, покажите форму захвата.
5. Как только пользователь нажмет кнопку Отправить в форме, снова отобразите раздел загрузки, сохраните состояние и откройте исходную загрузку, на которую он нажал, на новой вкладке.
6. При последующих загрузках страницы им не нужно вводить свои данные снова, и загрузки должны просто открываться.

Текущий код, который я использую, завершается с ошибкой в последней части шага 5, когда он пытается открыть ссылку для скачивания на новой вкладке. Хотя это работает в скрипте, в Chrome версии 35.0 происходит сбой, поскольку ссылка блокируется блокировщиком всплывающих окон.

Есть ли какой-либо способ обойти это, который позволил бы ему открываться во всех браузерах?

Спасибо, что посмотрели,

Адам

Код для сопровождения скрипки:

HTML-код

 <div id="capture-section" class="hide">
    <form id="capture-form">
        <label for="name">Enter your name to download the file:</label>
        <input id="name" name="name" type="text" />
        <button id="submit-btn" type="submit">Submit</button>
    </form>
</div>
<div id="download-section">
    <!-- Download links replaced with placeholder links for jsFiddle, would normally be PDFs -->
    <a target="_blank" class="js-download" href="http://example.com">Document 1</a>
    <a target="_blank" class="js-download" href="http://www.google.com">Document 2</a>
    <a target="_blank" class="js-download" href="http://www.bing.com">Document 3</a>
</div>
  

JavaScript

 $(document).ready(function() {
    var detailsEntered = '',
        downloadLink = '';

    // Would normally access localStorage on load of page to see if user has already entered details
    // Removed to allow multiple jsFiddle runs for a user
    //
    // detailsEntered = accessStorage('retrieve', 'detailsEntered');

    $('.js-download').click(function(event) {
        var self = $(this);
        downloadLink = self.attr('href'); // Store clicked download link
        if (detailsEntered != 'true') {
            // If the user hasn't entered details yet, show the form
            $('#download-section').addClass('hide');
            $('#capture-section').removeClass('hide');
            event.preventDefault();
            return false;
        } // Otherwise allow standard link behviour
    });

    $("#submit-btn").click(function(event) {
        var name = $('input[name=name]').val(),
            proceed = true;

        if(name==""){
            $('input[name=name]').addClass("error");
            proceed = false;
        }

        if(proceed) {
            // If form validates, show downloads again and store value for return visits
            $('#capture-form input').val('');
            $('#capture-section').addClass('hide');
            $('#download-section').removeClass('hide');
            detailsEntered = 'true';
            accessStorage('store', 'detailsEntered', 'true');

            // Now open previously clicked download link in new tab
            // DOES NOT WORK - Blocked by popup blocker
            window.open(downloadLink, '_blank');
        }
        event.preventDefault();
        return false;
    });

    //reset previously set border colors and hide all message on .keyup()
    $("input, textarea").keyup(function() {
        $(this).removeClass("error");
    });

    function accessStorage(action, dataKey, dataValue) {
        if(typeof(Storage) === "undefined") {
            // No support for localStorage/sessionStorage.
            return false;
        } 
        if (action == 'store') {
            localStorage.setItem(dataKey, dataValue);
        } else if (action == 'retrieve') {
            return localStorage.getItem(dataKey);
        }
    }
});
  

Решением, если вам не нужно открывать новую страницу, было бы просто изменить местоположение текущей страницы (означает отсутствие проблемы с всплывающим окном) :

     if(proceed) {
        // If form validates, show downloads again and store value for return visits
        $('#capture-form input').val('');
        $('#capture-section').addClass('hide');
        $('#download-section').removeClass('hide');
        detailsEntered = 'true';
        accessStorage('store', 'detailsEntered', 'true');

        // Now open previously clicked download link in new tab
        window.location.href = window.location.protocol   "//"   window.location.host   downloadLink; // if downloadLink is a relative URI
        // window.location.href = downloadLink; // if downloadLink is an absolute URI
    }