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

Resize external website content to fit iFrame width

本文关键字：iFrame 宽度 网站 外部 调整      更新时间：2023-09-26

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

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

例如

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

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

以下是我使用外部网站调整iframe大小的代码。你需要在父（带有iframe代码）页面和外部网站中插入一个代码，所以，如果你没有编辑外部网站的权限，这将不起作用。

  • local（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插件）的问题。如果您有一个普通页面，您可以删除两个页面上的"If"answers"frm"前缀（script和onload）。

远程：

您需要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）"发送消息"。postmessage中的"*"表示"任何来源"。

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

相关文章：