使用js 模拟input输入框登录页面

太过爱你忘了你带给我的痛 2023-07-01 03:24 9阅读 0赞

**前言:**

最经在登录第三方页面的时候,要求免密登录.但某些第三方系统的接口设置了XSRF保护.这就不能再使用java等方式后台直接调用登录接口然后重定向...

解决方式: 考虑使用嵌入在登录页面的js来,模拟用户手动输入input值,以达到免密登录的目标

相关js 如下:

**1. 主体函数**

作用: 截取GET超链接中的用户名密码信息, 将获取相关信息填写进input框中.  注意input框填写前后的class 值是否发生变化..

function load(){
    	var name,value;
       var str=location.href; //取得整个地址栏
       var num=str.indexOf("?")
       str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
    	
       var arr=str.split("&"); //各个参数放到数组里
    	var map = {};
       for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                 name=arr[i].substring(0,num);
                 value=arr[i].substr(num+1);
                 
    			map[name] = value;
            }
       }
    
    	if(JSON.stringify(map) != JSON.stringify({}) && map.hasOwnProperty('userName')){
    		keyboardInput(document.getElementById('login_username'),map['userName']);
    		keyboardInput(document.getElementById('login_password'),map['userPassword']);
    		document.getElementById('log_in').disabled=false;
    		document.getElementById('login_username').className = 'username ng-dirty ng-touched ng-valid';
    		document.getElementById('login_password').className = 'password ng-dirty ng-touched ng-valid';
    		document.getElementsByTagName('form')[1].className='login ng-touched ng-dirty ng-valid';
    		document.getElementsByTagName('form')[1].novalidate=true;
    		document.getElementsByClassName('error')[0].className ='error active visibility-hidden';
    		document.getElementById('log_in').click();
    	}
    	
    };

注解:
    //获取DOM元素对象的方式:
    //通过id 获取input输入框
    document.getElementById('log_in')
    //更改input输入框 的 clss
    document.getElementById('login_username').className = 'username ng-dirty ng-touched ng-valid';
    //通过标签名获form表单对象.并更改class..注意需使用序号指定获取的哪一个
    document.getElementsByTagName('form')[1].className='login ng-touched ng-dirty ng-valid';
    //通过id获取form表单中的button按钮,模拟用户点击提交
    document.getElementById('log_in').click();

**2. 函数2**

作用: 有些时候会遇到使用 document.getElementById().value="xxx"; 的时候,页面的输入框中显示有值,但提交按钮显示用户还未输入..这就需要下面函数了

function keyboardInput(dom, st) { 
      var evt = new InputEvent('input', {
        inputType: 'insertText',
        data: st,
        dataTransfer: null,
        isComposing: false
      });
      dom.value = st;
      dom.dispatchEvent(evt);
    };

//注释:
    
    函数入参 (dom对象,input框的值)
    
    参考资料:
    http://www.fly63.com/article/detial/5935

**3. 函数3**

作用: 当浏览器加载登录页面的html,js,css时,会出现页面的DOM元素对象还未加载完,但上面的js函数就开始执行了...这时可能会出现获取DOM元素对象时报错...解决方式:加一个检测,判断页面的DOM是否全加载完成, 加载完成了才执行上面的js函数

window.onload=initLogin;
    //  声明定时器
    var timer = null;
    function initLogin(){
    	//setTimeout(load,5000);
    	let dom = document.getElementById("login_username");
        if(dom) {
             //  执行dom加载完成后的操作，例如echart的初始化操作
            echart.init('login_username');
            //  清除定时器
            if(!timer) {
                clearTimeout(timer);
            }
        } else {
            //  自我调用
            timer = setTimeout(load, 100);
        }
    };

注释:
    参考网址:
    https://blog.csdn.net/yiifaa/article/details/75040858

**最后献上完整的代码:**

