如何将iframe代码以HTML形式渲染而非纯文本输出？

核心问题 #

你当前代码里用了document.createTextNode(messages[cnt])，这个方法的作用是创建纯文本节点，会把包含iframe标签的字符串原封不动地当成文字输出，不会让浏览器解析成HTML元素，所以才只显示纯文本。

修正方案 #

要渲染实际的iframe，需要让浏览器解析HTML字符串，有两种常用方式：

方法1：直接创建iframe元素 #

不用拼接HTML字符串，直接创建iframe DOM元素并设置src属性，再添加到页面：

const srcList = [
  "https://example.com/iframe-1",
  "https://example.com/iframe-2",
  "https://example.com/iframe-3"
];
let cnt = 0;
const show = () => {
  if (cnt >= srcList.length) return;
  const iframe = document.createElement('iframe');
  iframe.src = srcList[cnt];
  // 可按需设置iframe属性，比如宽高
  iframe.width = '600';
  iframe.height = '400';
  document.body.appendChild(iframe);
  cnt++;
};
setInterval(show, 2000);

方法2：使用HTML解析方法 #

如果必须保留HTML字符串的形式，用insertAdjacentHTML方法直接把字符串解析成HTML元素插入页面：

const messages = [
  '<iframe src="https://example.com/iframe-1"></iframe>',
  '<iframe src="https://example.com/iframe-2"></iframe>',
  '<iframe src="https://example.com/iframe-3"></iframe>'
];
let cnt = 0;
const show = () => {
  if (cnt >= messages.length) return;
  document.body.insertAdjacentHTML('beforeend', messages[cnt]);
  cnt++;
};
setInterval(show, 2000);

注意事项 #

• 确保目标域名允许被嵌入iframe（即没有设置X-Frame-Options禁止嵌入），否则iframe会显示空白或报错。
• 按需添加iframe的样式、宽高、边框等属性，优化显示效果。

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