点击按钮填充iframe输入框后手动交互、提交时数据丢失如何解决

问题根因 #

• 代码存在基础语法错误：autofill函数没有接收事件对象参数，直接调用evt.preventDefault()会抛出未定义异常，导致逻辑执行异常。
• 直接通过val()修改DOM节点值的方式，无法同步iframe内表单框架的内部状态：如果iframe内的表单是基于React、Vue等前端框架开发，框架会独立维护表单字段状态，直接改DOM值不会被框架感知，后续用户交互触发框架重渲染时，会用内部存储的空状态覆盖你写入的DOM值，提交时框架读取内部状态自然也会提示字段为空。

修复方案 #

步骤1：修改HTML调用逻辑，传入事件对象 #

<a href="#" onclick="autofill(event, this)" data-filled-value="USA">United States of America</a>

步骤2：优化JS逻辑，赋值后主动触发原生事件 #

function autofill(evt, element) {
    evt.preventDefault();
    const $targetInput = $("#form-iframe").contents().find("#country-field");
    // 写入值到DOM
    $targetInput.val(element.dataset.filledValue);
    // 主动触发input、change事件，同步框架内部状态
    $targetInput[0].dispatchEvent(new Event('input', { bubbles: true }));
    $targetInput[0].dispatchEvent(new Event('change', { bubbles: true }));
}

额外注意事项 #

• 需确保主页面和iframe属于同域，受浏览器同源策略限制，跨域场景下无法直接操作iframe内部DOM。
• 如果iframe内的输入框绑定了特殊的校验事件（如blur、focus），可根据实际情况对应主动触发对应事件即可。

内容的提问来源于stack exchange，提问作者Broda