javascript – 使用Tampermonkey在AngularJS网站上自动提交表单？

我正在尝试在我没有源代码的网站上自动化某些表单条目.找到适当的字段并用j填充它们并以编程方式提交表单是一项非常简单的任务.但是该网站是在Angular中构建的,当单击表单提交时,输出字段的所有验证标志都会弹出,就像没有填写任何字段一样.

浏览了几篇其他帖子,我发现我需要以某种方式将变量设置在范围内,如下所示：

$scope.$apply(function() {
    $scope.fieldName = varname;
});

或者将字段设置为脏,如下所示：

$scope.fieldname.$dirty = true;

遗憾的是,无法访问代码,我不确定范围可能是什么,或者如何恰当地告诉Angular表单上的字段已经过编程更新.

编辑

我使用Roblox作为此错误的示例.
网站上的不同表单(例如注册表单(以及登录后面的表单))对它们进行了验证,这会引发我提到的错误.

这是我尝试使用与注册脚本上的登录脚本相同的逻辑的示例：

// ==UserScript==
// @name         Roblox Account Create
// @namespace    http://roblox.com/
// @version      0.1
// @description  Create Roblox Account
// @author       You
// @match        https://www.roblox.com/
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

var _adj        = [ 'Cool','Masked','Bloody','Lame' ];
var _animals    = [ 'Hamster','Moose','Lama','Duck' ];
var _months     = [ 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ];

var _username   = _adj[ parseInt( Math.random( ) * _adj.length ) ],_pass = Math.random( ).toString( 36 ).substring( 2,10 );
_username       += _animals[ parseInt( Math.random( ) * _animals.length ) ];
_username       += parseInt( Math.random( ) * 1000 );

var _dt_month   = _months[ Math.floor( Math.random( ) * ( 12 ) + 0 ) ];
var _dt_day     = Math.floor( Math.random( ) * ( 28 ) + 1 );
var _dt_year    = Math.floor( Math.random( ) * ( 2005 - 1916 + 1 ) + 1916 );

$( '#Username' ).val( _username );

$( '#Password' ).val( _pass );
$( '#PasswordConfirm' ).val( _pass );
$( '#MonthDropdown' ).val( _dt_month );
$( '#DayDropdown' ).val( _dt_day );
$( '#YearDropdown' ).val( _dt_year );

$( '#FemaleButton' ).click( );
$( '#SignupButton' ).click( );

我尝试在更改值后将输入和更改事件添加到我的调用中,但是将更新更新为我添加到输入字段的值没有任何变化.例如：

$( '#Username' ).val( _username ).trigger( 'input' ); // Also .trigger( 'change' )

您可以通过将这些脚本添加到Tampermonkey并导航到ssl roblox homepage来测试这两个脚本.

解决方法

关键点在于Angular代码(和类似的JS)使用change事件来触发它们的验证器.所以,仅仅设置值是不够的;您还必须发送更改事件.

所以：

>设置值.
>发送更改活动.对于Greasemonkey / Tampermonkey脚本,您必须注意此部分的沙箱和jQuery冲突.
从未注入的用户脚本中使用jQuery .change()或.trigger()很少有效.发送适当的变更事件;见下文.
>既然@required jQuery(好),但是使用@grant none(坏),你的脚本导致页面崩溃,你会在控制台中看到各种错误.
>脚本具有竞争条件,并且在输入准备好之前经常触发.等待window.load似乎已经足够了,但如果你应该看到更多的时序问题,你可能不得不采取类似waitForKeyElements()的方法.
> $(‘#SignupButton’)可能存在其他时间问题.单击();如果是这样,那就超出了这个问题的范围.
>请勿使用此知识来违反任何网站的服务条款. (如果适用)

有了它,脚本变成：

// ==UserScript==
// @name         Roblox Account Create
// @match        https://www.roblox.com/
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant        GM_addStyle
// ==/UserScript==
var _adj        = [ 'Cool','Dec' ];
var _username   = _adj[ parseInt( Math.random( ) * _adj.length ) ],10 );
_username       += _animals[ parseInt( Math.random( ) * _animals.length ) ];
_username       += parseInt( Math.random( ) * 1000 );
var _dt_month   = _months[ Math.floor( Math.random( ) * ( 12 ) + 0 ) ];
var _dt_day     = Math.floor( Math.random( ) * ( 28 ) + 1 );
var _dt_year    = Math.floor( Math.random( ) * ( 2005 - 1916 + 1 ) + 1916 );

window.addEventListener ("load",function load () {
    setControl ('Username',_username );
    setControl ('Password',_pass );
    setControl ('PasswordConfirm',_pass );
    setControl ('MonthDropdown',_dt_month );
    setControl ('DayDropdown',_dt_day );
    setControl ('YearDropdown',_dt_year );
    $( '#FemaleButton' ).click( );
    $( '#SignupButton' ).click( );
} );

function setControl (elemID,value) {
    var zInput  = $( '#' + elemID );
    zInput.val( value );

    var changeEvent = document.createEvent ("HTMLEvents");
    changeEvent.initEvent ("change",true,true);
    zInput[0].dispatchEvent (changeEvent);
}

请注意,我们使用有效的@grant值,而不是none.这对于避免与页面的javascript冲突至关重要.

javascript – 使用Tampermonkey在AngularJS网站上自动提交表单？

解决方法

相关文章