jquery - jquey tabs ajax charge un problème de conflit HTML ?

Question

Le code HTML du chargement des onglets contient js, html et id. Il peut y avoir des conflits. Comment le résoudre ?

(Aucun ifame n'est nécessaire. Chaque fois que l'iframe est chargé, ce n'est évidemment pas aussi bon que le chargement. Même s'il est mis en cache, il doit être souvent initialisé. De plus, il est très difficile d'afficher la boîte de dialogue à l'intérieur du iframe en dehors de l'iframe. La même boîte de dialogue sera affichée sur plusieurs pages. Ce problème se produit)

.

Answer 1

Il existe trois options :

1. Utilisez une convention de dénomination pour modifier les identifiants sous des formes non conflictuelles. Bien que cette solution semble la moins adaptée aux exigences du sujet, je la recommande personnellement, ce qui réduira bien des problèmes dans la suite. Si ces HTML sont logiquement sur la même interface, alors ils devraient avoir des identifiants différents, sinon vous rencontrerez des problèmes lors de l'écriture de la logique et des styles à l'avenir.

2. En supposant que seul le HTML des onglets aura des conflits d'ID, et qu'il n'y a qu'un seul onglet affiché en même temps, alors vous pouvez envisager de détacher les onglets non affichés du DOM à chaque fois que vous coupez les onglets, et ajoutez-les si nécessaire.

3. Utilisez <iframe src="about:blank"></iframe> pour afficher le HTML, et son contenu peut être modifié en définissant le <iframe> de contentWindow.document.body.innerHTML. Si vous souhaitez toujours pouvoir afficher correctement les styles et scripts externes de HTML, ainsi que diverses boîtes de dialogue, vous pouvez également utiliser diverses méthodes de hack, mais cela reste un hack avec des problèmes sans fin.

P.S. À la demande du propriétaire du sujet, j'ajouterai quelques idées de hack.

1. Comment insérer la boîte de dialogue jQuery UI à l'endroit spécifié par défaut ?

Vous pouvez remplacer les options par défaut de la boîte de dialogue via le code suivant, la clé est l'option appendTo.

$.extend($.ui.dialog.prototype.options, {
    appendTo: tabNode
});

Définissez cette option à chaque fois avant de charger un onglet ou après avoir changé d'onglet, et définissez-la sur le nœud d'onglet actuellement affiché.