Bug jsfiddle et chrome ?

**SpaceFrog** · 09/04/2013, 15h12

Je m'amusais avec l'excellent site jsfiddle et je suis tombé sur cette curiosité

http://jsfiddle.net/rH3Xy/1/

je me suis dit que c'était propre au parseur de jsfiddle, mais quelle ne fut pas la surprise quand j'ai testé le même genre de code sous chrome...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').text("je contiens : " +this.text())
 
})
</script>
</head>
<body>
</body>
</html>

Je pensais que $(this) se rapportait au sélecteur ... ???
du coup pour chrome le script se trouve DANS le body ??? alors que clairement il est dans le head.

Peut on m'expliquer le pourquoi ??

**danielhagnoul** · 09/04/2013, 21h06

Bonsoir

Il est évident qu'il n'y a aucun rapport entre le "this" du $( this ).text() et le sélecteur jQuery : $( "body" ).text( ... ) et cela me semble logique, ce n'est pas une fonction de rappel.

Le plus étonnant c'est que dans un console.log( this ), le this se réfère au document alors que dans notre test il me donne uniquement le contenu du script.

Mais le comportement n'est pas spécifique à Chrome 26.014 , j'ai exactement la même chose dans Firefox 20.0 et dans IE 10 W7.

Ma page de test :

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>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){ 
 
				$( function(){
 
					console.log( this );
 
					$( "section.conteneur" ).text( "je contiens : " + $( this ).text() );
 
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-31T22:39:49.552+02:00" pubdate>2013-03-31T22:39:49.552+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Bug jsfiddle et chrome ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager