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');
        }
    });
});

如何检测iframe上的onscroll事件？ iframe的源与页面的域相同

3 个答案: