如何檢測 iframe 上的 onscroll 事件？ iframe 的來源與頁面的域相同

Question

計划不是在我添加到我的頁面的 iframe 上設置滾動條。 所以按照我的想法去做的想法是有一個 onscroll 功能。

所以每當用戶滾動 iframe 時，我都會調用這個函數

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

但我不知道如何檢測 iframe 內的 onscroll 事件。

PS：iframe 的來源與頁面的域相同。

我的 iframe：

<iframe id="externalIframe" scrolling="auto" frameborder="0" allowtransparency="true" style="width: 1240px; height: 489px; display:block" src="http://www.example.com/" onload="resizeIframe(this);" onscroll="resizeIframe(this);" onclick="resizeIframe(this)"></iframe>

Answer 1

jQuery 解決方案：

$("#yourFrameId").load(function () {
     var iframe = $("#yourFrameId").contents();

    $(iframe).scroll(function () { 
        //your code here
    });
});

Answer 2

使用這個片段。 在 iframe 加載事件上綁定onscroll函數。

function getFrameTargetElement(objI)
{
    var objFrame = objI.contentWindow;
    if(window.pageYOffset==undefined)
    {   
        objFrame = (objFrame .document.documentElement) ? objFrame .document.documentElement : objFrame =document.body; 
    }
 //- return computed value
    return objFrame ;
}
$("#externalIframe").load(function (){
    var frame = getFrameTargetElement(document.getElementById("externalIframe"));

    frame.onscroll = function (e) {
         resizeIframe(obj);
    }
});

Answer 3

var iframe = angular.element(document.getElementById('terms'));
iframe.load(() => {
    var checkIndex = $scope.stageContent.checkbox.length;   // Take last slot for the scroll check
    checks[checkIndex] = false;

    var iframeDoc = iframe.contents();
    var treshold = iframeDoc.height() - (iframe.height() * 1.5);
    iframeDoc.scroll(() => {
        if (iframeDoc.scrollTop() >= treshold) {
            $timeout(() => {
                checks[checkIndex] = true;
                checkCanContinue();
            });
            iframeDoc.off('scroll');
        }
    });
});