關(guān)于iframe嵌套的html高度自適應(yīng)的信息
= hash_widthb_ = hash_heightltscriptagenthtml從URL中獲得寬度值和高度值,并設(shè)置iframe的高度和寬度因?yàn)閍genthtml在下,所以操作ahtml時(shí)不受JavaScript的同源限制。
ltiframe id=quotfrmquot src=quot要加載的頁(yè)面地址quot onload=quotresizequotltiframe 如此一來(lái),iframe的高度就會(huì)隨你加載的HTML頁(yè)面的高度而變化,不會(huì)出現(xiàn)滾動(dòng)條。
所謂iframe自適應(yīng)高度,就是,基于界面美觀和交互的考慮,隱藏了iframe的border和scrollbar,讓人看不出它是個(gè)iframe如果iframe始終調(diào)用同一個(gè)固定高度的頁(yè)面,我們直接寫(xiě)死iframe高度就可以了而如果iframe要切換頁(yè)面,或者被包含頁(yè)面要做DOM動(dòng)態(tài)操作,這時(shí)候,就需要程序去同步iframe高度和被包含頁(yè)的實(shí)際。
幾個(gè)辦法,一是在iframe onload的時(shí)候計(jì)算并設(shè)置iframe高度,另一個(gè)是定期運(yùn)行js函數(shù)來(lái)檢查并設(shè)置iframe高度,有篇文章不錯(cuò)?p=243,可以看一下下面是定期運(yùn)行的JS函數(shù)的代碼,ie下測(cè)試有效ltiframe id=quotframe_contentquot src=quothtml_draghtmlquot scrolling=quotnoquot frameborde。
index”一個(gè)“iframe”2然后在index中添加一個(gè)iframe標(biāo)簽,直接嵌入iframe頁(yè)面3接著在iframe網(wǎng)頁(yè)中添加了兩個(gè)固定高度的div內(nèi)容4瀏覽器打開(kāi)index頁(yè)面,發(fā)現(xiàn)iframe部分有滾動(dòng)條,需要滾動(dòng)顯示頁(yè)面5現(xiàn)在在index頁(yè)面的iframe標(biāo)簽再添加如下的屬性再次打開(kāi)index頁(yè)面iframe已經(jīng)高度自適應(yīng)了。
高度自適應(yīng)可以用Javascript 你每個(gè)iframe為一個(gè)單獨(dú)的頁(yè)面,只需在每個(gè)單獨(dú)的頁(yè)面中l(wèi)thead與lthead之間加入如下代碼即可實(shí)現(xiàn)firame高度的自適應(yīng)ltscript type=quottextjavascriptquot function setWindowSize iframe自動(dòng)本窗口高度 try var thiswin = window。
采用JavaScript來(lái)控制iframe元素的高度是iframe高度自適應(yīng)的關(guān)鍵,同時(shí)由于JavaScript對(duì)不同域名下權(quán)限的控制,引發(fā)出同域跨域兩種情況由于客戶(hù)端js使用瀏覽器的同源安全策略,跨域情況下,被嵌套頁(yè)面如果想要獲取和修改父頁(yè)面的DOM屬性會(huì)出現(xiàn)權(quán)限不足的情況,提示錯(cuò)誤Permission denied to access property #39。
function iframeStockPoolHistoryViewRecPoolGoGoGowidth,height var appSubIframeObj=documentgetElementByIdquotstockPoolHistoryViewRecPoolquot=height+quotpxquot ltscript lthead ltbody lttable lttr lttd ltiframe id=quotstockPoolHistoryViewRecPoolquotltiframe。
ltiframe src=quotindexhtmlquot style=quotwidth 400px height 300pxquotltiframe 通過(guò)CSS,你可以更加靈活地根據(jù)網(wǎng)頁(yè)設(shè)計(jì)調(diào)整iframe的高度需要注意的是,iframe還有其他屬性可以配置,但上述方法是設(shè)置高度最常用的方式記得在實(shí)際應(yīng)用中,要確保iframe的高度和寬度設(shè)置與嵌入內(nèi)容的尺寸相適應(yīng),以保持良好。
一iframe 元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架即行內(nèi)框架二有以下方式對(duì)iframe進(jìn)行設(shè)置高度和寬度 1iframe元素標(biāo)簽可以使用width和height屬性,ltiframe src =quotindexhtmlquot width=quot400quot height=quot300quotltiframe 2可以使用css來(lái)定義寬度和高度 ltiframe src =quotindexhtmlquot style=quot。
尊敬的用戶(hù),您好很高興為您答疑這是因?yàn)槟捻?yè)面展開(kāi)時(shí)依然獲取的是帶有書(shū)簽工具欄的窗口高度,導(dǎo)致iframe內(nèi)的內(nèi)容誤判建議您試一試此時(shí)修改一次窗口大小是否可以解決該問(wèn)題,如果可以,不妨模擬一次放大縮小窗口的操作,來(lái)實(shí)現(xiàn)窗口高度的自適應(yīng)希望我的回答對(duì)您有所幫助,如有疑問(wèn),歡迎繼續(xù)咨詢(xún)我們。
可以用jQuery獲取到當(dāng)前的窗口的寬度,來(lái)計(jì)算iframe的寬和高,示例代碼如下ltiframe src=quot frameborder=quot0quot id=quotdemoquotltiframeltscript src=quot90 type=quottextjavascriptquotltscriptltscript$documentready。
并將其直接嵌入到iframe頁(yè)面中3將兩個(gè)具有固定高度的div內(nèi)容添加到iframe頁(yè)面4當(dāng)瀏覽器打開(kāi)索引頁(yè)時(shí),我們發(fā)現(xiàn)在iframe的部分有一個(gè)滾動(dòng)條,需要滾動(dòng)才能顯示頁(yè)面跟蹤5現(xiàn)在,我們將以下屬性添加到索引頁(yè)上的iframe標(biāo)記6再次打開(kāi)索引頁(yè)iframe對(duì)內(nèi)容的大小具有很強(qiáng)的適應(yīng)性,如下圖所示。
方法二通過(guò)JavaScript引入可以動(dòng)態(tài)加載并替換頁(yè)面元素,適用于復(fù)雜交互場(chǎng)景但需確保JavaScript兼容性方法三使用ltiframe標(biāo)簽引入另一HTML文件此法僅適用于靜態(tài)頁(yè)面,高度不會(huì)自動(dòng)適應(yīng)需要頁(yè)面加載完成之后獲取頁(yè)面高度,再替換iframe的高度實(shí)現(xiàn)高度自適應(yīng)方法四使用ltembed標(biāo)簽此標(biāo)簽不常用。
將多個(gè)html頁(yè)面里引進(jìn)相同的一個(gè)頭部頁(yè)面的方法如下1 iframe 包含法頁(yè)頭和頁(yè)尾分別做成一個(gè)頁(yè)面,然后通過(guò)iframe嵌入到調(diào)用的頁(yè)面這種方法在頁(yè)頭頁(yè)尾高度固定的時(shí)候比較適用,因?yàn)楫?dāng)頁(yè)頭頁(yè)尾高度不固定時(shí),需要iframe根據(jù)頁(yè)面內(nèi)容自適應(yīng)高度,比較麻煩簡(jiǎn)單代碼結(jié)構(gòu)示例lthtml lthead lttitle頁(yè)面。
因?yàn)閕frame 有個(gè)默認(rèn)高 好像記得是150 還是300的 你要在頁(yè)面里面用iframe 最好做到iframe自適應(yīng)子頁(yè)面的高度 像你這個(gè)情況 建議不要用iframe寫(xiě) 后臺(tái)語(yǔ)言可以做成一個(gè)通用的頭部再引用除非是內(nèi)容特別多,想實(shí)現(xiàn)前端這樣引入 最好用jquery load。
你可以試試,讓iframe的高度等于他引用頁(yè)的body高度,這樣iframe就不會(huì)出滾動(dòng)條了,把div的高度設(shè)置成固定,并且當(dāng)內(nèi)容多于div高度時(shí),自動(dòng)出滾動(dòng)條不好意思,代碼沒(méi)有實(shí)現(xiàn)。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。