20150623 javascript实现的简单刷贴
来源:互联网 发布:域名商 编辑:程序博客网 时间:2024/06/06 06:34
最近简单地尝试用Javascript写了一个刷贴的脚本,原理就是Javascript注入,对表单的DOM对象进行操作,比较简单,这里姑且做个记录。
选定与分析目标
为了演示,这里随便选了个看上去比较简单的目标。
这里贴一下目标表单的代码,为避免暴露原网站信息,源代码的一些地方做了处理:
<form enctype="multipart/form-data" method="post" action="提交的网址" name="PostForm" style="margin:0px;" id="PostForm"> <input type="hidden" value="false" name="treeView"> <input type="hidden" value="0" name="treeValue"> <input type="hidden" value="true" name="canAddThread"> <input type="hidden" value="true" name="canAddVote"> <input type="hidden" value="" name="returnUrl"> <!-- 帖子ID --> <input type="hidden" value="0" name="id" id="post.id"> <!-- 版块ID --> <input type="hidden" value="5" name="post.boardId" id="post.boardId"> <!-- 被回复帖ID --> <input type="hidden" value="7616062" name="post.parentId" id="post.parentId"> <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff"> <tbody><tr> <td class="line-box-write"><table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="box-write-title">标题: <!-- 表情 --> <select name="post.emotionId"> <option value="0">-- 选择表情 --</option> <option value="1">大笑</option> <option value="2">微笑</option> <option value="3">郁闷</option> <option value="4">惊叹</option> <option value="5">愤怒</option> <option value="6">邪恶</option> <option value="7">呆立</option> <option value="8">无语</option> <option value="9">摆帅</option> <option value="10">陶醉</option> <option value="11">注意</option> <option value="12">疑问</option> <option value="13">生气</option> <option value="14">快乐</option> <option value="15">害羞</option> <option value="16">悲伤</option> <option value="17">思索</option> <option value="18">眨眼</option> </select> <!-- 标题 --> <input type="text" class="style-input1" onmouseover="change()" size="11" value="游客可留言,发帖最多500字" name="post.titleText" onkeydown="doSubmitByEnter(event);" id="post_title"> <!-- 主贴是否为原创 --> </td> </tr> </tbody></table> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="box-write-content"><table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="box-write-content2"> <!-- 帖子输入域 --> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td align="left" style="padding: 10px 6px 10px 4px;" class="font-blow"> <span id="tip_txt">正文区</span> </td> </tr> <tr> <td> <div style="padding:10px" id="txt_edit"> <div style="display:none;" id="txtId">post.contentText</div> <script> var textName = "post.contentText"; </script> <!-- 输入域 --> <textarea onfocus="GetActiveText(this.id);" onclick="GetActiveText(this.id);" onchange="GetActiveText(this.id);" style="height:236px;" class="style-input2" name="post.contentText" id="post.contentText"></textarea> <!-- 编辑显示文章内容 --> </div> <div style="display:none;padding:2px 0px 0px 2px;text-align:left;height:239px;overflow:scroll;" id="txt_view"> </div> </td> </tr> </tbody></table> </td> <td width="1" class="box-write-content3"> <table width="236" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="box-tools1"> <span id="tip_txt">功能区</span> </td> </tr> <tr> <td class="box-tools2"><table width="100%" cellspacing="5" cellpadding="0" border="0" id="funcTable"> <tbody><tr> <td><img height="22" width="26" alt="粗体" src="/images/mummy_edit/icons/tools1.gif"></td> <td><img height="22" width="26" alt="斜体" src="/images/mummy_edit/icons/tools2.gif"></td> <td><img height="22" width="26" alt="下划线" src="/images/mummy_edit/icons/tools3.gif"></td> <td><img height="22" width="26" alt="删除线" src="/images/mummy_edit/icons/tools4.gif"></td> <td><img height="22" width="26" alt="背景色" src="/images/mummy_edit/icons/tools5.gif"></td> </tr> <tr> <td><img height="22" width="26" alt="插入图像" src="/images/mummy_edit/icons/tools6.gif"></td> <td><img height="22" width="26" alt="插入Flash" src="/images/mummy_edit/icons/tools7.gif"></td> <td><img height="22" width="26" alt="插入多媒体" src="/images/mummy_edit/icons/tools8.gif"></td> <td><img height="22" width="26" alt="插入声音文件" src="/images/mummy_edit/icons/tools9.gif"></td> <td><img height="22" width="26" alt="插入http链接" src="/images/mummy_edit/icons/tools10.gif"></td> </tr> </tbody></table> <table width="100%" cellspacing="5" cellpadding="0" border="0" id="fontTable"> <tbody><tr align="left"> <td colspan="2"> <select name="seFontFamily" id="seFontFamily"> <option selected="">- 字体 -</option> <option value="宋体">宋体</option> <option value="楷体_GB2312">楷体</option> </select></td> </tr> <tr> <td align="left"> <select name="seFontSize" id="seFontSize"> <option selected="">- 字号 -</option> <option value="24px">大</option> <option value="18px">中</option> <option value="12px">小</option> </select> </td> </tr> <tr> <td><select name="seFontColor" id="seFontColor"> <option selected="">- 颜色 -</option> <option value="#FF0000">红色</option> <option value="#0000FF">蓝色</option> <option value="#00FF00">绿色</option> <option value="#FFFF00">黄色</option> <option value="#660099">紫色</option> <option value="#000000">黑色</option> </select></td> </tr> </tbody></table></td> </tr> </tbody></table> <table width="236" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="box-tools1"> <span id="tip_txt">表情区</span> </td> </tr> <tr> <td class="box-tools2"><table width="100%" cellspacing="5" cellpadding="0" border="0" id="faceTable"> <tbody><tr> <td><div><img height="15" width="15" alt="大笑" src="/images/mummy_edit/faces/face1.gif"></div></td> <td><div><img height="15" width="15" alt="微笑" src="/images/mummy_edit/faces/face2.gif"></div></td> <td><div><img height="15" width="15" alt="郁闷" src="/images/mummy_edit/faces/face3.gif"></div></td> <td><div><img height="15" width="15" alt="惊叹" src="/images/mummy_edit/faces/face4.gif"></div></td> <td><div><img height="15" width="15" alt="愤怒" src="/images/mummy_edit/faces/face5.gif"></div></td> <td><div><img height="15" width="15" alt="邪恶" src="/images/mummy_edit/faces/face6.gif"></div></td> </tr> <tr> <td><div><img height="15" width="15" alt="呆立" src="/images/mummy_edit/faces/face7.gif"></div></td> <td><div><img height="15" width="15" alt="无语" src="/images/mummy_edit/faces/face8.gif"></div></td> <td><div><img height="15" width="15" alt="摆帅" src="/images/mummy_edit/faces/face9.gif"></div></td> <td><div><img height="15" width="15" alt="陶醉" src="/images/mummy_edit/faces/face10.gif"></div></td> <td><div><img height="15" width="15" alt="注意" src="/images/mummy_edit/faces/face11.gif"></div></td> <td><div><img height="15" width="15" alt="疑问" src="/images/mummy_edit/faces/face12.gif"></div></td> </tr> <tr> <td><div><img height="15" width="15" alt="生气" src="/images/mummy_edit/faces/face13.gif"></div></td> <td><div><img height="15" width="15" alt="快乐" src="/images/mummy_edit/faces/face14.gif"></div></td> <td><div><img height="15" width="15" alt="害羞" src="/images/mummy_edit/faces/face15.gif"></div></td> <td><div><img height="15" width="15" alt="悲伤" src="/images/mummy_edit/faces/face16.gif"></div></td> <td><div><img height="15" width="15" alt="思索" src="/images/mummy_edit/faces/face17.gif"></div></td> <td><div><img height="15" width="15" alt="眨眼" src="/images/mummy_edit/faces/face18.gif"></div></td> </tr> </tbody></table></td> </tr> </tbody></table> </td> </tr> <tr> <td align="left"> <br> <input type="checkbox" id="auto_save" name="auto_save"> <label for="auto_save">保存内容(若提交失败,标题、内容不丢失)</label> <input type="checkbox" id="view_mode" name="view_mode" onclick="javascript:doPreview(this);"> <label for="view_mode">预览</label> </td> </tr> </tbody></table></td> </tr> </tbody></table> <!-- 投票部分 --> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <!-- 附件处理 --> <tbody><tr> <td class="box-upload1"><table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td nowrap=""><span class="font-blod">上传:</span> <!-- 附件 --> <input type="file" name="attachmentFile" id="post_file" style="width:80%" class="style-input1"> </td> <td align="left" width="440" nowrap=""><span class="red">(图片请小于<span style="color:#ff0000;">5120k</span>,音视频请小于<span style="color:#ff0000;">5120k</span>,flash请小于<span style="color:#ff0000;">5120k</span>)</span></td> </tr> </tbody></table> </td> </tr> <!-- 是否保存当前格式 --> <tr> <td class="box-upload1"><span class="font-blod">提交格式:</span> <input type="radio" value="false" name="post.autowrap">保持当前的换行状况 <input type="radio" checked="" value="true" name="post.autowrap">自动换行 <script> var abname = "post.autowrap"; </script> <span class="font-blod">回复通知:</span> <!-- 是否回复通知 --> <input type="radio" checked="" value="0" name="post.notifyType">不通知 <input type="radio" value="2" name="post.notifyType">通过论坛消息 <input type="radio" value="1" name="post.notifyType">通过注册邮件 <script> var nttname = "post.notifyType"; </script> </td> </tr> <input type="hidden" name="username"> <input type="hidden" name="password"> <tr> <td class="box-confirm1">在参加略之前,请您务必仔细阅读并同意<a class="link-orange" href="javascript:changeClauseView();">相关条款</a>。</td> </tr> <tr> <td class="box-confirm2" style="display:none;" id="clause_td"> 略 </td> </tr> <tr> <td align="center" style="text-align: center;vertical-align: middle;" class="box-confirm3"> <span><input type="button" value="提交" onclick="doSubmit();"></span> <span><input type="button" value="重置" onclick="document.PostForm.reset();"></span> </td> </tr> </tbody></table> </td> </tr> </tbody></table></form>
上面很长一段代码,但对于我们这个简单的刷贴脚本来说,只需要实现填写回帖标题(神他妈回个贴还要写标题)和回帖内容(纯文字,如果需要填图片等可在这个的基础上添加DOM对象就可以了),然后点击提交按钮,回帖就可以了。所以我们关注的也就只有以下代码。
<form enctype="multipart/form-data" method="post" action="提交的网址" name="PostForm" style="margin:0px;" id="PostForm">...<input type="text" class="style-input1" onmouseover="change()" size="11" value="游客可留言,发帖最多500字" name="post.titleText" onkeydown="doSubmitByEnter(event);" id="post_title">...<textarea onfocus="GetActiveText(this.id);" onclick="GetActiveText(this.id);" onchange="GetActiveText(this.id);" style="height:236px;" class="style-input2" name="post.contentText" id="post.contentText"></textarea>...<span><input type="button" value="提交" onclick="doSubmit();"></span>...</form>
这个表单<form>标签的id是PostForm,标题编辑的<input>标签id为post_title,回帖内容的<textarea>标签id是post.contentText。Javascript脚本刷贴的一般思路就是操作表单的DOM对象,进行回帖内容的填写与提交按钮的点击(“一般思路”是我自己乱写的),最后再加上个循环执行。在分析完目标表单结构后,我们就可以开始编写脚本了。
回帖功能实现
我们首先进行回帖功能的实现,基本代码只有下面四行。
var title = document.getElementById('post_title'); // 获得回帖标题的DOM对象title.value = '回帖标题';var text = document.getElementById('post.contentText'); // 获得回帖内容的DOM对象text.value = '回帖内容';
这里如何填写回帖标题和回帖内容,是根据具体网站的不同而有差异的(和回帖编辑器的脚本相关),有些网站,是直接修改innerHTML属性。
然后是实现提交按钮的点击,在这里只需要获取到提交按钮的DOM对象,执行click()方法就可以了。但可以发现网站的脚本中,提交按钮并没有设置id。但可以使用一些唯一性的特征,曲线获得按钮的DOM对象,例如这里,我们首先获取整个页面的所有标签的DOM对象,然后检查各自的value属性,选择value属性为“提交”的DOM对象。
// 搜寻“提交按钮”var elems = document.getElementsByTagName('input'); // 获取所有<input>对象// 搜寻value属性为“提交”的<input>对象for (i = 0; j = elems[i]; i++) { if (j.value == '提交') { var submit = j; }}
这样提交按钮的点击也只是执行一下click()方法就可以了:
submit.click()
大致的回帖功能完成了,汇总代码如下:
var title = document.getElementById('post_title'); // 获得回帖标题的DOM对象title.value = '回帖标题';var text = document.getElementById('post.contentText'); // 获得回帖内容的DOM对象text.value = '回帖内容';// 搜寻“提交按钮”var elems = document.getElementsByTagName('input'); // 获取所有<input>对象// 搜寻value属性为“提交”的<input>对象for (i = 0; j = elems[i]; i++) { if (j.value == '提交') { var submit = j; }}submit.click();
在IE、Firefox或者chrome等浏览器中,按F12打开开发者工具,将上面的代码粘贴到控制台的脚本编辑区域中,点击运行,回帖应该是可以成功的,但是会发现,点击提交按钮之后,页面跳转了:
禁止提交跳转
跳转的原因是因为表单提交的默认行为就是跳转到表单提交的页面,然而当页面进行跳转后,控制台中执行脚本的行为也会停止。为了让脚本不会停止(虽然现在还没有加循环执行),需要让表单提交后,页面不会跳转。简单的思路就是修改表单<form>的target属性,将它设置为页面中的一个框架的id,这样再提交表单后,只会在该框架内显示跳转后的页面。为此首先需要给页面增加一个<iframe>标签。
var newframe = document.createElement('iframe'); // 创建一个iframe的DOM对象newframe.id = 'newframe'; // 设置iframe的id属性newframe.name = 'newframe'; // 设置iframe的name属性newframe.style = 'display:hidden'; // 隐藏该iframe标签document.body.appendChild(newframe); // 将iframe标签添加到body的末尾
然后修改表单的target属性修改为’newframe’。
var form = document.getElementById('PostForm'); // 获得表单的DOM对象form.target = 'newframe'; // 设置表单的target属性为新添加的iframe标签
这样在提交按钮点击后,页面也不会跳转了,这样确保了脚本在控制台中可以循环反复地进行。
循环回帖
为了实现“刷”的功能,需要再添加上一个循环。这个功能可以使用循环语句,或者setTimeout()、setInterval()等函数实现,这里就不详细说明了。最后一个简单的刷贴框架如下。
var newframe = document.createElement('iframe'); // 创建一个iframe的DOM对象newframe.id = 'newframe'; // 设置iframe的id属性newframe.name = 'newframe'; // 设置iframe的name属性newframe.style = 'display:hidden'; // 隐藏该iframe标签document.body.appendChild(newframe); // 将iframe标签添加到body的末尾var form = document.getElementById('PostForm'); // 获得表单的DOM对象form.target = 'newframe'; // 设置表单的target属性为新添加的iframe标签var title = document.getElementById('post_title'); // 获得回帖标题的DOM对象var text = document.getElementById('post.contentText'); // 获得回帖内容的DOM对象// 搜寻“提交按钮”var elems = document.getElementsByTagName('input'); // 获取所有<input>对象// 搜寻value属性为“提交”的<input>对象for (i = 0; j = elems[i]; i++) { if (j.value == '提交') { var submit = j; }}var titlearray = array(回帖标题数组);var textarray = array(回帖内容数组);var index = 0;// 自动回帖函数function autoreply(){ title.value = titlearray[index%titlearray.length]; text.value = textarray[index%textarray.length]; submit.click(); index++; // 每5秒执行一次 setTimeout('autoreply()', 5000);}autoreply();
瞎写写
下面是一个以泊松过程发贴的时间生成函数
// lambda: 泊松过程的参数lambda// maxint: 允许的最大回帖间隔// minint: 允许的最小回帖间隔function possionint(lambda, maxint, minint){ do{ var r = Math.random(); } while(r == 0 || r == 1) intval = Math.ceil(-(1/lambda)*Math.log(1 - r)); if(intval < minint){ return minint; } else if(intval > maxint){ return maxint; } else { return intval; }}
- 20150623 javascript实现的简单刷贴
- javascript实现的简单计算器
- JavaScript实现简单的Map
- JavaScript实现简单的时钟
- javascript实现的简单计算器
- javascript中伪哈希表的简单实现!
- javascript实现简单的Map
- javascript实现简单的走马灯
- javascript简单计算器的实现
- javascript实现简单的计算器
- javascript实现的简单计算器
- JavaScript实现简单的计算器
- Javascript Lambda的简单实现
- JavaScript实现的简单的计算器
- JavaScript实现的简单的点名代码
- javascript实现的简单的计算器
- JavaScript 实现的简单汉诺塔程序
- 使用Javascript实现简单的Map
- 关于使用 MongoDB Connector for Hadoop 的经验和教训
- 18-m-4Sum
- 【leetcode c++】38 Count and Say
- android adt 最新下载地址23.03
- 回归.Net
- 20150623 javascript实现的简单刷贴
- Fire Game
- 在linux下,解决不能输入也不能退出的问题
- 【软件测试】2、软件测试的概念和基本原则
- JavaSE笔记之<final关键字>
- Intent的Component,Action和Category属性详解-android学习之旅(五十)
- Mysql常用操作
- hdu 1020 Encoding
- 【leetcode c++】58 Length of Last Word