• 如何模拟click事件,打开一个a标签链接?


    在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的tab页面打开一个网址的情况,最直观的想法就是通过window.open(url)的方式,打开一个新的页面,但是大部分浏览器会遭遇拦截。因为大部分现代的浏览器(泛指 Chrome / Firefox / IE 10+ / Safari)都默认开启了阻止弹出窗口的策略,原因是 window.open 被广告商滥用,严重影响用户的使用。这个阻止弹出窗口的操作,并不是直接封杀 windw.open(),而是会根据用户的行为来判断这次 window.open() 是否属于流氓操作。

    但是对用户来说,不能要求用户都来通过拦截。何况当出现拦截时,很多小白根本不知道发生了啥,不知道在哪里看被拦截的页面,百思不得其解,因此我们还是要通过代码来解决这个问题。

    方式一:jQuery来帮忙

    大部分前端开发都对jQuery比较熟悉,所以我们先以jQuery解决这个问题。jquery是提供了模拟click事件的方法的,$(selector).click()。只不过这里我们要注意的是当要触发a标签点击的时候,<a>标签内一定要有内容,并且要模拟里面的内容被点击而不是<a></a>被点击。

    jsfiddle代码地址

    方式二:HTMLElement.click()

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

    按照文档里面的介绍,HTMLElement.click()是用来模拟click的方法。这种方法的兼容性如下。

    PC

    FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
    Basic support 20[3] (Yes) 5[1] (Yes) (Yes)[2] 6[3]
    input@file (limited) (Yes) (Yes) 4 (Yes) 12.10 (Yes)
    input@file (full) (Yes) (Yes) 4 (Yes) No support (Yes)

    Mobile

    FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
    Basic support No support ? (Yes) ? ? ? ?

    jsfiddle代码地址

    方式三:createEvent + initEvent + dispatchEvent

    document.createEvent用于创建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件类型。

    initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。

    dispatchEvent则是触发对应元素上面的某个事件。

    参考自stackoverflow

    jsfiddle代码地址

    方式四:后端重定向

    这种方式需要后端协作,先提供一个接口地址,前端通过a标签跳转到该地址,后端通过运算之后,直接重定向到目标地址,这也是方便快捷的方法。

  • 相关阅读:
    分页查询+组合查询
    单点登录3
    单点登录2
    单点登录1
    sql server 语句
    jsTree动态加载数据
    sql 根据日期模糊查询&SQL Server dateTime类型 模糊查询
    快捷键
    JQUERY获取当前页面的URL信息
    C#中的?和??的用法
  • 原文地址:https://www.cnblogs.com/dahe1989/p/7275259.html
Copyright © 2020-2023  润新知