Comment interagir avec une iframe

Version imprimable

Bonjour à tous

Dans le cadre de mon projet de création d'éditeur WYSIWYG (comme CKeditor ou WYMeditor[jQuery]) et après plusieurs recherches j'ai vu que l'éditeur avait besoin d'une iFrame pour fonctionner correctement.

Voilà mon code de création de l'iFrame :
Code:

1 2 3 4 5 var htmlIframe = '<iframe src="'+options.srcIframe+'" name="frame" frameborder="no" width="500" height="100"></iframe>'; var myEditor = $('<div class="K_editor_body">'+htmlIframe+'</div>'); var myIframe = myEditor.children('iframe');
J'ai fais des tests pour essayer et rien ne fonctionne..

Exemple :

Code:

myIframe.html('test');

Comment je peux m'y prendre pour avoir accès au code html, à la sélection, etc ???

Merci à tous

Bonsoir.

Code:

1
2
var myIframe   = $('<iframe src="'+options.srcIframe+'" name="frame" frameborder="no" width="500" height="100"></iframe>').appendTo("#conteneur");
$(myIframe).wrap('<div class="K_editor_body"></div>');

Merci pour ta réponse mais ce n'est pas vraiment ce que je cherche... :s

Ton code me permettrait d'avoir :
Code:

1 2 3 4 5 <div id="conteneur"> <div class="K_editor_body"> <iframe src="[src]" name="frame" frameborder="no" width="500" height="100"></iframe> </div> </div>
Mais je ne sais toujours pas comment accéder au contenu de l'iframe [iframe > body > html > XXX]

J'ai essayé avec :
Code:

1 2 3 4 5 6 7 8 9 10 var myIframe = $('<iframe src="'+options.srcIframe+'" name="frame" frameborder="no" width="500" height="100"></iframe>'); var myEditorBody = $('<div class="K_editor_body"></div>'); myEditorBody.append(myIframe); me.html(myEditorBody); var myEditorIframe = myEditorBody.find(".K_editor_iframe"); alert(myEditorIframe.html());
Avec comme Html ouvert pour l'iframe :
Code:

1 2 3 <html><head></head><body><div class="K_editor_iframe"> nanani </div></body></html>
Mais je n'ai que Null comme réponse..

---------------------

Par contre Hs :
J'ai vu que tu appelais l'iframe de cette façon

Code:

$(myIframe).html();

alors que moi je met simplement

Code:

myIframe.html()

Quel est la différence ?

Bonsoir.

C'est assez subtil ! Cela m'a pris deux jours avant de trouver.

Je ne suis pas encore certain de la chose, mais il semble que l'utilisateur doit déjà avoir interagi avec la page HTML avant tout appel à l'iframe pour que cela fonctionne

En tout cas, cela fonctionne après une alerte ou par l'intermédiaire d'un événement, un click sur un bouton par exemple.

Code:

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
66
67
68
69
70
71
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(window).ready(function(){
			//alert("oui");
			//$("#frameID").contents().find("#conteneur").css({color:"red"});
			//$("#affiche").html($("#frameID").contents().find("#ul_projets li:eq(2)").text());
 
			$("#btn").click(function(){
				$("#frameID").contents().find("#conteneur").css({color:"red"});
				$("#affiche").html($("#frameID").contents().find("#ul_projets li:eq(2)").text());
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn" type="button">OK</button>
		<div id="affiche"></div>
		<iframe id="frameID" src="efface1.html" width="500" height="400"></iframe>
	</div>
</body>
</html>

le contenu de l'iframe, le fichier efface1.html :

Code:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var v1 = $("#ul_projets > *").length;
			var v2 = $("#ul_projets li").length;
			var v3 = $("#ul_projets ul").length;
			var v4 = $("#ul_projets").children().length;
 
			$("#conteneur").append("<p>* length = " + v1 +
								   "<br/>children length = " + v4 +
								   "<br/>li length = " + v2 +
								   "<br/>ul length = " + v3);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<ul id="ul_projets">
			<li>
				valeur 1
				<ul>
					<li>s1</li>
					<li>
						s2
						<ul>
							<li>s21</li>
							<li>s22</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>valeur 2</li>
			<li>valeur 3</li>
			<li>valeur 4</li>
		</ul>
	</div>
</body>
</html>

Après pas mal de recherche, j'ai trouvé comment faire un code qui me donne satisfaction :

iframe.html

Code:

1
2
3
4
5
6
<div id="contentIframe">
 
	<span>
		Nanani<strong>No</strong>no
	</span>
</div>

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
	<head>
		<link rel="stylesheet" media="screen" type="text/css" href="../../moteur/css/default/required.css" />
	</head>
	<body>
		<div id="page">
			<iframe id="idIframe" width="500" height="300" src="iframe.html"></iframe>
		</div>	
 
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
		<script type="text/javascript">
			$(document).ready(function()
			{
				var idIframe 		= $('#idIframe');
				alert(idIframe.contents().find("#contentIframe").html()); 
 
			});
		</script>
	</body>
</html>

Résultat :

Citation:

<span>
Nanani<strong>No</strong>no
</span>

Mon sujet à été mis en résolut mais j'ai continué de faire des tests dessus. Résultat des recherches : la subtilité trouvé par danielhagnoul [le post] est surement dû chargement de l'iframe qui mettrait plus de temps.
Le reste du Javascript est donc interprété avant que l'iframe ne soit charger correctement.

Un code exemple :
iframe.html

Code:

<div id="contentIframe">nana</div>

index.html

Code:

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
<html>
	<head></head>
	<body>
		<div id="page">
			<div id="editor">Test</div>
			<input type="button" id="inputButton" value="Click" > 
		</div>	
 
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
		<script type="text/javascript">
			$(document).ready(function()
			{
				/*$('#editor').unload(function()
				{*/
					me = $('#editor');	
 
					me.html('<iframe id="idIframe" width="500" height="300" src="iframe.html"></iframe>');
 
					//	var myIframe = me.children('iframe').contents().find("#contentIframe");
					//	alert(myIframe.html());
 
						setTimeout(function() {
							var myIframe = me.children('iframe').contents().find("#contentIframe");
							alert(myIframe.html());
						}, 1000); 
 
 
					$('#inputButton').click(function()
					{
						myIframe = me.children('iframe').contents().find("#contentIframe");
						alert(myIframe.html());
					});
				//});
 
			});
		</script>
	</body>
</html>

Bonsoir.

Voici la bonne solution, il suffit de faire :

Code:

1
2
3
4
5
6
7
 
<script type="text/javascript">
    function frameReady(){
        $("#frameID").contents().find("#conteneur").css({color:"red"});
        $("#affiche").html($("#frameID").contents().find("#ul_projets li:eq(2)").text());
    }
</script>

et :

Code:

1
2
 
<iframe id="frameID" src="iframeEssai.html" width="500" height="400" onload="frameReady();"></iframe>

Avec toutes mes excuses, parfois on oublie d'allumer son cerveau :oops:

11/01/2010, 09h41
danielhagnoul

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code:

$(document).ready(function(){…});

ou

Code:

$(fonction(){…});

dans sa forme abrégée.

Pour window nous devons, et nous aurions déjà dû sous jQuery 1.3.2, utilisez l’événement load :

Code:

$(window).load(fonction(){…});

Il n’y a pas de forme abrégée.