0
454
Viewsjavascript-¿Cómo detectar el evento de desplazamiento en iframe?
Tengo un problema cuando intento agregar desplazamiento de eventos con iframe tage. en general, uso el evento de desplazamiento con la etiqueta div Estaba funcionando bien. pero cuando agrego un evento de desplazamiento en la etiqueta iframe para detectar la página PDF de desplazamiento del usuario, no funcionaba. ¿Por qué no puedo acceder a los elementos html en iframe? Tengo el código inspeccionado a continuación:
y trato de agregar un evento de desplazamiento de javascript con iframe:
Código HTML:
<iframe id="myframe" src="doc.pdf"></iframe>Código JavaScript:
document.getElementById('myframe').onscroll = function(){ alert('scrolling page'); };3 answers
Answer question0
Un iframe no tiene un método de desplazamiento, el document del iframe sí lo tiene; debe hacer referencia al document interno en lugar de a su etiqueta <iframe> .
Puede hacer referencia a él con iframe.contentDocument :
var iframe = document.getElementById('frame'); iframe.contentDocument.body.innerHTML = 'a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>'; iframe.contentDocument.addEventListener('scroll', function(event) { console.log(event); }, false); <iframe id="frame"></iframe>Consulte: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement para obtener más información
0
JavaScript nos proporciona onscroll como un atributo que pasa parámetros (puede ser una función). Pero tenemos iframe aquí, pruebe el siguiente fragmento de código (jQuery).
$("#yourFrameId").load(function () { var iframe = $("#yourFrameId").contents(); $(iframe).scroll(function () { //your code here }); });0
He enfrentado el problema y aquí está uno de mi implementación.
var currAgreementTab = this.get('parentController').get('currAgreement'); var contractContainer = Ember.$('div#marginContractContainer'); var iframe = contractContainer.children(currAgreementTab.element)[0].contentWindow; if (iframe) { iframe.onscroll = function() { var scrolledHeight = Ember.$(iframe).height() === Ember.$(iframe.document).innerHeight() ? Ember.$(iframe).height() : Ember.$(iframe.document).innerHeight() - Ember.$(iframe).height(); if (Ember.$(iframe).scrollTop() === scrolledHeight) { var currAgreementTab = that.get('parentController').get('currAgreement'); Ember.set(currAgreementTab, 'checkDisabled', false); } } }