如何在JavaScript中用HTML字符串变量设置Iframe的src属性？

直接给iframe的src属性传HTML字符串是行不通的，因为src仅接受URL地址。你可以通过以下几种方式实现需求：

方法1：使用srcdoc属性（推荐现代浏览器） #

srcdoc是HTML5新增属性，允许直接给iframe传入HTML内容，语法简洁且无需编码：

function GetValues(result) {
  const displayDiv = document.getElementById('DisplayHTML');
  const iframe = document.createElement('iframe');
  
  // 直接将HTML字符串赋值给srcdoc
  iframe.srcdoc = result;
  
  // 可选：设置iframe样式适配容器
  iframe.style.width = '100%';
  iframe.style.height = '500px';
  iframe.style.border = 'none';
  
  displayDiv.appendChild(iframe);
}

兼容性：支持Chrome、Firefox、Edge、Safari 6.1+，若用户群体以现代浏览器为主，优先选择此方法。

方法2：使用Data URI（兼容旧浏览器） #

将HTML字符串编码为Data URI格式作为iframe的src值，兼容性更好（支持IE8及以上）：

function GetValues(result) {
  const displayDiv = document.getElementById('DisplayHTML');
  const iframe = document.createElement('iframe');
  
  // 编码HTML字符串并拼接成Data URI
  iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(result);
  
  iframe.style.width = '100%';
  iframe.style.height = '500px';
  iframe.style.border = 'none';
  
  displayDiv.appendChild(iframe);
}

注意：部分旧浏览器（如IE）对Data URI的长度有限制，若HTML内容过长可能出现问题。

方法3：写入iframe的文档对象 #

通过iframe的contentDocument直接写入HTML内容，适合需要后续操作iframe内部元素的场景：

function GetValues(result) {
  const displayDiv = document.getElementById('DisplayHTML');
  const iframe = document.createElement('iframe');
  
  iframe.style.width = '100%';
  iframe.style.height = '500px';
  iframe.style.border = 'none';
  
  // 等待iframe加载完成后写入内容
  iframe.onload = function() {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.write(result);
    iframeDoc.close(); // 必须调用close结束写入
  };
  
  displayDiv.appendChild(iframe);
}

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