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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php递归函数怎么用才有效
2018/02/24 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
Numpy之random函数使用学习
2019/01/29 Python
python将字符串转换成json的方法小结
2019/07/09 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Django框架请求生命周期实现原理
2020/11/13 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
Ref与out有什么不同
2012/11/24 面试题
管理科学大学生求职信
2013/11/13 职场文书
单位绩效考核方案
2014/05/11 职场文书
公司离职证明标准格式
2014/11/18 职场文书
何玥事迹观后感
2015/06/16 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL