Javascript 调整外部网站内容的大小以适合 iFrame 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11382473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize external website content to fit iFrame width
提问by Tahin Rahman
I have a webpage with 2 iFrames in it. Both of them are with fixed width and height. I am loading external websites inside them. How can I resize those external websites width to fit with the iFrame (like mobile browsers does by changing viewport)?
我有一个包含 2 个 iFrame 的网页。它们都具有固定的宽度和高度。我正在其中加载外部网站。如何调整这些外部网站的宽度以适应 iFrame（就像移动浏览器通过更改视口所做的那样）？
回答by Luca
What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
您可以做的是为 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>
回答by Arvy
Tip for 1 website resizing the height. But you can change to 2 websites.
1 网站调整高度的提示。但是您可以更改为2个网站。
Here is my code to resize an iframe with an external website. You need insert a code into the parent (with iframe code) page and in the external website as well, so, this won't work with you don't have access to edit the external website.
这是我使用外部网站调整 iframe 大小的代码。您需要在父（带有 iframe 代码）页面和外部网站中插入代码，因此，这不适用于您无权编辑外部网站。
- local (iframe) page: just insert a code snippet
- remote (external) page: you need a "body onload" and a "div" that holds all contents. And body needs to be styled to "margin:0"
- 本地（iframe）页面：只需插入一个代码片段
- 远程（外部）页面：您需要一个“body onload”和一个包含所有内容的“div”。并且 body 需要设置为“margin:0”
Local:
当地的：
<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>
You need this "frm" prefix to avoid problems with other embeded codes like Twitter or Facebook plugins. If you have a plain page, you can remove the "if" and the "frm" prefix on both pages (script and onload).
您需要这个“frm”前缀来避免其他嵌入代码（如 Twitter 或 Facebook 插件）的问题。如果您有一个普通页面，您可以删除两个页面（脚本和加载）上的“if”和“frm”前缀。
Remote:
偏僻的：
You need jQuery to accomplish about "real" page height. I cannot realize how to do with pure JavaScript since you'll have problem when resize the height down (higher to lower height) using body.scrollHeight or related. For some reason, it will return always the biggest height (pre-redimensioned).
您需要 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>
So, parent page (iframe) has a 1px default height. The script inserts a "wait for message/event" from the iframe. When a message (post message) is received and the first 3 chars are "frm" (to avoid the mentioned problem), will get the number from 4th position and set the iframe height (style), including 'px' unit.
因此，父页面 (iframe) 的默认高度为 1px。该脚本从 iframe 插入“等待消息/事件”。当收到一条消息（发布消息）并且前 3 个字符是“frm”（为了避免提到的问题）时，将从第 4 个位置获取数字并设置 iframe 高度（样式），包括 'px' 单位。
The external site (loaded in the iframe) will "send a message" to the parent (opener) with the "frm" and the height of the main div (in this case id "master"). The "*" in postmessage means "any source".
外部站点（加载在 iframe 中）将使用“frm”和主 div 的高度（在本例中为 id“master”）“发送消息”给父级（开启者）。postmessage 中的“*”表示“任何来源”。
Hope this helps. Sorry for my english.
希望这可以帮助。对不起我的英语不好。
