Problème pour ajouter des formes dans un iframe.

Résolu/Fermé

stephieker_7228 Messages postés 10 Date d'inscription mercredi 12 août 2020 Statut Membre Dernière intervention 1 septembre 2020 - Modifié le 25 août 2020 à 08:22
stephieker_7228 Messages postés 10 Date d'inscription mercredi 12 août 2020 Statut Membre Dernière intervention 1 septembre 2020 - 25 août 2020 à 09:19

Bonjour,

SVP, quelqu'un peut il m'aider à résoudre mon problème.

J'aimerais ajouter des formes (cercle, rectangle, carré, texte) dans un iframe quand je clique sur un bouton, ensuite je pourrais dragger et redimensionner les formes à l’intérieur de l'iframe.

J'ai trouvé des librairies qui me permet d'ajouter des formes dans un canas de les déplacer et les redimensionner cependant j'arrive pas à les ajouter dans l'iframe.

voici ce que j'ai essayer

<html><head >
<title >mes objects</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

</head>

  <script type="text/javascript">

  jQuery(function($){
    var iframe = document.getElementById('theiframe');
    var iframediv = iframe.contentWindow.document;
    iframediv.body.innerHTML += '<canvas id="thecanvas"></canvas>';
    var c = iframediv.getElementById('thecanvas');

   var canvas = new fabric.Canvas('c');
    $("#addCircle").click(function(){
           canvas.add(new fabric.Circle({
        radius: 20, fill: 'green', left: 100, top: 100
     }));
      });

 });

</script>
  </head>
   <body>
 <div id="wrapper">
<div id="editor">
<input type="button" id="addCircle" value="Add Circle"> 
<input type="button" id="addsquare" value="Add square">
<input type="button" id="addectangle" value="Add rectangle">
<input type="button" id="addtriangle" value="Add triangle">
<input type="button" id="addtext" value="Add text"></div>
<p>
  
</p>
<iframe name="moniframe" id="theiframe"  frameborder= 10 width="400" height="300" onclick="addCircle"></iframe>
<canvas id="c" width="700" height="700"></canvas>

</div>
</body>
</html>

Je vous remercie par avance pour vos propositions.

Configuration: Windows / Chrome 84.0.4147.125

A voir également:

Problème pour ajouter des formes dans un iframe.
Ajouter un compte gmail - Guide
Ajouter un compte whatsapp - Guide
Ajouter agenda outlook dans google agenda - Guide
Ajouter signature word - Guide
Ajouter un compte facebook - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
25 août 2020 à 08:30

Bonjour,

Pourquoi utiliser une iframe ? une iframe sert à afficher tout ou partie d'une page web.... pourquoi s'en servir comme tu le fais ?

De plus ton canvas ne se trouve pas dans ton iframe... normal donc que tu ne puisses y mettre tes formes.

stephieker_7228 Messages postés 10 Date d'inscription mercredi 12 août 2020 Statut Membre Dernière intervention 1 septembre 2020
Modifié le 25 août 2020 à 09:29

Bonjour,

Je vous remercie pour vos remarques. effectivement mon iframe va afficher une autre page web dans laquelle je vais ajouter les formes, j'avais oublié de le mettre.
J'ai fais les modifications cependant ça ne marche toujours pas.

Voici le code modifie:

<html><head >
<title __wid="Yz6PpPCW">mes objects</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

</head>

  <script type="text/javascript">

  jQuery(function($){
    var iframe = document.getElementById('theiframe');
    var iframediv = iframe.contentWindow.document;
    iframediv.body.innerHTML += '<canvas id="thecanvas"></canvas>';
    var c = iframediv.getElementById('thecanvas');

   var canvas = new fabric.Canvas('c');
    $("#addCircle").click(function(){
           canvas.add(new fabric.Circle({
        radius: 20, fill: 'green', left: 100, top: 100
     }));
      });

 });

</script>
  </head>
   <body>
 <div id="wrapper">
<div id="editor">
<input type="button" id="addCircle" value="Add Circle"> 
<input type="button" id="addsquare" value="Add square">
<input type="button" id="addrectangle" value="Add rectangle">
<input type="button" id="addtriangle" value="Add triangle">
<input type="button" id="addimage" value="Add image">
<input type="button" id="addCircle" value="Add text"></div>
<p>
  
</p>
<iframe name="moniframe" id="theiframe" src="http://localhost:7007/page1/" frameborder= 10 width="400" height="300" onclick="addCircle"> <canvas id="c" width="400" height="300"></canvas></iframe>

</div>
</body>
</html>

EDIT : Ajout des balises de code

Discussions similaires

Boucle sur la première diapositive d'une présentation

Photographie

document html