使用input输入框同步控制iframe宽高尺寸的实现方法

直接在页面中加入以下JavaScript代码，即可实现输入值实时同步、数值区间限制的需求：

// 抓取对应DOM元素
const targetIframe = document.getElementById('iframe');
const widthInput = document.getElementById('e_width');
const heightInput = document.getElementById('e_height');
const iframeContainer = document.querySelector('.pi-b4.iframe');

function syncSize() {
    // 宽度校验：强制限制在300-600px区间
    let validWidth = Number.parseInt(widthInput.value, 10);
    validWidth = Number.isNaN(validWidth) ? 300 : Math.max(300, Math.min(600, validWidth));
    widthInput.value = validWidth;

    // 高度校验：强制限制在400-800px区间
    let validHeight = Number.parseInt(heightInput.value, 10);
    validHeight = Number.isNaN(validHeight) ? 400 : Math.max(400, Math.min(800, validHeight));
    heightInput.value = validHeight;

    // 同步尺寸到iframe及外层容器，避免内容裁切、布局错位
    targetIframe.style.width = `${validWidth}px`;
    targetIframe.style.height = `${validHeight}px`;
    if (iframeContainer) {
        iframeContainer.style.width = `${validWidth}px`;
        iframeContainer.style.height = `${validHeight}px`;
    }
}

// 绑定输入监听事件，输入过程中实时同步，无需等输入框失焦
widthInput.addEventListener('input', syncSize);
heightInput.addEventListener('input', syncSize);

// 页面加载完成后初始化默认尺寸，保证首次渲染尺寸匹配输入框默认值
document.addEventListener('DOMContentLoaded', syncSize);

实现说明 #

• 做了兜底校验逻辑：即使用户绕过input原生的min/max属性输入超范围值、非数字值，代码都会自动修正到合法区间，不会出现异常尺寸
• 采用input事件做监听，用户手动输入数值、点击数字输入框的上下箭头调整数值时，都会立即触发尺寸更新
• 同步更新iframe外层包裹容器的尺寸，避免iframe被父容器限制宽高导致显示不全
• 页面初始化时主动执行一次尺寸同步，避免首次加载时iframe尺寸和输入框默认值不匹配

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