JavaScript自动点击链接 防止绕过浏览器访问的方法


Posted in Javascript onJanuary 19, 2017

做支付宝帐号登录,需要做一个效果,就是打开链接页面的时候,不需要点击链接,直接跳到支付宝登录页面。也就是说,需要做一个自动点击链接的效果。

基本都是用这个:

<body onLoad="autoclick('auto')">

<a id='auto' href=".$url."><img border='0' src='images/alipaylog.gif' /></a>

</body>

<script type="text/javascript">


 function autoclick(){

 lnk = document.getElementById("auto");

 lnk.click();

  }

</script>

这个就IE下可以用,其它浏览器都不可以。还转得铺天盖地呢,浪费大家搜索的时间。

下面这个还比较靠谱,先看看吧:

<body onLoad="autoclick('auto')">

<a id='auto' href=".$url."><img border='0' src='images/alipaylog.gif' /></a>

</body>

<script type="text/javascript">  1: 

function autoclick(name)

{  

  if(document.all)  

  {  

    //alert(1);

     document.getElementById(name).click();  

  }  

   else  

  {  

    var evt = document.createEvent("MouseEvents");  

      evt.initEvent("click", true, true);  

    //alert(2);

    document.getElementById(name).dispatchEvent(evt);  

   }  

} 

</script>

这个在Chrome和IE下都能正常,但是在Firefox下就不能了。但总比第一个要优秀。

dispatchEvent在Firefox下是有问题的,下面是解决方案:

document.getElementById("me").onclick = function() {

  var card = document.getElementById("card");

   if(document.createEvent){

    var ev = document.createEvent('HTMLEvents');

    ev.initEvent('click', false, true);

    card.dispatchEvent(ev);

   }

   else 

     card.click();
 }

其中 card元素是绑有事件的元素。me元素是想通过点击 me元素 来调用 card的click事件的元素。。。。

问题的重点在于 firefox 的js引擎需要先创建一个事件:var ev = document.createEvent('HTMLEvents');

然后将事件指定为 click事件:ev.initEvent('click', false, true);

最后将事件付给card元素:card.dispatchEvent(ev);

card = document.getElementById('id');

var ev = document.createEvent('HTMLEvents');

ev.initEvent('click', false, true);

card.dispatchEvent(ev);

由此可见,dispatchEvent 是事件委托中的最后一步,将委托事件与调用的元素链接起来,达到调用这个元素的事件的效果。

最后推荐用 input 来实现,下面是最终解决方案:

<body onLoad="autoclick('auto2')">

 <input id="auto2" type="hidden" onClick="javascript:location.href = '<?=$url?>' " />

</body>

<script type="text/javascript">  1: 

function autoclick(name)

 {  

  if(document.all)  

  {  

    //alert(1);

     document.getElementById(name).click();  

  }  

   else  

  {  

   var evt = document.createEvent("MouseEvents");  

     evt.initEvent("click", true, true);  

    //alert(2);

    document.getElementById(name).dispatchEvent(evt);  

   }  
} 
</script>

以上这篇JavaScript自动点击链接 防止绕过浏览器访问的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 #Javascript
创建一般js对象的几种方式
Jan 19 #Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 #Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 #Javascript
快速掌握jQuery插件开发
Jan 19 #Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 #Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 #Javascript
You might like
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
初识SmartJS - AOP三剑客
2014/06/08 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
浅谈django 重载str 方法
2020/05/19 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
中层干部岗位职责
2013/12/18 职场文书
小学中秋节活动方案
2014/02/06 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Golang流模式之grpc的四种数据流
2022/04/13 Golang