在用户输入详细信息后从JavaScript打开URL
Open URL from JavaScript after user has entered details
我需要阻止用户下载文件(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);
}
}
});
一个解决方案,如果你不需要打开一个新的页面,将是简单地改变当前页面的位置(意味着没有弹出问题):
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打开Firefox
- 使用 javascript 打开新的浏览器窗口时出错
- 使用javascript打开outlook,以便在c#中发送带有附件的邮件
- 使用JavaScript打开另一个html页面时传递变量
- 链接中有php变量的Javascript打开窗口
- 如何在windowsphone 7浏览器中通过javascript打开新窗口或选项卡
- 如果javascript打开/关闭,则隐藏和显示html代码
- javascript打开外部程序中的链接,而不是浏览器
- 从 JavaScript 打开 Gmail Compose 窗口 (Angular)
- 通过javascript打开弹出窗口
- 用Javascript打开外部sqlite3数据库
- 从javascript打开excel文件并传递参数
- 谷歌Chrome扩展在用Javascript打开的弹出窗口中工作吗
- 使用javascript打开一个新的选项卡,但使用javascript保留在当前选项卡上
- 从javascript打开一个word文档
- 未通过JavaScript打开新页面
- Javascript打开新窗口并重新编写内容
- 从文本框中附加url,然后使用javascript打开新窗口
- 用JavaScript打开一个新窗口,然后关闭前一个窗口
- 从 javascript 打开一个 JSON 文件