首先要明白iframe的應用場景,iframe並不是不能用,而是不能濫用。
在數據提交上iframe相比ajax能夠提供更高的穩定性以及兼容度,因此在這方麵使用一下無妨;
同時iframe的作用是內嵌網頁,如果需要引用別的網頁做說明,iframe也是必要的。
但是,利用內嵌網頁的方式引入固定的內容是完全錯誤地!雖(sui)然(ran)現(xian)在(zai)很(hen)多(duo)開(kai)源(yuan)程(cheng)序(xu)的(de)後(hou)台(tai)仍(reng)在(zai)使(shi)用(yong)這(zhe)種(zhong)做(zuo)法(fa),這(zhe)不(bu)過(guo)是(shi)開(kai)發(fa)者(zhe)偷(tou)懶(lan)的(de)手(shou)段(duan)而(er)已(yi),在(zai)前(qian)台(tai)應(ying)用(yong)中(zhong)應(ying)極(ji)力(li)避(bi)免(mian)這(zhe)種(zhong)做(zuo)法(fa),無(wu)論(lun)是(shi)對(dui)用(yong)戶(hu)還(hai)是(shi)對(dui)搜(sou)索(suo)引(yin)擎(qing)的(de)友(you)好(hao)度(du)這(zhe)種(zhong)做(zuo)法(fa)都(dou)是(shi)極(ji)傻(sha)。
回到問題來,題主你竟然不知道可以通過後端引入公用模塊的方式讓頁麵某一區域內容固定!!!將導航欄的內容抽離成一個模板,通過後端引入再和本頁的內容拚接輸出,這是後端新手都應該懂的常識來的吧←_←
使(shi)用(yong)後(hou)端(duan)引(yin)入(ru)的(de)話(hua),每(mei)次(ci)頁(ye)麵(mian)打(da)開(kai)導(dao)航(hang)區(qu)和(he)內(nei)容(rong)區(qu)都(dou)是(shi)一(yi)並(bing)加(jia)載(zai)的(de),實(shi)現(xian)的(de)效(xiao)果(guo)和(he)你(ni)在(zai)每(mei)個(ge)頁(ye)麵(mian)都(dou)複(fu)製(zhi)一(yi)個(ge)導(dao)航(hang)區(qu)是(shi)一(yi)樣(yang)的(de)。隻(zhi)是(shi)在(zai)代(dai)碼(ma)上(shang)文(wen)件(jian)被(bei)拆(chai)分(fen)方(fang)便(bian)管(guan)理(li)而(er)已(yi)。請(qing)不(bu)要(yao)在(zai)意(yi)每(mei)次(ci)都(dou)要(yao)重(zhong)新(xin)加(jia)載(zai)導(dao)航(hang)區(qu),那(na)一(yi)點(dian)代(dai)碼(ma)產(chan)生(sheng)的(de)帶(dai)寬(kuan)資(zi)源(yuan)占(zhan)用(yong)和(he)你(ni)頁(ye)麵(mian)上(shang)的(de)圖(tu)片(pian)以(yi)及(ji)JQ庫比起來算不了什麼。
題主想的方式是使用ajax讀取每個頁麵的內容並填充到內容區。這麼做並無不妥,但是做法也忒蛋疼了點,還不如直接用iframe引用導航欄。ajax是不應該被濫用,在一些交互上使用ajax避免頁麵整體刷新減少請求量是一種很方便的做法,但是頁麵切換也用ajax那就是2B做法了。
至於高度自適應的問題,可以通過JS來做,在頁麵ready的時候判斷內容區元素的高度是否未填充滿,不滿則設置到$(window).height()。