为了满足餐饮多开系统的需求,需要在嵌入页面中获取平台的账号密码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事件
}