vấn đề cuộn với ExtJS 5 ứng dụng bên IFrame

Hỷ,vấn đề cuộn với ExtJS 5 ứng dụng bên IFrame

đây là những gì trang thử nghiệm của tôi trông giống như:

enter image description here

Vùng màu xanh là trang mẹ và diện tích cây xanh là một IFrame mà chạy một ứng dụng ExtJS (khung nhìn đơn giản với một nhãn bên trong).

Nếu trang web được thực thi trên thiết bị cảm ứng (IPad, Android Tablet v.v.), bạn không thể cuộn trang bằng cách "xóa" trên khung nội tuyến (vùng màu xanh lục). Người ta phải lau trên khu vực màu xanh để cuộn trang.

Điều này đã hoạt động chính xác trong ExtJS v4.2.1 (xem các liên kết bên dưới).

Test-Sites:

https://skaface.leo.uberspace.de/ScrollTest/Ext510/ (không làm việc như mong đợi, sử dụng ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ (làm việc như mong đợi, cùng một mã nhưng sử dụng ExtJS v4.2.1)

Các mã kiểm tra: trang web

Chánh (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
</head> 
<body style="margin: 50px; background-color: blue;"> 
    <iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe> 
</body> 
</html>

IFrame (frame.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" /> 
    <script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script> 

    <script type="text/javascript"> 
     Ext.onReady(function() { 
      Ext.create('Ext.container.Viewport', { 
       style: { 'background-color': 'yellowgreen' }, 
       layout: 'fit', 
       items: [{ 
        xtype: 'label', 
        text: 'Ext version: ' + Ext.versions.extjs.version, 
        margin: 16 
       }] 
      }); 
     }); 
    </script> 
</head> 
<body> 
</body> 
</html>

Tôi thực sự đánh giá cao giải pháp này vì nó thực tế làm cho trang web của tôi vô dụng trên thiết bị di động mặc dù chúng hoạt động hoàn toàn tốt với ExtJS 4.2.1.

Cảm ơn & Trân

PS .: Tôi đã gửi một báo cáo lỗi in the sencha forums, nhưng kể từ khi tôi đã không nhận được bất kỳ sự giúp đỡ đó cho đến khi bí quyết, tôi cũng đang cố gắng may mắn của tôi trên stackoverflow ...

Nguồn

2015-07-03 suamikim

[Sự kiện và cử chỉ được ủy quyền trong Ext JS 5] (https://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5/) – davidcondrey

Tại sao bạn không thể loại bỏ các thùng chứa bên ngoài hoàn toàn và chỉ hiển thị nội dung bên trong trực tiếp, sử dụng một padding 50px trên cơ thể hoặc tương tự? – BoffinbraiN

@davidcondrey Cảm ơn bạn đã liên kết, tôi sẽ xem xét nó vào tuần tới. – suamikim

Sau rất nhiều đào bới xung quanh bên trong khuôn khổ, cuối cùng tôi đã tìm thấy một giải pháp mà ít nhất làm việc cho tôi và bao gồm 2 bước sau:

1) ExtJS đặt thuộc tính CSS touch-action của chế độ xem (phần tử html cơ bản của IFrame) và phần thân của nó với giá trị none. Tôi chỉ đơn giản là ghi đè nó với giá trị auto:

.x-viewport, .x-viewport > .x-body { 
    touch-action: auto; 
}

2) Lớp Ext.container.Viewport cuộc gọi Ext.plugin.Viewport.decorate(this); trong đó là tạo ra gọi lại, có thêm một người biết lắng nghe sự kiện touchmove của khung nhìn riêng của mình.

Mọi thứ mà người nghe thực hiện đang gọi preventDefault(); của sự kiện, đó là lý do tại sao cuộn không hoạt động nữa trên trang chính hoặc chính IFrame. sửa chữa của tôi chỉ đơn giản là loại bỏ các preventDefault() và thay vào đó trả về false từ handler touchmove kiện để cho các bong bóng sự kiện lên chuỗi trình duyệt:

Ext.define('Cbn.overrides.container.Viewport', { 
    override: 'Ext.container.Viewport' 
}, function() { 
    Ext.override(this, { 
     onRender: function() { 
      this.mon(Ext.getDoc(), { 
       touchmove: function(e) { 
        // e.preventDefault(); // Original ExtJS code 
        return false; 
       }, 
       translate: false, 
       delegated: false 
      }); 
      this.callParent(arguments); 
     } 
    }); 
});

Tôi không hoàn toàn chắc chắn nếu những 2 sửa có bất kỳ tác động tiêu cực nhưng cho đến nay họ dường như làm công việc cho tôi.

Một điều tôi đã nhận ra là sử dụng các thành phần có cấu hình scrollable: true bên trong IFrame-App vẫn làm cho vấn đề nhưng kể từ khi tôi có thể tránh điều đó khá nhiều ở khắp mọi nơi đó là không có vấn đề đối với tôi cho đến nay ...

thử nghiệm làm việc -site: https://skaface.leo.uberspace.de/ScrollTest/Ext510_fixed/

Edit:
giải pháp điều chỉnh một chút để không ngừng ném unhandled lỗi JavaScript trong cảm ứng di chuyển (xem Error: Failed to execute 'dispatchEvent' on 'EventTarget')

Nguồn

2015-07-14 12:31:14 suamikim

Các behavious là lạ, tôi đã nhìn thấy nó trước khi sử dụng niceScroll plugin, và nhiều plugin khác cũng đã cùng một vấn đề với iframe, dù sao kiểm tra this workaround

tôi đã sử dụng Hammer.js Plugin jQuery để phát hiện cử chỉ cảm ứng trên iframe của bạn, nếu bạn tìm thấy bất kỳ vấn đề nào liên quan đến cảm giác (vì tôi không biết bạn đang tìm những hạn chế nào), bạn có thể điều chỉnh các tùy chọn hammer.js trên repo của chúng (như ngưỡng pan, con trỏ ..etc)

và mã rất đơn giản:

<body id="mainbody" style="margin: 50px; background-color: blue;"> 
    <iframe id="myframe" src="frame.html" width="100%" height="1400" style="border: none;"></iframe> 
</body> 
<script> 
var myBody 
$('iframe').load(function(){ 
    myBody=$(this).contents().find("body"); 
    myBody.css({"height":"100%","overflow":"hidden"}).hammer({threshold:1}).bind("pan", myPanHandler); 
}); 
function myPanHandler(ev) 
{ 
    $("#mainbody").scrollTop($("#mainbody").scrollTop()-ev.gesture.deltaY) 
console.log(($("#mainbody").scrollTop()-ev.gesture.deltaY*0.5)+".."+$("#mainbody").scrollTop()) 
} 
</script>

Nguồn

2015-07-11 12:55:39 ProllyGeek

Tôi đã không đánh dấu câu trả lời này là câu trả lời ngay từ bây giờ vì nó cảm thấy như một giải pháp khá hack và tôi vẫn đang tìm kiếm thứ gì đó thanh lịch hơn như sửa lỗi trực tiếp trong khung công tác ExtJS. Tuy nhiên, nó ít nhất là cung cấp một cách mà có lẽ sẽ làm việc và do đó tôi đã cho tiền thưởng. – suamikim

vấn đề cuộn với ExtJS 5 ứng dụng bên IFrame

Trả lời

Các vấn đề liên quan