Manipulation du DOM sous IE

**natoine** · 21/08/2010, 04h14

Voilà je dois récupérer le contenu d'une sélection faite dans une page web, ainsi que le noeud contenant le début de la sélection et le noeud contenant la fin ainsi que l'offset de début et de fin ...
Je fais ça sous firefox sans problème mais je ne m'en sors pas sous internet explorer.
Voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
//firefox
if(window.getSelection)
{
 var selected_text = window.getSelection();
 var selRange = window.getSelection().getRangeAt(0);
 var start_node = selRange.startContainer;
 var end_node = selRange.endContainer;
 var start_offset = selRange.startOffset;
 var end_offset = selRange.endOffset;
}
//IE
else
{
 var selected_text = document.selection.createRange().text;
 var selRange = selected_text.getRangeAt(0);
 var start_node = selRange.startContainer;
 var end_node = selRange.endContainer;
 var start_offset = selRange.startOffset;
 var end_offset = selRange.endOffset;
}

Merci d'avance pour toute aide.

**blade159** · 22/08/2010, 21h48

Bonsoir,

je suis arrivé à avancer un peu sur votre problème : je récupère 'selected_text', 'start_offset' et 'end_offset' sur IE8. Voici mon exemple complet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script>
function test()
{    
    //firefox
    if(window.getSelection)
    {
        var selected_text = window.getSelection();
        var selRange = window.getSelection().getRangeAt(0);
        var start_node = selRange.startContainer;
        var end_node = selRange.endContainer;
        var start_offset = selRange.startOffset;
        var end_offset = selRange.endOffset;
    }
    //IE
    else
    {
         var selected_text = document.selection.createRange().text;
        var area = document.getElementById('contenu');
        var selRange = document.selection.createRange();
        var start_node = selRange.startContainer;
        var end_node = selRange.endContainer;
        var stored_range = selRange.duplicate();
        stored_range.moveToElementText( area );
        stored_range.setEndPoint( 'EndToEnd', selRange );
        var start_offset = stored_range.text.length - selRange.text.length;
        var end_offset = start_offset + selRange.text.length;
    }
 
    alert('Texte sélectionné : '+selected_text+'\n'+'start_node : '+start_node+"\n"+'end_node : '+end_node+"\n"+'start_offset : '+start_offset+"\n"+'end_offset : '+end_offset);
 
 
 
}
</script>
 
</head>
 
