本文介绍两种在网页中模拟点击广告的技术方案。第一种通过创建不可见的 iframe 和锚点元素,利用 JS 动态设置 href 并触发 click 事件,实现页面跳转加载。第二种采用 Ajax 异步请求广告 URL,避免页面刷新和加载延迟,提供更流畅的用户体验。文章同时提供了跨浏览器兼容性及跨域限制的注意事项。
基于隐藏 iframe 的模拟点击方案
具体实现代码如下:
首先,我们需要在页面中创建一个不可见的 iframe,并将其 ID 命名为 framelink。
<iframe id="framelink" name="framelink" frameBorder="0" scrolling="no" width="0" height="0"></iframe>
接着,创建一个带有 ID 为 myLink 的锚点元素(链接)。
<a id='myLink' target="framelink"></a>
编写 JavaScript 代码,用于模拟点击上述 ID 为 myLink 的锚点,并配置相关属性。
<SCRIPT language=JavaScript type=text/javascript>
<!--
var GoUrl = "http://www.test.com"; // 此处指定需要模拟点击的目标网站地址。
// 若需支持多个站点的模拟点击,可将 GoUrl 定义为数组,并遍历执行后续操作。
var myLink = document.getElementById("myLink"); // 获取 ID 为 myLink 的元素对象
myLink.href = GoUrl; // 将目标 URL 赋值给 myLink 的 href 属性
myLink.click(); // 触发 myLink 的点击事件
-->
</SCRIPT> 上述代码会导致 iframe 加载广告页面。若页面内容较大,加载速度可能会显著变慢。
可以使用 Ajax 来实现无刷新加载。基于 Ajax 的异步加载方案
另一种实现方式代码如下:
window.onload=function(){
...
var url="www.example.com/thiurl"; // 定义广告的 URL 地址
xmlHttp.open("GET",url,true); // 使用异步传输方式,确保用户无感知延迟。
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readystate==4&&xmlHttp.status==200){
// 响应完成后关闭连接。
xmlHttp.close();
}
}
...
} 此处仅提供一种思路,可能存在更优方案。(注意:若涉及跨域请求,此方法将无法操作)
1. Firefox 浏览器:
var doc = document.getElementById('myiframe').contentWindow.document;
随后通过 doc.getElementById 获取元素。
2. IE 浏览器:
var doc = document.getElementById("myiframe").document;
随后通过 doc.getElementById("iframeTitle") 获取元素。
注意:若涉及跨域请求,此方法将无法操作。
该段代码的逻辑是:页面加载完成后,根据 className="touPiao" 读取需模拟点击的 URL。若 URL 为 #,则代表当前页面。
我们也可以设置如下代码:<a href="www.javaeye.com" onclick="showModify(this)" class="touPiao">我要投票1111</a>
程序随后通过 for 循环(for(var el in els))依次读取并模拟点击所有获取到的 URL。
最后会打开一个包含 URL 的页面,我们可以添加一个空的 iframe。
例如:<iframe id="framelink" name="framelink" frameBorder="0" scrolling="no" width="0" height="0"></iframe>
并修改链接为:<a href="www.jb51.net" onclick="showModify(this)" class="touPiao" target="framelink">我要投票1111</a>
这样即实现了页面加载后自动模拟点击的效果。