iframe自适应高度

为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。

首先设置样式

body{margin:0; padding:0;}

如果不设置body的margin和padding为0的话,页面上下左右会出现空白。

html代码如下

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>

下面就是今天小编写的时候遇到的问题,考虑到有些朋友可能没怎么用jquery就直接用js吧。

方法一

var ifm= document.getElementById("myiframe");

ifm.height=document.documentElement.clientHeight;

这个方法可以达到让iframe自适应高度的效果,但是如果你将窗口放大或缩小效果就不出来了,也就是本文开头讲的。需要再次刷新,那就不属于自适应了。

那么问题来了,需要解决当窗口改变大小的时候执行js事件,以让iframe自适就高度。那么就需要将相关的代码写成函数,并且给iframe加上onLoad="changeFrameHeight()",也就是下面的方法二了。

方法二

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" οnlοad="changeFrameHeight()" frameborder="0"></iframe>

js代码也得跟着改

function changeFrameHeight(){
    var ifm= document.getElementById("iframepage"); 
    ifm.height=document.documentElement.clientHeight;

}

window.οnresize=function(){  
     changeFrameHeight();  

window.onresize的作用就是当窗口大小改变的时候会触发这个事件。

所以,使用方法二就可以完美的、真正的让iframe自适应高度了,试试看吧,并且兼容多种浏览器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.Net转Java自学之路—SpringMVC框架篇八(RESTful支持)

RESTful架构&#xff0c;REST即Representational State Transfer。表现层状态转换&#xff0c;就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便&#xff0c;所以得到越来越多网站的采用。 RESTful其实就是一个开发理念&#xff0c;是对http的很…

冲刺第七天

今天任务进行情况&#xff1a;今天我们将我们的游戏导到界面形成可用的应用程序&#xff0c;并且进行调试与运行&#xff0c;让同学试玩&#xff0c;发现了困难并加以改正。 遇到的困难及解决方法&#xff1a; 运行时发现游戏界面中UI的button和image的位置会随分辨率的不同而发…

数据探查_数据科学家,开始使用探查器

数据探查Data scientists often need to write a lot of complex, slow, CPU- and I/O-heavy code — whether you’re working with large matrices, millions of rows of data, reading in data files, or web-scraping.数据科学家经常需要编写许多复杂&#xff0c;缓慢&…

Node.js Streams:你需要知道的一切

Node.js Streams&#xff1a;你需要知道的一切 图像来源 Node.js流以难以使用而闻名&#xff0c;甚至更难理解。好吧&#xff0c;我有个好消息 - 不再是这样了。 多年来&#xff0c;开发人员在那里创建了许多软件包&#xff0c;其唯一目的是简化流程。但在本文中&#xff0c;我…

oracle表分区

1.表空间:是一个或多个数据文件的集合,主要存放的是表,所有的数据对象都存放在指定的表空间中;一个数据文件只能属于一个表空间,一个数据库空间由若干个表空间组成,其中包括:a.系统表空间:10g以前,默认系统表空间是System,10g包括10g以后,默认系统表空间是User,存放数据字典和视…

oracle异机恢复 open resetlogs 报:ORA-00392

参考文档&#xff1a;ALTER DATABASE OPEN RESETLOGS fails with ORA-00392 (Doc ID 1352133.1) 打开一个克隆数据库报以下错误&#xff1a; SQL> alter database open resetlogs; alter database open resetlogs * ERROR at line 1: ORA-00392: log 1 of thread 1 is being…

从ncbi下载数据_如何从NCBI下载所有细菌组件

从ncbi下载数据One of the most important steps in genome analysis is gathering the data required for downstream research. This sometimes requires us to have the assembled reference genomes (mostly bacterial) so we can verify the classifiers trained or bins …

shell之引号嵌套引号大全

万恶的引号 这个能看懂你就出师了! 转载于:https://www.cnblogs.com/theodoric008/p/10000480.html

oracle表分区详解

oracle表分区详解 从以下几个方面来整理关于分区表的概念及操作: 表空间及分区表的概念表分区的具体作用表分区的优缺点表分区的几种类型及操作方法对表分区的维护性操作 1.表空间及分区表的概念 表空间&#xff1a; 是一个或多个数据文件的集合&#xff0c;所有的数据对象都存…

线性插值插值_揭秘插值搜索

线性插值插值搜索算法指南 (Searching Algorithm Guide) Prior to this article, I have written about Binary Search. Check it out if you haven’t seen it. In this article, we will be discussing Interpolation Search, which is an improvement of Binary Search when…

其他命令

keys *这个可以全部的值del name 这个可以删除某个127.0.0.1:6379> del s_set(integer) 1127.0.0.1:6379> keys z*&#xff08;匹配&#xff09;1) "z_set2"2) "z_set"127.0.0.1:6379> exists sex(integer) 0 127.0.0.1:6379> get a"3232…

建按月日自增分区表

一、建按月自增分区表&#xff1a; 1.1建表SQL> create table month_interval_partition_table (id number,time_col date) partition by range(time_col)2 interval (numtoyminterval(1,month))3 (4 partition p_month_1 values less than (to_date(2014-01-01,yyyy-mm…

#1123-JSP隐含对象

JSP 隐含对象 JSP隐含对象是JSP容器为每个页面提供的Java对象&#xff0c;开发者可以直接使用它们而不用显式声明。JSP隐含对象也被称为预定义变量。 JSP所支持的九大隐含对象&#xff1a; 对象&#xff0c;描述 request&#xff0c;HttpServletRequest类的实例 response&#…

按照时间,每天分区;按照数字,200000一个分区

按照时间&#xff0c;每天分区 create table test_p(id number,createtime date) partition by range(createtime) interval(numtodsinterval(1,day)) store in (users) ( partition test_p_p1 values less than(to_date(20140110,yyyymmdd)) ); create index index_test_p_id …

如果您不将Docker用于数据科学项目,那么您将生活在1985年

重点 (Top highlight)One of the hardest problems that new programmers face is understanding the concept of an ‘environment’. An environment is what you could say, the system that you code within. In principal it sounds easy, but later on in your career yo…

jmeter对oracle压力测试

下载Oracle的jdbc数据库驱动包&#xff0c;注意Oracle数据库的版本&#xff0c;这里使用的是&#xff1a;Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - 64bit Production&#xff1b; 一般数据库的驱动包文件在安装路径下&#xff1a;D:\oracle\product\10.2.…

集合里面的 E是泛型 暂且认为是object

集合里面的 E是泛型 暂且认为是object转载于:https://www.cnblogs.com/classmethond/p/10011374.html

docker部署flask_使用Docker,GCP Cloud Run和Flask部署Scikit-Learn NLP模型

docker部署flaskA brief guide to building an app to serve a natural language processing model, containerizing it and deploying it.构建用于服务自然语言处理模型&#xff0c;将其容器化和部署的应用程序的简要指南。 By: Edward Krueger and Douglas Franklin.作者&am…

异常处理的原则

1&#xff1a;函数内部如果抛出需要检测的异常&#xff0c;那么函数上必须要声明&#xff0c;否则必须在函数内用try catch捕捉&#xff0c;否则编译失败。2&#xff1a;如果调用到了声明异常的函数&#xff0c;要么try catch 要么throws&#xff0c;否则编译失败。3&#xff…

模块化整理

#region常量#endregion#region 事件#endregion#region 字段#endregion#region 属性#endregion#region 方法#endregion#region Unity回调#endregion#region 事件回调#endregion#region 帮助方法#endregion来自为知笔记(Wiz)转载于:https://www.cnblogs.com/soviby/p/10013294.ht…