iframe高度自适应子页面高度 使用onload属性

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
</head>
<body id="body1">
    <iframe id="urls" src="child1.html" frameborder="0" scrolling="no"  height="100%" style="width: 1px; min-width: 100%; *width: 100%;" ></iframe>
    <div style="height: 200px; background: green;">

    </div>
</body>
<script>
    var iframe = document.getElementById(‘urls‘);
    function iframeLoad() {
            iframe.height=document.getElementById("urls").contentWindow.document.body.clientHeight;
        }
    /*
    function iframeclick(){
        iframeLoad();
    }
    */
    if (iframe.attachEvent){
        iframe.attachEvent("onload",function(){
            iframeLoad();
        });
    } else {
        iframe.onload = function(){
            iframeLoad();
        };
    }
</script>
</html>
时间: 2024-08-02 09:23:50

iframe高度自适应子页面高度 使用onload属性的相关文章

子元素绝对定位,父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的    可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h

总结iframe高度自适应,自适应子页面高度

在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下. 页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <iframe id="mainFrame" name="main

div模拟textarea以实现高度自适应实例页面

作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执地岿然不动.所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦. <!DOCTYPE <!DOCTYPE html> <html> <head> <title>div模拟textarea以实现高度自适应实例页面</title>

CSS父元素高度随子元素高度变化而变化

<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */ #menu ul{list-style-type:none;} #menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局,让父元素高度变0px */ &l

iframe嵌入的子页面如何刷新父窗口

iframe中刷新父页面方法及一些按钮刷新代码集合[原创+转]2009-07-23 11:12a页面里iframe了个b页面,我想实现在b页面里一个按钮,一按就刷新a页面,也就是父页面,不是只刷新iframe里面的b页面 哦~ 请问b页面里的<input type="button" class="btn" value=" 返 回 " onclick="history.back();">那个onclick 要怎么写呢

iframe自适应当前页面高度

<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} </style> <script type="text/javascript"> $(document).ready(function(){ var iframeHeight = function () { var _height = $(window).height() - 34; $('#co

父元素高度比子元素高度多几个像素的解决方法

html代码: 1 <div> 2 <textarea></textarea> 3 </div> 其中textarea元素的高度为80px,而它的父元素div高度为84px,为什么会多出4px呢? 解决方法是: 1.设textarea为 display: block;

子页面是iframe框架中 子页面改变父页面的值

<script type="text/javascript"> window.onload = function () { parent.document.getElementById('SupName').text = $("#txtName").val(); } </script>

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

实习不久接到一个任务,在网页中嵌套另一个工程的网页.本以为这是轻而易举的一件事情,结果被测试姐姐折腾得够呛.多次和我谈心说到这个高度固定导致iframe出现滚动条有多么不好看,对于工程整体的影响有多么恶劣.因为跨域的原因,这个需求被拖了许久,真是很痛苦的一件事.最终在我离开公司之前搞定了这个单. 这里就把我的研究过程写下来以供大家参考. 首先需要了解一下何为同域,何为跨域: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名