[自学做网页] iframe大小自动调整

最新推荐文章于 2023-12-19 10:25:10 发布
最新推荐文章于 2023-12-19 10:25:10 发布
阅读量164 收藏
点赞数
原文链接：http://www.cnblogs.com/chivaTan/archive/2013/01/15/2861273.html
版权 
        <div class="d-b-right" id="d-b-right">
            <iframe src="FindUser.aspx" frameborder="1" framespaceing= "0" scrolling="auto" marginheight="0" marginwidth="0" name="mmc" id="mmc" class="mmc" οnlοad="iframeOnload()"></iframe>
        </div>

　　想让iframe大小自适应窗口，网上有很多操作方法，如：

/*动态调整iframe的大小*/  
   function changeIframeSize(iframeContentHeight){  
      document.getElementById('rightContent').height = iframeContentHeight+20;  
   }  
   /*iframe页面载入处理函数*/  
   function iframeOnload()  
   {  
       var frms=document.getElementById('rightContent');  
       /*判断浏览器类型*/  
        var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight;  
        changeIframeSize(height);  
        /*this.height=rightContent.document.body.scrollHeight*/  
   }

　　都可以让iframe的大小在网页载入时自动设置合适的高度。但是当调整窗口大小时，iframe的大小不会改变。我就想到让窗口打开就自动最大化

if(document.all){ 
top.window.resizeTo(screen.availWidth,screen.availHeight); 
} 
else if(document.layers||document.getElementById){ 
if(top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){ 
top.window.outerHeight = screen.availHeight; 
top.window.outerWidth = screen.availWidth; ｝｝

　　但是如果打开时，如果不是第一个标签，也不会自动最大化。最后，使用了。window.onresize()事件。

        function iframeOnload() {
            //var win = obj;
            mmc = document.getElementById("mmc");
            var div = document.getElementById("d-b-right")
            if (div.offsetHeight) {
                winWidth = div.offsetWidth - 30;
                winHeight = div.offsetHeight - 30;
            }
            else {
                winWidth = div.offsetWidth - 30;
                winHeight = div.scrollHeight - 30;
            }
            mmc.style.height = winHeight + "px";
            mmc.style.width = winWidth + "px";
        }

　　onresize要放在</body>之前，放在<head></head>里只会运行一次。

window.onresize = function () { iframeOnload(); };

　　我肯定是土办法，期待大虾指点。

 

转载于:https://www.cnblogs.com/chivaTan/archive/2013/01/15/2861273.html

aobian0880
关注
自学前端第二十九天 CSS高级之细节技巧
weixin_47592060的博客
03-14 357
css高级细节技巧 一.background-color :属性设置元素的背景颜色。 定义和用法 background-color 属性设置元素的背景颜色。 元素背景的范围 background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。 transparent 值 (让背景色透明) 尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素
《我要自学网》——DW CS5 摘要
时缔&实验室
02-08 2175
学习摘要： 插入：空格符、水平线(属性改变参数)、版权字符 编辑：首选参数-多个空格符 取样，减小图片数据 编辑图像设置：修改清晰度与大小，及格式 鼠标经过图像，可创建导航条 超链接：内部，self-当前打开； blank-每个链接会创建新窗口；(点一次出一次) new-同一刚创建窗口打开；(同类时只打开唯一) parent-嵌套框架则在父框架中打开； top-在完整的浏览
iFrameAutoSize:用于创建自动调整大小的 iFrame 的 JavaScript 库，即使它们来自不同的域
06-08
iFrame自动调整大小 用于创建自动调整大小的 iFrame 的 JavaScript 库，即使它们来自不同的域 用法： :
iframe 的自动大小调整
怡红快绿
09-28 745
<br />js实现自动调整大小的iframe<br /><IFRAME width="20%" name="test1" onload="document.all('test1').style.height=test1.document.body.scrollHeight;" src="1.htm" frameborder= "0" scrolling="no"></IFRAME><br /> <br /> <br />iframe自动调整大小<br /><script><br />var myI,myW
嵌入到HTML的iframe自动适应大小
03-19
让嵌入到HTML的iframe自动适应大小
iframe根据子页面自动调整大小（两种方法）
qq_43096062的博客
08-05 1万+
iframe根据子页面自动调整大小（两种方法）（第一种）（第二种） 很多人估计会遇到这样的情况，在IFrame嵌入某些页面，总会出现滚动条，那么有没方法，可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢？答案是肯定的，经过查找，发现了两种方法，大家直接引用就好 （第一种） 在要嵌入的页面添加js： //iframe高度自适应 　　function IFrameReSize(if...
html ifream触发全屏,IFrame自适应大小（全屏已实现）
weixin_42514640的博客
06-18 538
近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。经反复实现，如下代码可实现：iframe全屏测试body { margin: 0px; }iframe {border: 0px;}style="margin-top: -4px;" onload="t...
程序天下:JavaScript实例自学手册
07-08
1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面...
基于HTML模拟系统自动报告生成技术的研究与开发[开题报告]
shenyanwen的studio
04-17 4298
开题报告 一、课题题目     基于HTML模拟系统自动报告生成技术的研究与开发 二、课题内容及任务要求本课题的主要目的是自动生成HTML格式的分析报告文档： 1.对华铸CAE数据可以自动获取       2.自动生成HTML文件       3.开发出完善的HTML自动生成软件系统三、国内外研究现状现以国内国外两家公司的CAE软件的介绍来引入该课题
iframe自适应屏幕大小
最新发布
小P孩的博客
12-19 477
iframe自适应屏幕大小
设置Iframe窗体大小
weixin_33881753的博客
01-20 725
//在子窗体中，子窗体操作父窗体元素　‘loadimg’为父窗体元素编号  parent.document.getElementById('loadimg').style.display='none'; //在子窗体中，设置父窗体的IFrame的高和宽 parent.document.getElementsByTagName('iframe')[0].height=document.body....
iframe嵌入网页时，页面大小怎么自适应
五花漏的博客
02-24 3万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
让iframe自适应大小 解决方案
热门推荐
小马的专栏
11-13 3万+
 第一种：        onload="this.height =   document.frames[src].document.body.scrollHeight" />例子：1，创建页面 test.html 。 页面中含有一个 iframe，name为 ifrname ，id为 ifrid， src 为 iframe.html页面。  scrolling="">
iframe高度宽度自适应
m0_38082271的博客
02-01 1万+
最近在项目中用到了iframe，写出来做个记录，能帮到大家最好。一.首先简单介绍一下iframe     iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。    所有浏览器都支持 &lt;iframe&gt; 标签。二.页面引用&lt;iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" widt...
Iframe用法的详细讲解(属性、透明、自适应高度)和html中滚动条属性设置
惜忆隐蝶
11-30 1万+
Iframe 用法的详细讲解和html中滚动条属性设置 scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条）     overflow-x水平方向内容溢出时的设置     overflow-y垂直方向内容溢出时的设置     以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2． scroll
拖拽改变iframe大小
崇尚狼性的专栏
03-16 5299
     拖拽改变iframe大小     var isIe = true;       if(!document.all)       {           isIe = false;          }      function downToResize(obj,e){        obj.style.cursor=col-resize;           var e = isI
网页制作入门指南：自学PDF教程详解
网页制作自学PDF教程提供了一个循序渐进的学习路径，旨在帮助初学者理解并掌握网页制作的基础知识和技能。该教程的第一部分主要关注网页的构成和工作原理，强调了HTML语言的重要性。以下为详细知识点： 1. **网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值