Contenu généré par un script

Bonjour à tous
Je cherche a effectuer des traitements par JavaScript sur une balise <script> et ce qu'elle génère.
Par de problème dans le DOM pour retrouver un script, mais comment faire pour retrouver les éléments générés par le script?
Merci de votre aide
Modifié par PapyJP (27 Jul 2017 - 17:29)

Salut

Un poil plus d'exemple

Si tu veux voir en "Live" ce qui se passe dans le dom, l'inspecteur d'élément est ton ami

Ceux de chrome ou firefox sont super bien fait

Merci de ta réponse, j'utilise intensément ce outils, mais ce n'est pas ce que je veux faire.
Il s'agit d'un outil d'administration du site.
L'objectif est de permettre au propriétaire du site de faire de l'édition de pages en interactif.
La design de cet outil, c'est d'afficher la page à éditer dans un <iframe> et de faire en sorte que quand l'utilisateur clique sur une portion de texte, on ouvre un formulaire avec une <textarea> et le contenu texte correspondant.
Pour un texte, pas de problème, il suffit de mettre chaque portion de texte éditable dans une balise <span> avec une classe appropriée et un id propre, et de gérer les modifications en JavaScript.
En ce qui concerne un script, c'est un peu différent: comme ce que génère le script peut contenir des choses complexes, il faudrait obtenir quelque chose comme

    <a id="..." class="...">
        <script>.....</script>
        .....ce que génère le script.....
    </a>

quand on clique que ce que génère le script, on appelle une fonction JavaScript qui affiche les paramètres de script et propose de les modifier.
Actuellement, si je recherche dans le DOM la balise <script> et que je la met dans une balise <a>, cette balise ne contient que l'appel du script, mais pas le code généré. Il faudrait faire cette modification sur le code source, et pas sur le DOM.
Je peux bien entendu faire cela en php, ce qui veut dire créer un fichier de travail sur le serveur et l'afficher dans la balise <iframe>, mais avant de faire cela, je cherche si on peut trouver un moyen de tout faire en JavaScript.
Est-ce que c'est plus clair?
Modifié par PapyJP (27 Jul 2017 - 18:46)

Bonjour,

En somme, tu cherches à faire un back-end pour JS ?

C'est quoi un back-end ?
Le but est de faciliter la gestion des pages en deux langues.
En pratique, le propriétaire du site écrit son texte en français dans un document Word, puis il le met dans un fichier HTML généré par un snippet sous DreamWeaver. Ensuite tout se fait en sélectionnant une partie de texte et en appelant des snippets "enveloppants".
Après mise au point, le fichier est transmis à un spécialiste anglophone qui renvoie un fichier Word en anglais.
Commence alors une phase pénible consistant à
- sélectionner à la souris le texte à l'intérieur de chaque balise
- couper
- sélectionner le texte correspondant dans texte anglais
- coller dans la balise
Il faut bien comprendre que les deux rédacteurs ne sont pas des férus de HTML et de techno, mais des spécialistes de l'égyptologie.
Ce que j'essaie de faire, c'est un outil (écrit en JavaScript et PHP) qui fonctionne comme suit
- cliquer sur le texte français
- ça ouvre une <textarea>
- on remplit la <textarea> avec le texte anglais
- le script effectue la modification du DOM
Le tout bien entendu accompagné de ce qu'il faut pour éditer, revenir en arrière, etc.
Ce n'est pas génial mais c'est ce que j'ai trouvé de mieux pour aider le malheureux auteur. Si vous avez de meilleures idées, je suis bien entendu preneur!

Ce que j'appelle back-end (ou back-office, même s'il y en a qui font la différence), c'est la partie "admin" d'un site, là où tu le modifie dynamiquement.

Tu utilises une base de données pour tout enregistrer ? Tu enregistres également les scripts JS ?
Je n'ai pas compris quel genre de script tu allais permettre...

Sont-ce des scripts qui va modifier le DOM ? Tu as un exemple de script ?
Modifié par SolidSnake (28 Jul 2017 - 09:49)

