发表新帖
发表新帖

Resizing an iframe based on content

后端 未结
关注
21 2486
南方客
南方客 2020-11-21 07:40

I am working on an iGoogle-like application. Content from other applications (on other domains) is shown using iframes.

How do I resize the iframes to fit the heigh

相关标签:
21条回答
  • 不思量自难忘°
    2020-11-21 08:18 
    <html>
<head>
<script>
function frameSize(id){
var frameHeight;

document.getElementById(id).height=0 + "px";
if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;    
}

document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>

<body>

<iframe id="frame"  src="startframe.html" frameborder="0" marginheight="0" hspace=20     width="100%" 

onload="javascript:frameSize('frame');">

<p>This will work, but you need to host it on an http server, you can do it locally.    </p>
</body>
</html>
    0 讨论(0)
  • 终归单人心
    2020-11-21 08:20

    Here is a simple solution using a dynamically generated style sheet served up by the same server as the iframe content. Quite simply the style sheet "knows" what is in the iframe, and knows the dimensions to use to style the iframe. This gets around the same origin policy restrictions.

    http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

    So the supplied iframe code would have an accompanying style sheet like so...

    <link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
 <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>

    This does require the server side logic being able to calculate the dimensions of the rendered content of the iframe.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-21 08:21

    Something on the lines of this i belive should work.

    parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;

    Load this with your body onload on the iframe content.

    0 讨论(0)
 看不清?
提交回复
热议问题