Question

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

Answer 1

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

E.g。

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

Answer 2

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

以下是我使用外部网站调整iframe大小的代码。您需要在父级（使用iframe代码）页面和外部网站中插入代码，因此，这不能与您合作，无法编辑外部网站。

本地（iframe）页面：只需插入代码段
远程（外部）页面：你需要一个＆＃34; body onload＆＃34;和一个＆＃34; div＆＃34;包含所有内容。身体需要设置为＆＃34; margin：0＆＃34;

本地：

<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>

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

远程：

你需要jQuery才能完成＆＃34;真正的＆＃34;页面高度。我无法实现如何使用纯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。脚本插入＆＃34;等待消息/事件＆＃34;来自iframe。当收到一条消息（发布消息）并且前3个字符是＆＃34; frm＆＃34; （为了避免上述问题），将从第4个位置获取数字并设置iframe高度（样式），包括＆＃39; px＆＃39;单元。

外部网站（在iframe中加载）将＆＃34;发送消息＆＃34;使用＆＃34; frm＆＃34;到父母（开场白）和主div的高度（在这种情况下是id＆＃34; master＆＃34;）。＆＃34; *＆＃34;在postmessage中意味着＆＃34;任何来源＆＃34;。

希望这会有所帮助。抱歉我的英文。

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

2 个答案: