Comment puis-je empêcher une page HTML de faire défiler les touches fléchées si une iframe à l'intérieur est axée?
im getting cette erreur dans chrome
L'IFrame est concentré, je sais que c'est ciblé. Le parent fait défiler de toute façon.
5 Réponses :
Le code suivant à l'intérieur du document IFrame l'empêchera de faire défiler:
document.onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
if (keyCode >= 37 && keyCode <= 40) {
return false;
}
};
Cela empêchera l'iframe de faire défiler, mais je veux empêcher la page de faire défiler.
Mais si l'IFrame est concentré, comment les touches arrows peuvent-elles affecter le document parent?
C'est parce que la façon dont il se concentre ne fonctionne pas comme il se doit. Ma réponse lui fournit le code pour résoudre ce problème.
Ceci fonctionne, à l'exception d'IE:
window.top.document.onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
if (keyCode >= 37 && keyCode <= 40) {
return false;
}
};
Ce code fait le truc:
html (exemple) fort> p> p> P> P> <input type="button" id="setfocus" value="Set focus" onclick="focusOnIframe('myiframe')" />
<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p> <!-- Just some filler -->
<iframe id="myiframe" src="yourpage.html"></iframe>
<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p> <!-- Just some filler -->
Vous comprenez que la question implique le défilement, non? Ne pas se concentrer?
Le problème est que votre objectif ne fonctionne pas, correct? C'est à dire. Lorsque l'IFrame est concentré et que vous utilisez les touches fléchées, il fait défiler le parent. Le code ci-dessus définit la mise au point et le parent ne défile pas.
Et lorsque vous utilisez une clé de haut en bas, le parent défile, correct?
D'écrémer sur le texte et d'avoir un problème similaire: je pense que le problème est que les barres de défilement sur un élément de page "déversement" au corps. Lorsque vous atteignez le bas du contenu que vous faites défiler, le corps fait défiler la suite. (Qui est complètement contre-intuitif IMHO).
Cela ne résout rien, problème encore!
Vous pouvez empêcher le défilement avec les touches fléchées à l'aide du code suivant:
var objImage= null;
function getKeyAndMove(e){
var idtestor = document.getElementById('idPlacer2').value;
objImage= document.getElementById(idtestor);
objImage.style.position='relative';
var key_code=e.which||e.keyCode;
switch(key_code){
case 37: //left arrow key
moveLeft();
e.preventDefault();
break;
case 38: //Up arrow key
moveUp();
e.preventDefault(); break;
break;
case 39: //right arrow key
moveRight();
e.preventDefault();
break;
case 40: //down arrow key
moveDown();
e.preventDefault(); break;
break;
}
}
function moveLeft(){
objImage.style.left=parseInt(objImage.style.left)-5 +'px';
window.scrollBy(-5, 0);
}
function moveUp(){
objImage.style.top=parseInt(objImage.style.top)-5 +'px';
window.scrollBy(0, -5);
}
function moveRight(){
objImage.style.left=parseInt(objImage.style.left)+5 +'px';
window.scrollBy(5, 0);
}k`a`
function moveDown(){
objImage.style.top=parseInt(objImage.style.top)+5 +'px';
window.scrollBy(0, 5);
}
Réponse pour une personne sans accès à la source de page chargée à l'iframe:
J'ai résolu le problème avec Scroll Événement propagation à l'élément parent (document HTML principal) en divisant la page entière à 2 div S avec CSS Position: fixe < / Code>, 1er avec une page HTML entière (parent) et 2e avec iframe uniquement, comme l'écran de division sur les moitiés et sur 2 fenêtres de navigateur sur l'écran Split.
Ou plus de mise à niveau flexible: faire le 1er div S CSS largeur: 100vw; hauteur: 100vh; (+ FineTune CSS haut | bas | gauche ) et 2e div redisisable par css redimensionner ( redimensionnement: vertical | horizontal | à la fois ) ou tout code JS plus intelligent (par exemple, JQueryUI )
Avez-vous un contrôle sur le contenu de l'iframe?
Oui, et c'est sur le même domaine
C'est-à-dire 6+, FF3 +, Chrome: Tous font ce que vous venez de dire par défaut. Je clique sur l'iframe et appuyez sur la flèche vers le bas. L'Iframe fait défiler la page. Qu'est-ce que vous voulez?
Non Testé Encore Solution: CSS Survol -Behavior - Non pris en charge par IE, Safari (Mac / iOS), mais semble que Webkit la mettra en œuvre à l'avenir