<body>
<div id='contenu'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem neque, dapibus eu blandit non, pretium ut arcu. Aenean dapibus sollicitudin dui sit amet elementum. Praesent in odio in eros dictum consequat in eu felis. Nullam vestibulum semper diam, eu commodo nisi molestie a. Sed dolor ante, euismod quis tincidunt eget, placerat non dolor. Suspendisse tempus massa eget lectus laoreet rutrum. Aliquam ac felis mauris. Nunc ornare tincidunt magna eget hendrerit. Cras ut iaculis purus. Aliquam malesuada, risus a dapibus tincidunt, nunc elit tincidunt libero, quis dictum nibh est in turpis. Integer molestie porttitor augue, ut tincidunt felis auctor vitae. Integer quis justo id neque suscipit posuere. Fusce id leo non diam ultricies condimentum ornare et velit. Phasellus magna orci, accumsan tristique volutpat sit amet, dictum non lacus. Integer ac metus nisl. Fusce id sem ante. Aenean sagittis varius odio a ultrices. Nullam facilisis lacus et magna laoreet vulputate.</p>
<br />
<br />
<p>Maecenas eu lorem nec felis sodales semper. Sed lobortis mattis dui eu posuere. Praesent semper venenatis molestie. Vivamus eu felis ac mi volutpat porttitor. Vivamus eget enim eget metus rutrum feugiat. Nunc accumsan elit nec elit volutpat ut rhoncus nulla pulvinar. Fusce tempor diam nec risus congue pharetra. Integer viverra, nisl vitae mollis ornare, tortor nisl varius tellus, a placerat justo ante sit amet arcu. Vivamus sodales molestie magna, nec aliquet orci egestas et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas iaculis tempus sodales. In egestas, magna in accumsan gravida, metus risus rutrum tellus, sit amet congue elit justo luctus est. Curabitur adipiscing rhoncus tellus eu cursus. Praesent at odio lorem, et posuere erat. Aliquam elementum, dolor et tempus lobortis, orci felis aliquet lectus, non mollis orci tortor in magna. Fusce at mi mi.</p>
<br />
<br />
<p>In bibendum rutrum imperdiet. Proin non auctor purus. Donec malesuada tempus consequat. Cras sollicitudin sodales malesuada. Aliquam sed elit purus, ut lacinia elit. Curabitur cursus sollicitudin arcu, non ullamcorper mauris mattis quis. Nam nec ante eget tortor ultricies lobortis sed non mauris. Suspendisse potenti. Phasellus rhoncus dignissim leo a malesuada. Mauris non diam in ipsum euismod malesuada. Aenean vulputate ligula nulla.</p>
<br />
<br />
<p>Proin sit amet euismod massa. In condimentum elementum mi ut commodo. Nullam rhoncus, magna eget rutrum imperdiet, orci nisi condimentum turpis, ut interdum nibh lorem vel lectus. Cras vel ante id elit laoreet porta. Praesent venenatis rutrum justo sed pulvinar. Morbi adipiscing ante sit amet justo volutpat faucibus. Etiam ac mauris est, sit amet interdum nunc. Mauris eu eros dolor, vitae vulputate diam. Nullam dolor ipsum, sagittis ac sollicitudin sit amet, aliquam a neque. In quis metus diam.</p>
<br />
<br />
<p>Fusce cursus convallis magna, in ullamcorper arcu vulputate a. Aenean suscipit feugiat ante sed laoreet. Phasellus porttitor lacus sit amet orci sagittis eget suscipit nibh sagittis. Praesent scelerisque eros sit amet tellus rutrum a fringilla velit ornare. Phasellus condimentum porta libero ac aliquet. Curabitur luctus, ipsum ut consequat tempor, mi elit porta augue, pellentesque sagittis dolor eros sed arcu. Sed lectus nisi, scelerisque nec faucibus id, eleifend non neque. Phasellus nec ante nisi, at ultrices quam. In hac habitasse platea dictumst. Aliquam ac mauris at metus hendrerit elementum eu vitae tortor. Fusce ultricies nisi eu dolor semper gravida adipiscing tellus posuere. Quisque pretium augue quis lacus semper dictum ut bibendum mauris. Morbi neque ligula, cursus at luctus at, tempus venenatis sem. Praesent vitae lacus magna. Vestibulum ac lorem eget felis aliquam pharetra mattis sed urna. Aenean faucibus metus in mi dignissim cursus. Aliquam at elit mauris. Sed a ligula massa. Maecenas eget massa massa.</p>
<br />
<br />
</div>
<a href="javascript:test();">Cliquez ici</a>
 
</body>
</html>

j'espère avoir un peu pu vous aider ...

**natoine** · 23/08/2010, 16h26

Merci pour le coup de main.
Alors pour les offset il y a un problème c'est que l'offset est calculé globalement. Il n'est pas calculé par rapport à l'élément du DOM contenant la sélection.

Si je fais une sélection à cheval sur deux éléments du DOM, on ne peut pas se baser sur la taille du texte sélectionné pour mesurer l'offset.

**blade159** · 23/08/2010, 16h40

Tout à fait, il me semble que l'offset en plus est calculé par rapport à la position du précdent élement du DOM et non pas par rapport à l'élément parent.

**natoine** · 23/08/2010, 16h52

je viens de trouver cette ressource :
http://www.quirksmode.org/dom/range_intro.html

je vois pas très bien ce qu'on peut faire avec IE du coup ...

Manipulation du DOM sous IE

JavaScript

Discussions similaires

Partager

Partager