移動端使用iframe碰到的那些坑

2022-09-15 17:51:08 字數 478 閱讀 8533

這裡簡單談一下移動端h5程式設計中碰到的iframe的bug,具體詳述如下:

在專案中,我主要使用iframe做彈出層,在iframe的外部放一層div,控制這個div,通過刪除或追加div來決定是否使用iframe,iframe外層包div的做法也是很多部落格裡提倡用的做法。

頁面結構如下:

樣式如下:

.iframe_pop_wrap

.iframe_pop_wrap iframe

在demo_iframe.html頁面中頁面布局如下:

html

body

在此之後,我發現頁面的內容出現了。

當然在解決這個問題的過程中,我和同事商量也找到了一種用於替換iframe的方法,只需要做樣式的隔離即可。

使用ajax方式請求乙個div內部內容,這個div內部內容只要不含有,這三者即可。

$.ajax(

});

至此,結束

移動端中iframe縮放

問題 於此,需在移動端頁面中嵌入iframe頁面,如下圖。iframe頁面屬於pc頁面,無視口縮放,而移動端頁面有視口縮放 iframe頁面受此影響,也會出現放大問題 取消預約 重新預約 取消預約 重新預約 解決以上問題,可考慮引入transform的scale,在iframe載入完成後獲取其寬高,...

iframe標籤在PC端的使用

隨著前端框架的崛起 各種元件化 模組化開發 然而我發現在pc端要考慮相容 自己琢磨著 在pc端怎麼吧乙個頁面做成乙個公共的部分 發現有個iframe標籤可以在頁面中巢狀 用法就是這麼簡單 需要乙個需要乙個src頁面位址 frameborder設定iframe邊框為空 scrolling清除滾動條 我...

移動端rem使用

1 移動端設計圖750時,html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫,設計圖為750px時,頁面標註大小除以100即可,例如 設計圖標註的是,寬300px,高300px。使用rem就是,widt...