Question

我需要阻止用户下载文件（PDF），直到他们在表单中输入一些简单的细节。我们需要捕获详细信息，以便我们可以看到谁正在下载文件。

在这里查看jsFiddle http://jsfiddle.net/ctn7N/1/

我需要遵循的步骤是：

用户打开页面。如果他们已经填写了捕获表单，请将该状态存储在变量中。
他们点击下载链接。存储链接以便以后使用。
如果他们已经输入了详细信息，即检查变量，请在正常情况下打开新标签中的链接（默认行为）。
如果他们没有输入详细信息，请显示捕获表单。
一旦他们点击表单上的提交，再次显示下载部分，存储状态并打开他们在新标签中点击的原始下载。
在页面的后续加载中，他们不必再次输入详细信息，只需打开下载。

当我尝试在新标签中打开下载链接时，我正在使用的当前代码在步骤5的最后部分失败。虽然它适用于小提琴，但它在Chrome v35.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);
        }
    }
});

Answer 1

如果您不需要打开新页面，解决方案就是简单地更改当前页面的位置（意味着没有弹出窗口问题）：

    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
    }

用户输入详细信息后，从JavaScript打开URL

1 个答案: