调整外部网站内容的大小以适合 iFrame 宽度
Posted
技术标签:
【中文标题】调整外部网站内容的大小以适合 iFrame 宽度【英文标题】：Resize external website content to fit iFrame width 【发布时间】：2012-07-08 02:37:00 【问题描述】：我有一个包含 2 个 iFrame 的网页。它们都具有固定的宽度和高度。我正在其中加载外部网站。如何调整这些外部网站的宽度以适应 iFrame（就像移动浏览器通过更改视口所做的那样）？
【问题讨论】：
这是不可能的恕我直言See this。 【参考方案1】：您可以为 iframe 设置特定的宽度和高度（例如，这些可能等于您的窗口尺寸），然后对其应用缩放转换。比例值将是您的窗口宽度与您要设置到 iframe 的尺寸之间的比率。
例如
<iframe 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 中的“*”表示“任何来源”。
希望这会有所帮助。对不起我的英语。
【讨论】：
以上是关于调整外部网站内容的大小以适合 iFrame 宽度的主要内容，如果未能解决你的问题，请参考以下文章