42

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

4

2 回答 2

77

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

例如

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
于 2012-07-08T11:09:53.900 回答
3

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

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

  • 本地（iframe）页面：只需插入代码片段
  • 远程（外部）页面：您需要一个“body onload”和一个包含所有内容的“div”。并且正文需要设置为“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 中）将使用“frm”和主 div 的高度（在本例中为 id“master”）向父级（opener）“发送消息”。邮件中的“*”表示“任何来源”。

希望这可以帮助。对不起我的英语不好。

于 2014-05-14T19:16:06.027 回答