调整外部网站内容的大小以适合 iFrame 宽度答案

【问题标题】：Resize external website content to fit iFrame width调整外部网站内容的大小以适合 iFrame 宽度
【发布时间】：2012-07-08 02:37:00
【问题描述】：

我有一个包含 2 个 iFrame 的网页。它们都具有固定的宽度和高度。我正在其中加载外部网站。如何调整这些外部网站的宽度以适应 iFrame（就像移动浏览器通过更改视口所做的那样）？

【问题讨论】：

这是不可能的恕我直言See this。

标签： javascript html css iframe web

【解决方案1】：

您可以为 iframe 设置特定的宽度和高度（例如，这些可能等于您的窗口尺寸），然后对其应用缩放转换。比例值将是您的窗口宽度与您要设置到 iframe 的尺寸之间的比率。

例如

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

【讨论】：

是的，但这取决于您对跨浏览器解决方案的定义。 AFAIK 它应该在 IE>8 中工作
但是 iframe 的尺寸也被缩放了，不仅仅是内容的尺寸。
像魔术一样工作！为了保持 iframe 就位，我还添加了 iframe{ -moz-transform-origin: top left; -webkit-transform-origin：左上角； -o-transform-origin：左上角； -ms-transform-origin：左上角；变换原点：左上角； }
@DotNetFan 使用 iframe 的宽度和高度，直到滚动条消失，然后将整个内容缩放到所需的大小。

【解决方案2】：

1 个网站调整高度大小的提示。但您可以更改为 2 个网站。

这是我使用外部网站调整 iframe 大小的代码。您需要在父（带有 iframe 代码）页面和外部网站中插入代码，因此，这不适用于您无权编辑外部网站。

本地（iframe）页面：只需插入代码sn-p
远程（外部）页面：您需要一个“body onload”和一个包含所有内容的“div”。并且 body 需要设置为“margin:0”

本地：

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>

<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
  if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>

您需要这个“frm”前缀以避免其他嵌入代码（如 Twitter 或 Facebook 插件）出现问题。如果您有一个普通页面，则可以删除两个页面（脚本和 onload）上的“if”和“frm”前缀。

远程：

您需要 jQuery 来完成“真实”页面高度。我无法意识到如何使用纯 JavaScript，因为在使用 body.scrollHeight 或相关调整高度（从高到低）时会遇到问题。出于某种原因，它将始终返回最大高度（预先调整尺寸）。

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>

因此，父页面 (iframe) 的默认高度为 1px。该脚本从 iframe 插入“等待消息/事件”。当收到一条消息（post message）并且前3个字符是“frm”（避免上述问题）时，将从第4个位置获取数字并设置iframe高度（样式），包括'px'单位。

外部站点（加载在 iframe 中）将“发送消息”给父级（opener），其中包含“frm”和主 div 的高度（在本例中为“master”）。 postmessage 中的“*”表示“任何来源”。

希望这会有所帮助。对不起我的英语。

【讨论】：