Comment interagir avec une iframe

**CactO_o's** · 01/12/2009, 14h30

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 :

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

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 :

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

myIframe.html('test');

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

Merci à tous

**danielhagnoul** · 01/12/2009, 20h12

Bonsoir.

Code :

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

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>');

**CactO_o's** · 02/12/2009, 13h42

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

Ton code me permettrait d'avoir :

Code :

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

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 :

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

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 :

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

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 :

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

$(myIframe).html();

alors que moi je met simplement

Code :

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

myIframe.html()

Quel est la différence ?

**danielhagnoul** · 03/12/2009, 23h37

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 :

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
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 :

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
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>

**CactO_o's** · 09/12/2009, 11h11

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

iframe.html

Code :

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

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

index.html

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
<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 :

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

**CactO_o's** · 10/12/2009, 15h10

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 :

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

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

index.html

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
<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>

**danielhagnoul** · 11/12/2009, 20h15

Bonsoir.

Voici la bonne solution, il suffit de faire :

Code :

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

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 :

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

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

**danielhagnoul** · 11/01/2010, 09h41

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 :

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