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.pswp.cn/news/387925.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/387925.shtml
英文地址,請注明出處:http://en.pswp.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…