How to avoid conflicts of HTML identifiers when adding third-party pages to the DOM?

Question

When adding additional HTML elements to a web page using Javascript / jQuery and adding additional external CSS declarations that you need to use with them, you need to prevent the identifiers of these elements and CSS class names from matching those already on the page. for example, you may already have an ID, for example, "externalWrapper" or "nav" somewhere on the page, and new content may also have identifiers of the same name.

Creating code to be added to your own web pages is relatively simple.

But if you want to provide code that can be used on any third-party website, you cannot control which identifiers and class names are already used on the page, and even less than what changes may be made to the page in the future.

So what is the best practice to prevent these conflicts when working with third-party code?

So far, we just used iframes, but this is not ideal.

The CSS child selector may prevent our added CSS from influencing existing elements / classes, but they will not prevent our new elements from getting CSS styles that were already on the page.

Is the prefix of all the identifiers of our added content, for example, the company, product name or container name, the only way to promote it? for example, the JWPlayer video player prefixes the container name for all element identifiers for its HTML5 player.

I would be grateful for any thoughts.

Answer 1

One option would be to use a GUID to generate an identifier when a DOM is created dynamically. The downside is that the identifier will not use the convenience for the user (since this is just a list of randomly generated characters). Check out this topic: Create a GUID / UUID in JavaScript?

Another option is to create your own naming convention similar to what ASP.Net does. The control may have a static name (for example, "myControl"), but it will receive a list of all the parent objects previously superimposed on it. The user needs to make sure that they follow good HTML practices and provide an identifier to their elements. So, if your generated controls were nested in a table, in a div, your new identifier might look something like this: myTable_myDiv_myControl.

Answer 2

This was also a problem for me, especially because the application I'm working on consists of a lot of jquery popups / dialogs that contain form fields with an input identifier just like the form fields in the parent of the page.

Things I found that resolve this satisfactorily:

• Rely on creating server-side HTML inputs (I created my own class for this). This will give you the freedom to “prefix” your HTML input id easily.
• Use ONLY camelCase in everything you do. When you are in a situation that requires a prefix to avoid name collisions, then you can use the underscore to show how to separate the part of the name and which not. The underline will now have a direct purpose in your application, so you can easily write functionality to disable the prefix when you need it.
• Create prefixes using a consistent naming convention. I personally grabbed the class name of the base service class from where the source data comes from (not to be confused with the class you reuse to create it, specified in # 1), and use it as a prefix. For example, blogUsers_firstName and blogUsers_lastName and blogUsers_email are all HTML text inputs that come from a server-side class blogUsers { } called class blogUsers { } .
• Separate the prefixes when you do things like make ajax calls to get input in your classes on the server side without a prefix (since now you are on the server side and you have no name collisions), It makes life a lot easier and more understandable on the side server.
• For more public situations on an external website, where you are more likely to contain your inputs inside the <form> and are likely to implement progressive enhancement / graceful degradation (i.e. binding the jquery click to the submit button with event.preventDefault ), then don’t worry ... just make sure your server generation ONLY adds a prefix to the ID, not the NAME of the input. When sending data, regular messages of the old form use name , so do not do this without a prefix, and you will be fine for those imaginary paranoid people who turned off javascript.