Une idée de pourquoi la position X, Y de cet élément est 0,0?

Question

J'ai la fonction javascript suivante dans mon extension:

function findPos(obj) { 

var curleft = curtop = 0; 
if (obj.offsetParent) { 
     curleft = obj.offsetLeft 
     curtop = obj.offsetTop 
     while (obj = obj.offsetParent) { 
       curleft += obj.offsetLeft 
       curtop += obj.offsetTop 
     } 
} 
return [curleft,curtop]; 

Et mon exemple simplifié html est la suivante:

<span id="a"></span> 
<span id="b"></span> 
<span id="c"></span> 
<span id="d"></span> 

Pour chaque balise span j'ajouter un élément enfant

<div id="a2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div> 
<div id="b2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div> 
<div id="c2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div> 
<div id="d2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div> 

Maintenant, lorsque la page est statique (c'est-à-dire, si je modifie manuellement le code HTML pour avoir les enfants div), findPos renvoie le curleft droit & curtop pour les deux document.getElementById ('a') & a2, cependant si je crée le div dynamiquement à partir de l'extension et l'ajouter à l'étendue, findPos renvoie 0,0 sur le nouvel élément.

Des idées pourquoi?

ajouter les divs et exécuter le code findPos du contexte d'une barre latérale Firefox comme ceci:

var mydiv = document.createElement('div'); 
mydiv.setAttribute('style', 

« display: block; position: absolute; hauteur: 50 px; largeur: 50px; border: 1px solide #abcdef z-index: 9999998; '); Mydiv.id = 'a2' var myspan = gBrowser.contentDocument.getElementById myspan.appendChild (mydiv);

où gBrowser est défini comme:

// For accessing browser window from sidebar code. 
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor) 
        .getInterface(Components.interfaces.nsIWebNavigation) 
        .QueryInterface(Components.interfaces.nsIDocShellTreeItem) 
        .rootTreeItem 
        .QueryInterface(Components.interfaces.nsIInterfaceRequestor) 
        .getInterface(Components.interfaces.nsIDOMWindow); 
var gBrowser = mainWindow.gBrowser; 

J'ai essayé d'ajouter le code de findPos à la page elle-même, mais même chose.

Answer 1

Je trouve la question quand je rédigeais des détails supplémentaires, nous espérons que cela aide quelqu'un quand ils essaient de comprendre pourquoi un élément a 0, 0 coordonnées lorsqu'il est ajouté au dom à partir d'une extension firefox (dans une barre latérale ou une barre d'outils).

Le problème se trouve dans cette ligne anodine de code:

var mydiv = document.createElement('div'); 

Nous créons mydiv dans le document du navigateur Chrome. Nous pouvons l'ajouter à l'élément dans le gBrowser, et il apparaît visuellement, cependant nous trouvons que nous nous donnons 0,0.

Toutefois, si nous changeons à:

var mydiv = gBrowser.contentDocument.createElement('div'); 

Nous obtenons les bonnes valeurs pour findpos.

Answer 2

Juste une supposition ici, mais element.getOffsetParent retournera null (ainsi que getOffsetLeft/Right retournant 0 je pense) si le style d'affichage de l'élément est défini sur "none".

Vous pouvez vérifier le style calculé en utilisant:

document.defaultView.getComputedStyle(document.getElementById("a"), "").display