今 天要在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的幾個屬性值 瀏覽器總在乙個新開啟 未命名的視窗中載入目標文件。這個目標的值對...