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