动态插入 iframe 的网页的 Html 看起来与原始页面略有不同

Posted 2023-03-08

【中文标题】动态插入 iframe 的网页的 Html 看起来与原始页面略有不同

【英文标题】：Html of a webpage dynamically inserted into iframe looks slightly different from original page

【发布时间】：2012-05-26 14:45:56

【问题描述】：

我有一个网页，我抓取了 html，通过 websockets 通过 socket.io 将它发送到另一个带有空 iframe 的页面，然后动态地将 html 插入 iframe。

我用来插入 html 的代码如下：

frame.open();
frame.write(html);
frame.close();

但是，DOM 元素的某些大小和间距似乎与原始页面略有不同。

这里有两个屏幕截图向您展示我的意思。很难看出差异，但顶部的搜索栏长度略有不同，每首歌曲的标题与大缩略图的距离也略有不同：

原始页面：

带有动态插入 html 的 iframe 的页面

html 中唯一的区别是将相对 url 更改为绝对 url。除此之外，html、浏览器和窗口大小都是相同的。另外，css 样式也是一样的。

这是怎么回事？

【问题讨论】：

同样的 DOCTYPE 声明？

@MrLister 它们实际上并不相同，所以我将它们设置为相同，但样式上的差异仍然存在。我说的是原始页面上的文档类型，以及带有 iframe 的页面外部框架上的文档类型。但是，内部 iframe 没有文档类型。

@MrLister 啊，你是对的！！ iframe 中的 doctype 需要与原始框架的 doctype 相同。谢谢！！！如果你回答这个问题，我会接受。

【参考方案1】：

一些默认设置（如边距和填充）在 quirks 和标准模式之间有所不同。 因此请确保 DOCTYPE 声明与原始声明相同。

或者更正式地说，如果原始页面有任何触发标准模式的 DOCTYPE 声明，则 iframe 中的源代码也需要具有类似的 DOCTYPE。 （不必相同，只要它们触发相同的模式即可。）