网页劫持实现访问外站是否提示

最新推荐文章于 2025-01-25 11:52:42 发布

高山我梦口香糖

最新推荐文章于 2025-01-25 11:52:42 发布

阅读量442

点赞数

分类专栏：技术文章标签： servlet java html

本文链接：https://blog.youkuaiyun.com/Madman528/article/details/127164625

版权

技术专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种在网页中实现对外部链接跳转前进行确认的方法。通过使用JavaScript阻止默认跳转行为，并检查目标链接的origin属性来判断是否为外部链接。如果是外部链接，则弹出确认框让用户决定是否继续跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常看到这样的情况,在酷安或者贴吧或者别的网站访问外站链接时,会提醒你是否跳转,这个咋做的?

分为两步:

1.对a标签进阻止默认跳转

2.判断origin是否一样

有以下html代码

<div class="test">
    <a href="https://www.baidu.com/?name=12">百度</a>
    <a href="1.html">百度</a>
    <a href="http://127.0.0.1:5500/1.html">百度</a>
    <a href="https://www.w3school.com.cn/js/js_htmldom_document.asp">百度</a>
</div>

我当前的url是

http://127.0.0.1:5500/实现跳转.html

很明显,对于当前域名来说, 第一和第4才是外站的链接,2和3能够直接跳转,可是怎么判断呢?

可以通过location.origin进行判断

1.先对a标签添加点击事件,这里我用到了事件委托

我们先点击挨个点击打印看看他们的origin吧

<script>
    let test = document.getElementsByClassName('test')[0]
    console.log('当前域名', location.origin);
    test.addEventListener('click', (e) => {
      e.preventDefault();
      console.log(e.target.origin);     

    })
  </script>

这就简单了,只需要判断新旧的origin是不是一样就好了

完整代码

<script>
    let test = document.getElementsByClassName('test')[0]
    console.log('当前域名', location.origin);
    test.addEventListener('click', (e) => {
      e.preventDefault();
      //思路:阻止跳转再判断是否和当前的origin是否相同

      let current = location.origin
      let new_ = e.target.origin
      if (current === new_) {//如过新链接和当前同域名
        location.href = e.target.href//跳转
      }
      else {//如果不同,先询问是否跳转
        let yes = confirm(`当前点击属于外站,是否访问${e.target.href}`)
        if (yes) {
          location.href = e.target.href
        }
      }    

    })
  </script>

效果展示,点击外站链接就弹窗询问