admin管理员组

文章数量:1310537

The plan is not to have a scroll bar to the iframe that I am adding to my page. So the idea to do it as I thought is to have a onscroll function.

So whenever a user scrolls the iframe, I will call this function

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

But I do not know how to detect onscroll event inside an iframe.

PS: the source of the iframe is of the same domain as the page.

My iframe:

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

The plan is not to have a scroll bar to the iframe that I am adding to my page. So the idea to do it as I thought is to have a onscroll function.

So whenever a user scrolls the iframe, I will call this function

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

But I do not know how to detect onscroll event inside an iframe.

PS: the source of the iframe is of the same domain as the page.

My iframe:

<iframe id="externalIframe" scrolling="auto" frameborder="0" allowtransparency="true" style="width: 1240px; height: 489px; display:block" src="http://www.example./" onload="resizeIframe(this);" onscroll="resizeIframe(this);" onclick="resizeIframe(this)"></iframe>
  • javascript
  • jquery
  • html
  • iframe
  • jquery-events
Share Improve this question edited Mar 26, 2020 at 16:17 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked May 26, 2014 at 9:26 Kamal KannanKamal Kannan 951 gold badge4 silver badges9 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

JQuery solution:

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

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

Use this snippet. Bind the onscroll function on the iframe load event.

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

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

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

本文标签：

版权声明：本文标题：javascript - How to detect onscroll event on an iframe? the iframe&#39;s source is of the same domain of the page - Stack Ov 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741789769a2397591.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。