跨域表单提交状态的变相判断代码

拐个弯想，如果开始可以获得iframe内部页面信息，那么不能获得的时候，不就说明表单已经提交了么~
我们发现百度的竞价右下角信息，也是采用的这种方法判断的，大家可以参考下。
示例：

test.html:


代码如下:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body style="background:#a7a7a7;">
<iframe id="testiframe" name="testiframe"></iframe>
<form method="post" action="http://www.test.com/testaction.php" target="testiframe" name="testform">
<input type="text" name="dddd"><input type="submit" value="ddd" name="submitbtn"/>
</form>
</body>
<script>
document.testform.onsubmit = function () {
document.testform.submitbtn.disabled = true;
submitMonitor();

}
function submitMonitor () {
try{
var hash = document.getElementById('testiframe').contentWindow.location.hash;
setTimeout(submitMonitor,100);
} catch (e) {
document.getElementById('testiframe').src = "about:blank";
document.testform.submitbtn.disabled = false;
}
}
</script>
</html>

注意下面的代码是跨域的，不是在一个域名下的
testaction.php


代码如下:

<?php
sleep(5);
echo $_POST['dddd'];
?>

弊端：
这个弊端还很明显，如果是404，403，500等错误，也会误认为是成功提交。
所以，请注意：此方法属研究，开拓思维用。
这段是百度的判断代码


代码如下:

var sfMessTimes;
function sfMessSubmitMonitor () {
try{
var hash = sf_mess_lib.getElement(SF_MESS_FRAME_ID).contentWindow.location.hash;
        sfMessTimes ++;
        if (sfMessTimes > 50) {
            alert(sf_mess_msg.fail);
            sf_mess_lib.getElement(SF_MESS_SUBMIT_ID).disabled = false;
            for (var i = 0, l = sf_mess_cols.length; i < l; i++) {
                document.getElementById(SF_MESS_PREFIX + sf_mess_cols[i].idname).disabled = false;
            }
        } else {
            setTimeout(sfMessSubmitMonitor,100);
        }
} catch (e) {
sf_mess_lib.getElement(SF_MESS_FRAME_ID).src = "about:blank";
        alert(sf_mess_msg.success);
sf_mess_lib.getElement(SF_MESS_SUBMIT_ID).disabled = false;
        for (var i = 0, l = sf_mess_cols.length; i < l; i++) {
            var inputCfg = sf_mess_cols[i];
            var inputEl = document.getElementById(SF_MESS_PREFIX + inputCfg.idname);
            inputEl.disabled = false;
            inputEl.value = filtInnertip(inputCfg.innertip);
        }
}
}

赞 (0)

相关推荐

  • 跨域表单提交状态的变相判断代码

    拐个弯想,如果开始可以获得iframe内部页面信息,那么不能获得的时候,不就说明表单已经提交了么~ 我们发现百度的竞价右下角信息,也是采用的这种方法判断的,大家可以参考下.示例: test.html: 复制代码 代码如下: <html> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head> <body s

  • layui的表单验证支持ajax判断用户名是否重复的实例

    如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. html: <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block&q

  • vue动态绑定组件子父组件多表单验证功能的实现代码

    vue动态绑定组件子父组件多表单验证功能的实现代码

    前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护. Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过. 如图: selects文件夹中,index只负责公共数据(当然公共数据也可以写在其他文件,只留一个入口文件),而comp文件夹中的几个组件则通过动态加载. 动态加载子组件:component // 给下拉框绑定下拉列表的索引 <el-select v-model="v

  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

  • Ajax提交表单并接收json实例代码

    需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.bootcss.com

  • jquery实现表单获取短信验证码代码

    jquery实现表单获取短信验证码代码

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery表单获取短信验证码代码</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script&g

  • validationEngine 表单验证插件使用实例代码

    validationEngine 表单验证插件使用实例代码

    先给大家展示下效果图,如果大家感觉不错,请参考实现代码: 废话少说,直接上代码,可拷贝直接运行: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  • vue+vue-validator 表单验证功能的实现代码

    官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能,具体代码如下所示: 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • Springboot 实现跨域访问无需使用jsonp的实现代码

    Springboot 实现跨域访问 无需使用jsonp 在springboot的拦截器中添加respone的头信息即可 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //String origin = (String) request.getRemoteHost()+":"+re

  • Vee-validate 父组件获取子组件表单校验结果的实例代码

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式.而且支持 40 多种语言,对本地化.多语言支持非常友好. 国内饿了么团队开源项目 Element UI 就用到了 vee-validate. vee-validate官网:https://baianat.github.io/vee-validate/ 使用方法 可查看

随机推荐