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

Question

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

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

Answer 1

There are three options:

1. Use some naming convention to modify the ids into non-conflicting forms. Although this solution seems to be the least in line with the requirements of the subject, I personally recommend it, as it will reduce a lot of trouble in the later stage. If these html are logically on the same interface, then they should have different ids, otherwise you will encounter trouble when writing logic and styles in the future.

2. Suppose there is an id conflict in just the html of the tab, and there is only one tab displayed at the same time, then you can consider detach the undisplayed tab from the DOM every time you cut the tab, and append it when needed.

3. Use <iframe src="about:blank"></iframe> 来显示 html，通过设置 <iframe> 的 contentWindow.document.body.innerHTML to modify its content. If you still want to be able to display HTML's external styles and scripts well, as well as various dialogs, you can also use various hack methods, but it is still a hack with endless troubles.

P.S. At the request of the topic owner, I will add some hack ideas.

1. How to make jQuery UI's dialog insert into the specified place by default?

You can override the default options of dialog through the following code, the key one is appendTo this option.

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

Set this option every time before loading a tab or after switching tabs, and set it to the currently displayed tab node.