在不使用iframe的情况下隔离HTML元素

Question

I'm building a MVC application with angular as client-side framework. I'm loading all views inside tabs; the user can open the same view multiple times and here comes the problem.

when the user opens the same view twice, there will be duplicated IDs hence some html attributes won't work correctly (eg "for" attribute for "label" element)

I know, I can generate random IDs to avoid this problem but this's not acceptable in my case.

what i need is to isolate the view root (div element) so it doesn't interfere with other elements, something like iframe but without using iframe :)

Answer 1

You cannot. The DOM structure resides inside the window and the document which follows. There can be only one window pr (i)frame.

What you could do, and the most common approach, is to generate UUID for the specific tab/view. This UUID must be available in your backend and is how you direct form posts to the correct context.

Now, while youre generating the HTML for each tab, postfix your ID's with the UUID. Keep in mind though, that if your main view is 100% static without page reloads, the DOM will keep stacking up - and eventually take up a great deal of memory.