单击外部链接时的警告以及如何将其添加到链接类

I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.

我不确定当你点击外部链接时，如何使用javascript警告弹出窗口。

I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:

我认为将类放在我的外部链接上也很方便，但我不太确定它是否正确，因为它现在也是。这是我目前正在使用的HTML：

        <div id="commercial-container">
        <a href="http://www.link1.com" class="external" target="_blank"> <img src="picture1.jpg" /> </a>
        <a href="http://www.link2.com" class="external" target="_blank"> <img src="pciture2.jpg" /> </a>
        <a href="http://www.link3.com" class="external" target="_blank"> <img src="picture3.jpg" /> </a>
        <a href="http://www.link4.com" class="external" target="_blank"> <img src="picture4" /> </a>
        </div>

I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.

我对javascript很新，对如何解决我的问题非常不确定。到目前为止我唯一想到的是我必须使用window.onbeforeload，但我不知道如何找出如何编写我需要的函数。

I want to keep my javascript in a separated .js document instead of in the HTML as well.

我想将我的javascript保存在单独的.js文档中，而不是HTML中。

4 个解决方案

#1

Call the confirm() function from the onClick attribute. This function returns true if the user clicks OK, which will open the link, otherwise it will return false.

从onClick属性调用confirm（）函数。如果用户单击“确定”，则此函数返回true，这将打开链接，否则将返回false。

<a href="http://www.link1.com" onClick="return confirm('Do you want to leave')" class="external" target="_blank"> <img src="picture1.jpg"/> </a>

Hope this helps.

希望这可以帮助。

#2

You can do it by adding a click event handler to each link. This saves having to use a classname. window.onunload will run even if the user is just trying to close your site, which you may not want.

您可以通过向每个链接添加单击事件处理程序来完成此操作。这节省了必须使用类名。 window.onunload即使用户只是想关闭您的网站也会运行，这可能是您不想要的。

   <a href="yourwebsitedomain.com">staying in site</a>
    <a href="two">going external</a>

    <script>
    var a = document.getElementsByTagName('a');
    var b = a.length;

    while(b--){
        a[b].onclick = function(){
            if(this.href.indexOf('yourwebsitedomain.com')<0){
                //They have clicked an external domain
                alert('going external');
            }
            else{
                alert('staying in your site');
            }
        };
    }
    </script>

#3

Since you're new to Javascript I advice you to use a javascript framework to do all the "heavy work" for you.

由于您是Javascript的新手，我建议您使用javascript框架为您完成所有“繁重的工作”。

For example with JQuery you can easily bind an onClick event to all external links by doing:

例如，使用JQuery，您可以通过执行以下操作轻松地将onClick事件绑定到所有外部链接：

$(".external").click(function(event) {
   var confirmation = confirmation("Are you sure you want to leave ?");
   if (!confirmation) {
     // prevents the default event for the click
     // which means that in this case it won't follow the link
     event.preventDefault();
   }
 });

This way every time a user clicks on a link with the external class, a popup message box asking for a confirmation to leave will be prompt to the user and it will only follow the link if the user says "yes". In case you want only to notify without taking any actions you can replace the confirmation by a simple alert call:

这样，每当用户点击与外部类的链接时，将向用户提示要求确认离开的弹出消息框，并且如果用户说“是”则它将仅跟随该链接。如果您只想在不采取任何操作的情况下进行通知，可以通过简单的警报呼叫替换确认：

$(".external").click(function(event) {
   alert("You are leaving the site");
 });

#4

If the user click an image,div,.. you need to look for the parent node. !There could be several elements wrapped with a-tag.

如果用户单击图像，div，..则需要查找父节点。！可能有几个元素用a-tag包装。

document.addEventListener('click',function(event){
    var eT=(event.target||event.srcElement); 

    if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
    || (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a' 
    && eT.parentNode.href.indexOf('<mydomay>')<0))
    {
    //do someting
    }

    else if(eT...){
      ...
    }
},false);

Two side notes:

两个旁注：

If you want to keep track a user by cookie or something similar, it's good practice to check external links, set a timeout and make a synchronic get request to renew.
如果您想通过cookie或类似的方式跟踪用户，最好检查外部链接，设置超时并进行续订的同步获取请求。
It's better to add the event to the document or a div containing all events and decide on target.
最好将事件添加到文档或包含所有事件的div并决定目标。

#1