iframe在ipad safari的顯示

2022-03-27 22:33:00 字數 1526 閱讀 2668

今 天要在web中巢狀乙個**或本地html,用到了iframe,在電腦上設定scrolling=『auto』,寬度高度,會有滾動條出現。而在 ipad上會全部顯示整個網頁的寬度高度。scrolling屬性無效。原來在html5中的iframe已經只有剩下src的屬性。 

但是若設定scrolling=『no』.還是會生效的。頁面只顯示定義的高度和寬度的大小。設定overflow:hidden都沒用。 

怎麼讓ipad safari 中的iframe的內容在固定大小中可滾動? 

網上說要用seamless屬性。直接寫個seamless。但是這個屬性ipad的safari不支援。chrome是支援的。 

ie6 – windows: no support 

ie7 – windows: no support 

ie8 – windows – windows: no support 

ie9 beta – windows: no support 

firefox 3.6 – windows: no support 

firefox 3.6 – osx: no support 

firefox 4.0 – beta windows: no support 

firefox 4.0 – beta osx: no support 

safari osx: no support 

chrome 7 – windows: no support 

chrome 7 – windows: no support 

chrome 9 – osx: no support 

opera 11 – osx: no support 

測試例子: 

所以以上方法都無法解決ipad safari中iframe滾動的問題。 

解決辦法: 

在iframe外加一層div,設定樣式-webkit-overflow-scrolling:touch; overflow: scroll; 

讓超出div的內容可以通過touch來滾動。 

另外,如果iframe的src不是**,而是本地的html,則需要給html的dom新增監聽事件,讓html的body可以監聽到touch事件,讓巢狀的html也可以滾動。

var toscrollframe = function(iframe, mask) );  

//update scroll position based on initial drag position

jquery(iframe).contents()[0].body.addeventlistener('touchmove', function(e) );

});

return true;

};

toscrollframe('.myframe', '.mymask');

最終**

header - use 2 fingers to scroll contents:

參考:   

在iframe外部給iframe新增錨點

錨點的操作是實現類似於word的導航欄的功能的基本思路 當前頁面使用錨點的話可以使用 1.html的的方式來實現 設定錨 ahref mao rel external nofollow nsbp 設定點 為了瀏覽器相容性,id和name一起設定 aid mao name mao 跳至第乙個錨點 2....

在iframe中獲取本iframe DOM引用

window.frameelement 獲取本iframe dom window.frameelement.contentdocument.getelementbyid id 獲取這個iframe中的元素 晚上寫3 9 blocked a frame with origin null from ac...

在iframe(框架)中跳轉的問題

在iframe中跳轉會出現這樣的問題,就是比如乙個頁面包含兩個iframe,而其中乙個要跳轉到乙個頁面,則這個跳轉如果不加處理會導致跳轉失敗。原因就是這個iframe包含的介面在跳轉,這時就會出錯。這時需要了解target的幾個屬性值 瀏覽器總在乙個新開啟 未命名的視窗中載入目標文件。這個目標的值對...