<script type="text/javascript">
    window.onload=initLogin;
    //  声明定时器
    var timer = null;
    function initLogin(){
    	//setTimeout(load,5000);
    	let dom = document.getElementById("login_username");
        if(dom) {
             //  执行dom加载完成后的操作，例如echart的初始化操作
            echart.init('login_username');
            //  清除定时器
            if(!timer) {
                clearTimeout(timer);
            }
        } else {
            //  自我调用
            timer = setTimeout(load, 100);
        }
    	};
    
    function load(){
    	var name,value;
       var str=location.href; //取得整个地址栏
       var num=str.indexOf("?")
       str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
    	
       var arr=str.split("&"); //各个参数放到数组里
    	var map = {};
       for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                 name=arr[i].substring(0,num);
                 value=arr[i].substr(num+1);
                 
    			map[name] = value;
            }
       }
    
    	if(JSON.stringify(map) != JSON.stringify({}) && map.hasOwnProperty('userName')){
    		keyboardInput(document.getElementById('login_username'),map['userName']);
    		keyboardInput(document.getElementById('login_password'),map['userPassword']);
    		document.getElementById('log_in').disabled=false;
    		document.getElementById('login_username').className = 'username ng-dirty ng-touched ng-valid';
    		document.getElementById('login_password').className = 'password ng-dirty ng-touched ng-valid';
    		document.getElementsByTagName('form')[1].className='login ng-touched ng-dirty ng-valid';
    		document.getElementsByTagName('form')[1].novalidate=true;
    		document.getElementsByClassName('error')[0].className ='error active visibility-hidden';
    		document.getElementById('log_in').click();
    	}
    	
    };
    
    function keyboardInput(dom, st) { 
      var evt = new InputEvent('input', {
        inputType: 'insertText',
        data: st,
        dataTransfer: null,
        isComposing: false
      });
      dom.value = st;
      dom.dispatchEvent(evt);
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 input框只能输入整数

input type="text" name="number" id="number" value="" οnkeypress="click(event)" class...

痛定思痛。/ 2024年04月19日 14:53/ 0 赞/ 101 阅读

相关文本输入框＜input＞

(1)创建文本输入框文本输入框是获取用户输入的一种方便的方法。 `<input>` 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种

小咪咪/ 2024年03月29日 15:46/ 0 赞/ 138 阅读

相关 Input Text关键字——模拟向一个输入框中输入文字内容

Input Text关键字：模拟向一个输入框中输入文字内容。该关键字接受2个参数 \[ locator | text \]：locator参数指的是定位界面元素的方式，te

分手后的思念是犯贱/ 2023年10月02日 08:30/ 0 赞/ 17 阅读

相关使用js 模拟input输入框登录页面

前言: 最经在登录第三方页面的时候,要求免密登录.但某些第三方系统的接口设置了XSRF保护.这就不能再使用java等方式后台直接调用登录接口然后重定向... 解决方式

太过爱你忘了你带给我的痛/ 2023年07月01日 03:24/ 0 赞/ 10 阅读

相关 js input输入框校验

只能输入英文 <input type="text" οnkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文

比眉伴天荒/ 2022年10月01日 07:55/ 0 赞/ 244 阅读

相关输入框input

input输入框在ie下高度显示不正常，并且里面的文字内容不居中显示解决方法：可以具体看百度首页这里简单说下： <span> <i

深藏阁楼爱情的钟/ 2022年07月16日 01:47/ 0 赞/ 355 阅读

相关 Form-input输入框

1、基本使用 v-model：绑定的值，string / number size：指定输入框的尺寸，除了默认的medium大小外，还提供了 large、small 和 mi

你的名字/ 2022年03月31日 19:11/ 0 赞/ 492 阅读

相关 input输入框只能输入数字

<input type="number" class="input-control input-l" id="oldcard" oninput = "value=val

骑猪看日落/ 2022年02月01日 13:09/ 0 赞/ 442 阅读

相关 input 输入框限制

只能输入数字和一个小数点转自： https://www.jianshu.com/p/c26bfb0dfd8d <label> 　　<input id="t

红太狼/ 2021年12月23日 00:23/ 0 赞/ 443 阅读

相关原生js获取input输入框的值

<input type="text" name="" id="name" value="" placeholder="请输入姓名" /> var name =

比眉伴天荒/ 2021年07月24日 13:11/ 0 赞/ 809 阅读