调整外部网站的内容，以适应宽的iFrame(Resize external website cont

我有一个在它2个iFrame中的网页。两者都是具有固定的宽度和高度。我加载在其内部外部网站。我该如何调整这些外部网站的宽度以适应使用iframe（如移动浏览器不改变视口）？

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

Answer 2:

提示1个网站调整高度。但是你可以换到2个网站。

这里是我的代码来调整一个iframe与外部网站。你需要插入一个代码到父（用IFRAME代码）页，并在外部网站一样，所以，这不会与您一起用不上编辑外部网站。

本地（IFRAME）页：只需插入代码段
远程（外部）页：你需要一个“身体的onload”，并保存所有内容的“分区”。和身体需要被称呼为“保证金：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等插件其他嵌入式代码的问题。如果你有一个简单的页面，你可以删除“如果”和“FRM”两个页面（脚本和onload事件）的前缀。

远程：

你需要jQuery来完成关于“真实”的页面高度。我不知道如何与纯JavaScript时调整高度下降（调高或调低高度），使用body.scrollHeight或相关的做，因为你有问题。出于某种原因，它总是返回的最大高度（预redimensioned）。

<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的一个“等待消息/事件”。当接收到的消息（请求消息），并且第一3个字符是“FRM”（以避免所提到的问题），将获得从第四位置的数量和设置的IFRAME高度（样式），包括“PX”单元。

外部站点（加载在iframe）将与“FRM”和主div的高度（本例中ID“主”）“发送消息”到父（开启器）。带“*”的PostMessage的意思是“任何来源”。

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