品一品编程 --- 1

作者: Candy程 | 来源:发表于2017-04-12 14:08 被阅读0次
    问题描述:

    淘宝首页需要实现这样一个功能,对于页面上非taobao.com域名下的链接,在用户点击时,需要在链接处弹出提示框,提示用户此链接非淘宝域名下的链接,并给与用户选择是否继续访问。如果用户确认继续访问,则在新窗口打开链接。请写出相应的代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>品一品编程-1</title>
    </head>
    <body>
        <a href="https://www.taobao.com">https://www.taobao.com<br/></a>
        <a href="https://www.taobao.com/?spm=a218k.m3dyt3534.1581860521.1.6jNnlE">https://www.taobao.com/?spm=a218k.m3dyt3534.1581860521.1.6jNnlE<br/></a>
        <a href="https://www.tmall.com">https://www.tmall.com<br/></a>
        <script>
            /*补充完整程序*/
        </script>
    </body>
    </html>
    

    程序如下:

    <script>
            /*补充完整程序*/
            (function() {
                var obj = document.body
                var reg = new RegExp('https://www.taobao.com')
                obj.onclick = function(ev) { //事件委托
                    var ev = ev || window.ev //兼容ie
                    var target = ev.target || ev.srcElement
                    if(target.nodeName.toLowerCase() === 'a') {
                        var href = target.href
                        if(reg.test(href)) {
                            return
                        }
                        else {
                            ev.preventDefault() //阻止a标签的默认跳转
                            if(window.confirm(href + ':非淘宝域名下的链接,是否继续访问?')) {
                                location.href = href
                            }
                            else {
    
                            }
                        }
                    }
                }
            })()
        </script>
    

    执行效果如下:
    ![0C@3XVL7~M_54O]}D`R]VMD.png](https://img.haomeiwen.com/i5319840/076ae99416dbe43a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    相关文章

      网友评论

        本文标题:品一品编程 --- 1

        本文链接:https://www.haomeiwen.com/subject/hulmattx.html