如何在 Mobile Safari 中啟用滾動並控制 iFrame 尺寸？

克服Mobile Safari 中的iFrame 顯示挑戰

嘗試將iFrame 合併到行動Web 應用程式中時，在以下方面遇到困難並不罕見：控制其尺寸並在其中啟用滾動。

約束尺寸

與預期相反，單獨設定 iFrame 元素的高度和寬度屬性不會將其尺寸限制在 iPhone 螢幕上。相反，將其包含在 div 元素中可以實現有效的尺寸限制。

啟用滾動功能

但是，引入 div 約束會停用 iFrame 內的滾動。要解決此問題，可以採取以下步驟：

在iframe 內容中：

• 實作與父視窗通訊以啟動捲動的JavaScript 函數基於觸控事件。

父視窗（在iframe):

• 將 JavaScript 程式碼插入 iframe 內容。
• 定義一個可捲動的 div 來包圍 iFrame。當偵測到觸控事件時，計算滾動位置調整並相應地更新 div 的scrollTop或scrollLeft屬性。

範例程式碼：

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中文網其他相關文章！