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

Open URL from JavaScript after user has entered details

本文关键字:JavaScript 打开 URL 用户 输入 详细信息      更新时间:2023-09-26

我需要阻止用户下载文件(PDF),直到他们在表单中输入了一些简单的细节。我们需要捕获细节,以便我们可以看到谁在下载文件。

查看此处的jsFiddle http://jsfiddle.net/ctn7N/1/

我需要它遵循的步骤是:

  1. 用户打开页面。如果他们已经填写了捕获表单,将该状态存储在一个变量中。
  2. 他们点击下载链接。保存链接以便以后使用。
  3. 如果他们已经输入了详细信息,即检查变量,在新标签中正常打开链接(默认行为)
  4. 如果他们没有输入详细信息,显示捕获表单。
  5. 一旦他们在表单上点击提交,再次显示下载部分,存储状态并在新选项卡中打开他们点击的原始下载。
  6. 在后续加载页面时,他们不应该再次输入他们的详细信息,下载应该直接打开。

我使用的当前代码在步骤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);
        }
    }
});

一个解决方案,如果你不需要打开一个新的页面,将是简单地改变当前页面的位置(意味着没有弹出问题):

    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
    }