为了满足餐饮多开系统的需求,需要在嵌入页面中获取平台的账号密码dom并赋值操作。
// 美团外卖商家中心自动登录工具,https://e.waimai.meituan.com/new_fe/login#/login
let userName = 'xxxx';
let passWord = 'xxxx';
// 修改 iframe 的域名使其变为同源
let newIframe = document.querySelector('iframe[title=登录模块]');
document.querySelector('iframe').src = newIframe.src.replace('epassport',"e.waimai");
// 监听 iframe 刷新后加载执行函数
document.querySelector('iframe').onload = function () {
bindInputDOM('input[name=login]',userName);
setTimeout(() => {
bindInputDOM('input[name=password]',passWord);
let button = newIframe.contentWindow.document.querySelector(".login__submit");
button.click();
},100);
// 使用 原生js 改变 React 的 input DOM
function bindInputDOM(name, val) {
let Input = newIframe.contentWindow.document.querySelector(name);
let lastInput = Input.value;
Input.value = val;
let event = new Event('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16 内部定义了descriptor拦截value,此处重置状态
let tracker = Input._valueTracker;
if (tracker) {
tracker.setValue(lastInput);
}
Input.dispatchEvent(event);
}
}如果该平台使用的是vue框架的话就更简单了。
// 使用 原生js 改变 vue 的 input DOM
function bindInputDOM(name, val) {
let Input = document.querySelector(name);
let event = document.createEvent('HTMLEvents')
event.initEvent('input', false, true)
Input.value = val;// 修改用户名输入框的值
Input.dispatchEvent(event);// 手动触发输入框的input事件
}本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!