SolidSnake a écrit :
Ce que j'appelle back-end (ou back-office, même s'il y en a qui font la différence), c'est la partie "admin" d'un site, là où tu le modifie dynamiquement.

C'est effectivement un outil d'administration

SolidSnake a écrit :

Tu utilises une base de données pour tout enregistrer ? Tu enregistres également les scripts JS?

Si ce que tu appelles "base de données" est un ensemble de répertoires et de fichiers géré par un outil de gestion de base de données, ce site n'en comporte aucune.
Par contre le site en lui même (comme tout ensemble cohérent de répertoires et de fichiers) est en soi une base de données, les index étant les noms de fichiers qui sont gérés par des règles strictes.

SolidSnake a écrit :

Je n'ai pas compris quel genre de script tu allais permettre...
Sont-ce des scripts qui va modifier le DOM ? Tu as un exemple de script ?

Ce site est un site ancien, que j'ai transposé durant ces deux dernières années pour en faire quelque chose de "responsive", avec des balises HTML5 au lieu des <table> imbriquées qui étaient de mise lorsque ce site a été créé il y a une quinzaine d'années.

Le propriétaire du site est un médecin en retraite, spécialiste reconnu en égyptologie, dont le but est de publier des études très pointues sur les monuments funéraires de l’Égypte antique, pas de gérer un site en respectant des normes techniques, c'est donc mon rôle que de faire en sorte de ne pas trop perturber ses habitudes de travail.

Je lui ai donc fabriqué un ensemble d'outils qui ne l'obligent pas à remettre en cause sa façon de travailler, en particulier éditer du HTML simple sous DW en voyant en local le résultat de ce qu'il fait. Pour cela, la techno de base que lui avait concoctée mon prédécesseur repose sur des appels de scripts qui génèrent les choses un peu complexes.

Par exemple les multiples illustrations de ce site sont matérialisées par un script

<script>diapo(nom-de-l-image, position, texte)</script>

Selon les règles strictes de nommage des objets, le script "diapo" effectue les opérations suivantes:
- analyser le nom de l'image
- en déduire si cette image est une "image simple" ou une "miniature"
- s'il s'agit d'une miniature, il calcule l'adresse de l'image à afficher et génère le code nécessaire pour que, quand on clique sur la miniature, cela affiche l'image "en vraie grandeur" dans une fenêtre popup
- il génère ensuite une balise

<figure class="diapo position">
    <img onclick="popupImage('nom-de-l-image´)" src="photo/nom-de-l-image.jpg" alt="">
    <figcaption>texte</figcaption>
</figure>

Ce que j'ai l'intention de faire, c'est que quand on est en mode édition, si l'utilisateur clique dans la balise <figure>, au lieu d'appeler le script "popupImage" cela appelle un script "editScript(this)" qui affiche un formulaire de saisie contenant le nom du script et un champ par paramètre
L'utilisateur peut modifier les paramètres (nom de l'image, position, texte)
Quand il valide le formulaire, le script remplace la balise <script> par une nouvelle balise <script> contenant les nouveaux paramètres, cela bien entendu en jouant sur le DOM (et après avoir sauvé dans un coin non affiché du DOM la valeur originelle pour pouvoir remettre les choses en place si nécessaire)
Après avoir réfléchi durant la nuit, je pense que je vais modifier les scripts de génération pour que, quand on est dans le contexte de l'outil d'édition, il génère un contenu différent de ce qu'il fait dans le mode "normal".
Dans ces conditions, le script en question (et d'autres scripts similaires) génèrera

<a id="script123" onclick="editScript(this)">
<figure class="diapo position">
    <img src="photo/nom-de-l-image.jpg" alt="">
    <figcaption>texte</figcaption>
</figure>
</a>

L'outil pourra alors retrouver le numéro du script par l'id et l'éditer selon le mécanisme prévu plus haut.
Si je n'ai pas de bug de conception, ça devrait donner le résultat souhaité.
J'attends vos avis avant de me lancer dans le développement de cet outil.
Modifié par PapyJP (28 Jul 2017 - 22:50)