随笔-46  评论-54  文章-0  trackbacks-0
Searching "iframe height 100" in 谷歌!
1、
<iframe height="100%"> 
no work

2、
<iframe stlye="height: 100%;"> 
no work

3、CSS
1 /*** html file ***/
2 
3 <class="forum2">
4  <iframe src="http://mydomain.com/phpbb" title="Forum" scrolling="auto">
5  </iframe>
6 </p>

 1 /*** css file ***/
 2 
 3 ..forum2 {
 4     height: 900px;
 5     width: 100%;
 6 }
 7 
 8 IFRAME {
 9     min-height: 900px;
10     height: 100%;
11     width: 100%;
12 }


4、JavaScript
 1 <script language="JavaScript">
 2 <!--
 3 function resize_iframe()
 4 {
 5   //resize the iframe according to the size of the
 6 
 7   //window (all these should be on the same line)
 8 
 9   document.getElementById("glu").height=
10     document.body.offsetHeight-
11     document.getElementById("glu").offsetTop-26;
12 }
13 
14 // this will resize the iframe every
15 // time you change the size of the window.
16 window.onresize=resize_iframe; 
17 
18 //Instead of using this you can use: 
19 //    <BODY onresize="resize_iframe()">
20 
21 
22 //-->
23 </script>

1 <iframe id='glu' width=100% onload='resize_iframe()'>
2 </iframe>


5、用CSS构建iframe效果的四种方法

6、W3C关于iframe的描述
posted on 2006-04-18 19:28 rox 阅读(4927) 评论(5)  编辑  收藏 所属分类: AJAX

评论:
# re: How to set iframe height 100% or scrollable at out page? 2006-04-20 22:26 | rox
一个很牛的JavaScript网站!
http://www.activewidgets.com/


Google 中搜索 "iframe auto height"

1、Auto Fit IFrame to Content
http://www.devpapers.com/article/200

2、iFrame Auto Resize
About a month ago I was faced with the same need (to conditionally resize an iframe) and discovered that it just wouldn't work reliably due to browser quirks.
However, I solved the problem by creating a div in the parent page that got replaced with the innerHTML from the body of the document in the iframe. Worked like a charm.
You can use an onload event in the iframe element in the parent page or an onload event in the body of the document in the iframed page to trigger the exchange.

Post a stripped down version of the page if you can. One that shows exactly how the iframe fits into the structure of the page.

The solution I settled on works like this:
The parent page has a javascript function like this:

function insertIt() {
var _y = document.getElementById('framediv');
var _x = window.frames[0].document.body.innerHTML;
_y.innerHTML = _x
}
Then, the parent page has a div with the id "framediv" which is placed where the contents of the iframe should appear on the page.
The iframe element is then placed inside the div, like this:

<div id="framediv">
<iframe onload="insertIt();" src="/somewhere/content.htm" frameborder="no" width="555px" scrolling="no">
</div>

As you can see, there's onload="insertIt()" inside the iframe element. So when the iframe loads, the parent page immediately takes the contents of the body of the document contained in the iframe and actually replaces the iframe element with that content.

It's a little tricky to comprehend, but it works great.

You said you're a newbie, does this make any sense to you?

also, is the iframe document located on the same server and the same domain as the parent page?
That will play a part.   回复  更多评论
  
# re: How to set iframe height 100% or scrollable at out page? 2006-06-29 14:56 | rox
Dynamic iframe height

Iframe SSI script II
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm  回复  更多评论
  
# re: How to set iframe height 100% or scrollable at out page? 2006-07-14 17:19 | rox
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>垂直居中</title>
<style type="text/css">
body, html { height:100%; }
#outer { height:100%; overflow:visible; position:relative; }
#outer[id] { display:table; position:static; }
#middle { position:absolute; top:50%; }
#middle[id] { display:table-cell; vertical-align:middle; position:static; }
#inner { position:relative; top:-50%; }
#inner[id] { position:static; }
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<p>111111这个在IE中可以实现居中,在Firefox中也可以实现居中1111111</p>
</div>
</div>
</div>
</body>
</html>  回复  更多评论
  
# re: How to set iframe height 100% or scrollable at out page? 2010-03-29 13:40 | rox
# re: How to set iframe height 100% or scrollable at out page? 2014-03-14 11:01 | rox
IE and chrome
var iframe= $("#targetFrame");
onloadEvent = 'this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";'
+'this.style.width="100%";';
iframe.parent().css("height", "100%"); //div , p
iframe.parent().css("width", "100%");
iframe.attr("src", url);
iframe.attr("onload", onloadEvent);   回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: