18010 sujets

Questions générales et questions de débutants

[Résolu] Modification de l'attribut src/data dans élément object/ifram

Bonjour,

Je ne parviens pas à n'afficher un objet ou iframe (dynamique, sans ascenceur ni bordure) dans ma page web (reprise ci-dessous, 42 lignes seulement) qu'uniquement après sélection d'un bouton et non dès la fin du chargement initial de la page (ce qui s'impose ergonomiquement). Merci de m'aider à résoudre cette question. Amicalement. JoVD.


<!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" xml:lang="en" lang="en">
	<head>
		<title>IFrame test 1</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<style type="text/css">
			.center{text-align: center;}
			.iFrame1 {
				width: 60%;
				margin-left: auto;
				margin-right: auto;
				height: 195px;
			}
		</style>
		<script type="text/javascript">
			function readCard() {
				document.getElementByName('iFrame1').src'="http://www.lesoir.be";
				//document.getElementByName('iFrame1').attr('src')="http://www.lesoir.be";
				//return false;
			}
		</script>
	</head>
	<body class="center">
		<h2>- Test 1: Display iFrame only after selecting button (not after initial page load). -</h2>
		<h4>(Use of objects or the usually contested of iFrames proves to be ideal in our real application ! Should work with all browsers !)</h4>
		<p>
			<form action="" method="post">
				<input type="button" value="Display iFrame" href="http://www.lesoir.be" target="iFrame1" />
				<!-- input type="button" value="Display iFrame" onclick="document.getElementById(iFrame1).src='http://www.lesoir.be';" / -->
				<!-- input type="button" value="Display iFrame" onclick="document.getElementByName(iFrame1).hidden='';" / -->
				<!-- input type="submit" value="Display iFrame" href="http://www.lesoir.be" target="iFrame1" / -->
				<!-- input type="submit" value="Display iFrame" onclick="readCard();" / -->
				<!-- a href="http://www.lesoir.be" target="iFrame1">Display iFrame</a -->
			</form>
		</p>
		<br/>
		<object id="iFrame1" name="iFrame1" class="iFrame1" data="" frameBorder="0" scrolling="no"></object>
		<!-- iframe id="iFrame1" name="iFrame1" class="iFrame1" src="" frameBorder="0" scrolling="no"></iframe -->
		<!-- iframe id="iFrame1" name="iFrame1" class="iFrame1" src="http://www.lesoir.be" frameBorder="0" scrolling="no" hidden="hidden"></iframe -->
	</body>
</html>
Bonjour,

Je m'y connais pas trop en iFrame, mais tu as une erreur dans ton javascript, cela pourra peut être t'aider :

document.getElementByName

n'existe pas.

En effet élement l'attribut name n'est pas forcement unique comme un id et la syntaxe correcte est :

document.getElement[b]s[/b]ByName

car tu es sensé pour récupérer plusieurs éléments si tu le souhaite avec ce sélecteur

En espérant que cela t'aide !
Modifié par SpiStache (29 Apr 2014 - 09:12)
Merci pour la précision, SpiStache, et autant pou moi pour cette erreur (getElementsByName et non getElementByName), mais cela ne résoud toujours pas mon problème. Je ne parviens toujours pas à faire apparaître une page web (non-sécurisée) dans mon <object> ou <iFrame> en en modifiant simplement l'attribut 'data' ou 'src'. A+ Jo. Smiley smile
Ok, je n'ai jamais utilisé d'iframe, mais tu dis ne pas arriver a charger l'iframe en modifier l'attribut src.

Au lieu de ça, si tu créée un conteneur pour ton iframe :


<div id="iframecontainer"><div/>


Et que au lieu d'ajouter un attribut src a ton iframe (ou autre) lorsque tu clique sur le bouton, tu ajoute plutôt le code entier de l'iframe à l’intérieur du conteneur via .innerHTML en javascript ?

Qu'en penses tu?
Merci pour ta deuxième réponse, Spistache. Tu trouveras ci-joint la source html de mon exemple initial adapté (48 lignes seulement) à ta proposition de création dynamique de l'élément frame1 entier dans le nouvel élément div1 (commenter (désactiver) préalablement les lignes 18, 19 et 47 et décommenter (activer) les lignes 20 à 32 et 46).

Même résultat toutefois que tous mes essais précédents (dont le simple document.getElementById('frame1').data="http://www.w3.org";), hélas.

Smiley biggol Par contre, l'ajout de la ligne javascript "alert('')" (ligne 22) ou "alert('newNode')" (ligne 31) révèle que l'object frame1 est bien généré correctement dans la page mais disparaît dès la disparition du popup (réponse ok) !?

Intéressant: Outils > Développeur web > Console web de Firefox signale l'erreur de sécurité suivante : "Content Security Policy: Les paramètres de la page ont empêché le chargement d'une ressource à data:image/png;base64, ......", mais je ne trouve pas comment la corriger.

A+ JoVD.


<!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" xml:lang="en" lang="en">
	<head>
		<title>IFrame test 1</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<style type="text/css">
			.center{text-align: center;}
			.frame1 {
				width: 60%;
				margin-left: auto;
				margin-right: auto;
				height: 195px;
			}
		</style>
		<script type="text/javascript">
			function changeFrameContent() {
				document.getElementById('frame1').data="http://www.w3.org";
				alert('');
		/*		if (!document.getElementById('frame1')) {
					var div1 = document.getElementById('div1');
					alert(div1);
					var newNode = document.createElement('object');
					alert(newNode);
					newNode.setAttribute("id", "frame1");
					newNode.setAttribute("class", "frame1");
					newNode.setAttribute("data", "http://www.w3.org");
					newNode.setAttribute("frameBorder", "0");
					newNode.setAttribute("scrolling", "no");
					div1.appendChild(newNode);
					alert(newNode);
				}		*/
			}
		</script>
	</head>
	<body class="center">
		<h2>- Test 1: Display iFrame/Object only after selecting button (not after initial page load). -</h2>
		<h4>(Use of objects or the usually contested of iFrames proves to be ideal in our real application ! Should work with all browsers !)</h4>
		<p>
			<form action="" method="post">
				<input type="submit" value="Display iFrame/Object" onclick="changeFrameContent();" />
				<!-- a href="http://www.w3.org" target="frame1">Display iFrame</a -->
			</form>
		</p>
		<br/>
		<!-- div id="div1"></div -->
		<object id="frame1" name="frame1" class="frame1" data="" frameBorder="0" scrolling="no"></object>
</html>
Désolé, mais ton soucis à plutôt l'air lier à ce que tu veux afficher, je saurais pas trop t'aider pour le coup Smiley ohwell
Bonjour Spistache,
Je viens de trouver. Cela n'aurait rien à voir avec le Content Security Policy de la page demandée, mais serait plutôt un problème de cache. En utilisant <input type="button" value="Display iFrame/Object" onclick="changeFrameContent();" /> plutôt que <input type="input" ... , j'évite le rechargement de la page (via le cache). Voici la source qui fonctionne (31 lignes tout compris):


<!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="en" lang="en">
	<head>
		<title>IFrame test 2</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<style type="text/css">
			.center{text-align: center;}
			.frame1 {
				width: 60%;
				margin-left: auto;
				margin-right: auto;
				height: 195px;
			}
		</style>
		<script type="text/javascript">
			function changeFrameContent() {
				document.getElementById('frame1').data="http://www.w3.org";
			}
		</script>
	</head>
	<body class="center">
		<h2>- Test 2: Display iFrame/Object only after selecting button (not after initial page load). -</h2>
		<h4>(Use of objects or the usually contested of iFrames proves to be ideal in our real application ! Should work with all browsers !)</h4>
		<form action="" method="post">
			<input type="button" value="Display object" onclick="changeFrameContent();" />
		</form>
		<br/>
		<object id="frame1" class="frame1" data="" frameBorder="0" scrolling="no"></object>
	</body>
</html>


Merci pour ton aide et à la prochaine fois .. Smiley cligne .
Sujet clos
Aller à