Web 前端开发 让前端飞

品一品编程 --- 1

2017-04-12  本文已影响0人  Candy程
问题描述:

淘宝首页需要实现这样一个功能,对于页面上非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)

上一篇 下一篇

猜你喜欢

热点阅读