問題在于，當(dāng)您必須使用IFrame將內(nèi)容插入網(wǎng)站時(shí)，那么在現(xiàn)代網(wǎng)絡(luò)世界中，預(yù)計(jì)IFrame也會(huì)響應(yīng)。從理論上講，它很簡單，只需要使用<iframe width="100%"></iframe>或設(shè)置CSS寬度，iframe { width: 100%; }但在實(shí)踐中它并不是那么簡單，但它可以。如果iframe內(nèi)容完全響應(yīng)并且可以在沒有內(nèi)部滾動(dòng)條的情況下自行調(diào)整大小，那么iOS Safari將調(diào)整大小而iframe沒有任何實(shí)際問題。如果您考慮以下代碼：<html><head> <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Iframe Isolation Test</title> <style type="text/css" rel="stylesheet"> #Main { padding: 10px; } </style></head><body> <h1>Iframe Isolation Test 13.17</h1> <div id="Main"> <iframe height="950" width="100%" src="Content.html"></iframe> </div></body></html>使用Content.html：<html><head> <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Iframe Isolation Test - Content</title> <style type="text/css" rel="stylesheet"> #Main { width: 100%; background: #ccc; } </style></head>然后這在iOS 7.1 Safari中沒有問題。您可以在橫向和縱向之間切換而不會(huì)出現(xiàn)任何問題在此輸入圖像描述 在此輸入圖像描述但是，只需通過添加以下內(nèi)容來更改Content.html CSS： #ScrolledArea { width: 100%; overflow: scroll; white-space: nowrap; background: #ff0000; }你得到這個(gè)：在此輸入圖像描述 在此輸入圖像描述正如您所看到的，即使Content.html內(nèi)容完全響應(yīng)（div＃ScrolledArea已overflow: scroll設(shè)置）且iframe寬度為100％，iframe仍然占用div＃ScrolledArea的整個(gè)寬度，就好像溢出甚至不存在一樣。演示在這種情況下，如果iframe內(nèi)容上有滾動(dòng)區(qū)域，問題就變成了iframe，當(dāng)iframe內(nèi)容具有水平滾動(dòng)區(qū)域時(shí)，如何獲得響應(yīng)？這里的問題不在于Content.html沒有響應(yīng)，而是因?yàn)閕OS Safari只是調(diào)整iframe的大小，以便div#ScrolledArea完全可見。
3 回答
揚(yáng)帆大魚
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
我需要一個(gè)跨瀏覽器的解決方案。要求是：
需要在iOS和其他地方工作
無法訪問iFrame中的內(nèi)容
需要它滾動(dòng)！
建立我從@Idra學(xué)到的有關(guān)iOS上滾動(dòng)=“否”的內(nèi)容以及關(guān)于在iOS中將iFrame內(nèi)容擬合到屏幕的帖子，這就是我最終的結(jié)果。希望它可以幫助某人=）
HTML
<div id="url-wrapper"></div>
CSS
html, body{
height: 100%;
}
#url-wrapper{
margin-top: 51px;
height: 100%;
}
#url-wrapper iframe{
height: 100%;
width: 100%;
}
#url-wrapper.ios{
overflow-y: auto;
-webkit-overflow-scrolling:touch !important;
height: 100%;
}
#url-wrapper.ios iframe{
height: 100%;
min-width: 100%;
width: 100px;
*width: 100%;
}
JS
function create_iframe(url){
var wrapper = jQuery('#url-wrapper');
if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
wrapper.addClass('ios');
var scrolling = 'no';
}else{
var scrolling = 'yes';
}
jQuery('<iframe>', {
src: url,
id: 'url',
frameborder: 0,
scrolling: scrolling
}).appendTo(wrapper);
}
添加回答
舉報(bào)
0/150
提交
取消