克服Mobile Safari 中的iFrame 顯示挑戰
嘗試將iFrame 合併到行動Web 應用程式中時，在以下方面遇到困難並不罕見：控制其尺寸並在其中啟用滾動。
約束尺寸
與預期相反，單獨設定 iFrame 元素的高度和寬度屬性不會將其尺寸限制在 iPhone 螢幕上。相反，將其包含在 div 元素中可以實現有效的尺寸限制。
啟用滾動功能
但是，引入 div 約束會停用 iFrame 內的滾動。要解決此問題，可以採取以下步驟：
在iframe 內容中：
父視窗（在iframe):
範例程式碼：
JavaScript （內嵌框架content):
setTimeout(function() {
var startY = 0, startX = 0;
var b = document.body;
b.addEventListener('touchstart', function(event) {
parent.window.scrollTo(0, 1); // Trigger parent scrolling.
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function(event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);HTML（父視窗）：
<div>
此方法允許在Mobile 中的iFrame 內約束尺寸和滾動Safari。
iOS 6 更新註意：
值得注意的是，由於平台的變化，此解決方案可能不適用於 iOS 6。遠端 Web 檢查器也不再可用，這使得在裝置上偵錯 JavaScript 問題變得具有挑戰性。
以上是如何在 Mobile Safari 中啟用滾動並控制 iFrame 尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
