jQuery Girl
  1. jQuery Girl
  3. Comment enregistrer dynamicment (DOM) HTML modifié?
Intereting Posts
Plusieurs curseurs, boutons contrôlant tous les curseurs Impossible de déclencher un événement de clic sur les données de la série | Highchart Toile HTML5 – Comment dessiner un rectangle sur une image dans une canvas Problèmes dans IE sans doctype Comment puis-je arrêter cette animation de télétype après sa première itération? Comment puis-je glisser google map? jquery bounce effect rompt l’alignement en ligne de la liste Traitement du statut d’échec dans les OPTIONS HTTP – Appel Ajax Problèmes avec les menus déroulants lors de la lecture de vidéos HTML5 jmpress ne s’anime pas dans Chrome 44 Comment append une classe à des mots commençant par un hashtag dans jQuery? Désactiver l’ouverture du menu déroulant sur select2 clear Les fonctions Ajax telles que .load () suppriment les commentaires du HTML. Comment puis-je conserver les commentaires? DataTables Tri de la table HTML sur la base de la valeur de l’atsortingbut TD Erreur JQuery AJAX dans Mozilla lors de la lecture d’un fichier XML local

Comment enregistrer dynamicment (DOM) HTML modifié?

J’ai eu un bon générateur de disposition utilisant des formulaires dynamics jquery et des fonctionnalités jquery ui pour changer le nombre d’éléments utilisés, leurs propriétés css, etc. Je voudrais enregistrer DOM généré et l’parsingr d’une manière ou d’une autre (supprimer les éléments cachés de l’arbre DOM, etc.). Des idées comment enregistrer le courant (modifié) html + css?

La solution utilisant jQuery est la suivante:

Étape 1:

convertir le code HTML complet (modifié) en une représentation sous forme de chaîne: 

var html = $('html').clone(); var htmlSsortingng = html.html();

Étape 2:

Base64 encode htmlSsortingng et le met dans un datauri à l’intérieur d’un hyperlien: 

 var datauri = "data:text/html;charset=utf-8;base64," + $base64.encode(htmlSsortingng); $("body").append("Save");

Remarque: j’utilise cette bibliothèque pour l’encodage en base64 ci-dessus: http://hpyer.cn/codes/jquery-plugin-base64-encode-and-decode

Étape 3:

Cliquez-droit sur le lien “Enregistrer” créé dynamicment ci-dessus et choisissez “Enregistrer sous” dans le menu contextuel du navigateur. Votre fichier html modifié sera enregistré en tant que nouveau document html sur votre système de fichiers local.

J’ai déjà essayé ça et ça marche. J’espère que cela fonctionnera pour vous et les autres également. Cette solution fonctionne sans aucune technologie côté serveur. Elle ne requirejs pas non plus Flash, les applets Java, les contrôles Active-X, XPCOM ou toute technologie propriétaire côté client. La seule chose requirejse est tout navigateur (moderne) prenant en charge data-uris.

Dans un premier temps, vous pouvez utiliser 

 var $alteredHtml = $('html').clone(); // use jQuery here to make alterations to the cloned html (parse it)

mais pour le sauvegarder, vous aurez besoin d’une technologie côté serveur, que ce soit dans un fichier ou dans une firebase database.

Il existe un autre moyen d’utiliser le chrome.

  1. Ouvrir “outils de développement” (trl + mayus + i sur Windows)
  2. Allez à l’onglet “éléments”. Vous verrez le réel DOM (modifié)
  3. Recherchez le nœud qui vous intéresse (probablement HTML ou BODY, mais n’importe lequel), faites un clic droit et sélectionnez COPY AS HTML
  4. Collez dans votre éditeur de texte préféré et enregistrez.

La solution fournie par tsaixingwei fonctionne bien sur les petits DOM, mais si vous avez de gros documents, cela ne fonctionnera pas. Je viens d’essayer avec un document contenant environ 30 000 lignes et j’ai dû utiliser la méthode que je viens d’expliquer.