Problème pour ajouter des formes dans un iframe.
Résolu
stephieker_7228
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
stephieker_7228 Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
stephieker_7228 Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
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
Je vous remercie par avance pour vos propositions.
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 agenda outlook dans google agenda - Guide
- Impossible d'ajouter un ami sur facebook - Guide
- Ajouter un compte whatsapp - Guide
- Ajouter un compte facebook - Guide
- Ajouter signature word - Guide
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