jquery - jquey tabs ajax load html conflict problem?

Question

The html of tabs load contains js, html, and id. There may be conflicts. How to solve it?

(No ifame is needed. Every time iframe is loaded, it is obviously not as good as load. Even if it is cached, it needs to be initialized a lot. Moreover, it is very difficult to display the dialog inside the iframe outside the iframe. The same dialog will be displayed on multiple pages. This problem occurs)

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.