jquery - jquey tabs ajax load html 冲突问题？

Question

tabs load的html，里面有js，也有html，id，都有可能冲突，如何解决？

（不用ifame哦，iframe每次加载明显不如load，即便是缓存，也要初始化很多的，而且iframe内部带的dialog要在iframe外显示也很费劲，多个页面有同样的dialog也会出现这种问题）

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é.