网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js模拟用户点击弹出新页面

关注我吧
 2016/4/14 16:11:40 阅读次数:1445

1、前言:

相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况;我们换下思路,什么情况下的新页面弹出才不会被浏览器拦截呢?比如<a>标签这种就不会;那么我们只要模拟下用户去主动点击这个<a>标签就不会有拦截的问题了。当然并不是点击a的链接,而是点击a里面的内容才会有效果,不信你可以试试。

效果图如下:

js模拟用户点击弹出新页面

2、主要实现代码

HTML部分:

<a href="" id="linka" target="_blank" style="display:none"><span id="linkspan">test</span></a>
<input type="button" value="点我弹出新页面" onclick="targetClick()" />

js部分:(标签赋值并触发里面的span点击事件)

function targetClick() {
     $("#linka").attr("href", "http://www.86y.org");
     $("#linkspan").click();
     return false;
}

3、完整版html演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js模拟用户点击弹出新页面</title>
</head>
<body>
<a href="" id="linka" target="_blank" style="display:none"><span id="linkspan">test</span></a>
<input type="button" value="点我弹出新页面" onclick="targetClick()" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function targetClick() {
     $("#linka").attr("href", "http://www.86y.org");
     $("#linkspan").click();
     return false;
}
</script>
</body>
</html>

4、结语

OK,这下页面的弹出就畅通无阻了。

AJAX中使用些方法时要使用同步


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