C#实现动态替换iframe的width和height属性值

嘿，这个问题我碰到过好多次了！富文本编辑器自动给iframe加上固定宽高，确实是移动端适配的大坑，不过有几个靠谱的解决办法，分前端和后端两种场景给你唠唠：

方法一：前端JavaScript动态处理（适合页面渲染时调整） #

如果你的内容是在前端页面渲染的，直接用JS操作DOM或者预处理HTML字符串都能搞定：

1. 操作已渲染的DOM #

页面加载完成后，遍历所有iframe，移除固定宽高属性，再给它套个响应式容器维持比例：

document.addEventListener('DOMContentLoaded', function() {
  const iframes = document.querySelectorAll('iframe');
  iframes.forEach(iframe => {
    // 移除编辑器自动加的固定宽高属性
    iframe.removeAttribute('width');
    iframe.removeAttribute('height');
    
    // 创建响应式容器，维持16:9的视频比例（4:3的话改成75%）
    const wrapper = document.createElement('div');
    wrapper.classList.add('responsive-video-wrapper');
    
    // 调整iframe的定位样式
    iframe.style.position = 'absolute';
    iframe.style.top = '0';
    iframe.style.left = '0';
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    
    // 替换原iframe为容器包裹的版本
    iframe.parentNode.replaceChild(wrapper, iframe);
    wrapper.appendChild(iframe);
  });
});

配合全局CSS：

.responsive-video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例，按需修改 */
  overflow: hidden;
}

2. 预处理HTML字符串（适合拿到内容后先处理再渲染） #

如果是先从后端拿到HTML字符串再插入页面，用正则直接替换掉宽高属性：

function makeIframesResponsive(htmlContent) {
  // 匹配并移除iframe中的width和height属性，不管值是什么
  return htmlContent
    .replace(/<iframe([^>]*)\s+width="[^"]+"([^>]*)>/gi, '<iframe$1$2>')
    .replace(/<iframe([^>]*)\s+height="[^"]+"([^>]*)>/gi, '<iframe$1$2>');
}

// 使用示例
const rawContent = '<iframe src="someyoutubevideo" height="1000" width="1920"></iframe>';
const responsiveContent = makeIframesResponsive(rawContent);
// 之后把responsiveContent插入页面即可

方法二：后端正则替换（适合提前处理存储的内容） #

如果不想在前端处理，也可以在后端存储或返回内容时，用正则移除iframe的固定宽高属性。比如PHP的实现：

function makeIframesResponsive($html) {
  // 移除width属性
  $html = preg_replace('/<iframe([^>]*)\s+width="[^"]+"([^>]*)>/i', '<iframe$1$2>', $html);
  // 移除height属性
  $html = preg_replace('/<iframe([^>]*)\s+height="[^"]+"([^>]*)>/i', '<iframe$1$2>', $html);
  return $html;
}

Python、Node.js等其他语言的正则逻辑类似，核心就是匹配并剔除固定的width/height属性，之后再配合前端的响应式容器CSS，就能实现移动端自适应了。

小提醒 #

不管用哪种方法，响应式容器是关键——直接给iframe设100%宽度虽然能适配，但会导致视频比例失调，用padding-top的方式能完美维持原视频的宽高比，避免拉伸变形。

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