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

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

2012-07-08 Tahin Rahman

这是不可能的恕我直言[看到这个]（http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-iframe）。 – 2012-07-08 10:52:31

感谢您的回复。 – 2012-07-08 11:17:36

不客气:-) – 2012-07-08 11:18:01

你可以做的是为你的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>

来源

2012-07-08 11:09:53 Luca

+1，真的很不错，但可能不是跨浏览器的解决方案！ – 2012-07-08 11:22:27

是真实的，但它取决于您对跨浏览器解决方案的定义。 AFAIK它应该工作在IE> 8 – Luca 2012-07-08 12:19:24

它完美地为我工作。谢谢.... :) – 2012-07-22 09:55:05

-1

在IFrame中，浏览器会自动呈现网页，就好像它在一个单独的页面中一样，它的行为方式与您调整浏览器的大小相同......网页将按设计显示无论这是固定尺寸的流体设计还是其他任何...您无法强制网站上的其他渲染行为。但是，您可以编程方式修改页面的标记。

来源

2012-07-08 11:06:37 AhHatem

针对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等插件其他嵌入式代码的问题。如果您有普通页面，则可以在两个页面上删除“if”和“frm”前缀（脚本和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插入“等待消息/事件”。当收到消息（邮件消息）并且前3个字符为“frm”（以避免上述问题）时，将从第4个位置获取数字并设置iframe高度（style），包括'px'单位。

外部网站（加载到iframe中）将“发送一条消息”给父节点（opener），并带有“frm”和主div的高度（在本例中为id“master”）。 postmessage中的“*”表示“任何来源”。

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

来源

2014-05-14 19:16:06 Arvy

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

回答

相关问题