如何为外部链接创建确认页面


How to create confirmation page for external links

我博客的一些下载链接来自一些外部网站。我想放一个像这样的确认页面https://codyhouse.co/demo/simple-confirmation-popup/index.html对于那些表示使用外部网站内容的免责声明的链接。访问者可以同意继续,也可以不同意返回我的页面。

就像下面的东西:

  1. (www.example1.com)单击此处下载(www.example2.com/download.zip)

  2. 转到(www.example1.com/department.html)免责声明页面。

  3. 同意(请访问www.example2.com/download.zip)或者,不同意(访问www.example1.com)

提前谢谢。

首先,您需要选择所有这些链接,比如;

var ele = document.querySelectorAll('a[target]');

这将为您提供一个所有外部链接的数组(在本例中,我已将它们定义为具有目标属性的任何锚链接,但您可以使用任何内容)

你需要防止他们每个人的默认行为(这样他们在你显示免责声明之前就不会去任何地方),比如;

for(var i = 0; i < ele.length; i++) {
    ele[i].onclick = function(e) {
        e.preventDefault();
    }
};

最后,在preventDefault之后,你需要显示你的弹出窗口,然后如果用户可以,就把他们发送到那里,如果他们不可以,就什么都不做(关闭弹出窗口)。在这种情况下,我只是使用一个确认弹出窗口,但如果你愿意,你可以把它添加到任何dom弹出窗口中:

if(confirm('really go to this link?')) {
    window.location = this.href;
}

如果你想用简单的javascript确认框实现同样的功能,可以通过下面的代码块来完成。

function onClickEvent(){
   if(confirm("Your Disclaimer !!!")){
      //redirect to the url
      location.href = "http://www.example2.com/download.zip";
     }
   return;
}