Remove iframe and prevent conflicts with libraries - javascript

We have an application to make carrusel images and we are using an iframe to insert in web pages.
We want to remove the iframe, and we have all ready to work just with one div, something like this is that our users will insert in their pages:
<script src="https://www.example.com/mycustom-carrusel.min.js"></script>
<div id="custom-unique-id" style="width:100%;height:300px;"></div>
The mycustom-carrusel.min.js has all our code minified with gulp.
Our javascript will call our API and paint all the necessary inside the div, the problem is that we are using some libraries, like jQuery and others.
We want to prevent the conflict with for example jQuery or whatever other library that could conflict with the web page of the user.
What is the best technology to implement this and prevent any possible conflict with our code?
Thanks!

Isolation of styles and scripts from the page the widget is embedded to is exactly why iframe is typically used. Just keep using iframe.
In some future (once implemented in all popular browsers), instead of iframe, you could use the all CSS property with a value of unset, initial, or revert, to reset all inherited styles for your widget element and its nested elements and then safely apply your own styles.
For JS libraries in general, there is probably no universal way to prevent conflicts, but specifically for jQuery, you could use jQuery.noConflict(true) to free both $ and jQuery variables to make it possible for other libraries (including different versions of jQuery itself) to reuse these variables, but only as long as you are able to include your jQuery version and call jQuery.noConflict(true) before the page’s own jQuery version (which is unlikely). Alternatively, just get rid of using libraries at all (libraries like jQuery are currently actually unneeded in most cases), and instead just use your own vanilla-JS script or, if you really can’t drop using a library, try to wrap the code of the library (together with your own code that uses the library) in a self-executing anonymous function to prevent variables it defines from leaking to the global namespace.

Related

Multiple jQuery scripts used - how include these in an extendable OO way?

Are there any docs or training materials available that advise the best way to include multiple jQuery plugins in an abstract way, allowing for extension of those plugins, and also global control of things like events, setTimeout() etc?
I want to be able to do these kind of things:
Extend someone else's jQuery plugin, e.g. if I want to add a new feature, but not touch the original codebase
Have my own server-side detection script pass a value to JS (using a HTML meta tag) so JS can detect that and then decide which script to use (e.g. tone down some of the jQuery for lesser devices)
Better control all the events that are attached
setTimeout() - I have loads of these dotted around the place at various intervals - I want to control all this in one function
Add my own fixes to jQuery scripts. If I download a ready-made one and use it I always find I can improve usability - especially on mobile devices - so I want to add my own fixes and improvements.
Control the resize event. There's all sorts going on at the moment and it's quite a job triggering a full re-size when I write new code (and the resize is pretty slow on some mobile devices)
You can use RequireJS or similar library to load scripts dynamically depending on screen size or navigator's user agent parameter (You will need to set condition checking yourself though).

What is the best approach for a widget-container page - Ajax or iframe?

I need to implement a page of which many parts are dynamic widgets. Which widgets are loaded depend on user choice and are not known before hand. Each of these widgets include some HTML, and some javascript code (to initialize and attach event handlers on the HTML elements). I am wondering what is the best approach to implement such a page and widgets.
AJAX. I could construct response with some HTML followed by a <script> tag. Although returning js code in AJAX is not recommended, I found this works for me (the script get executed, with HTML widget properly initialized and handlers attached). An alternative is to include an 'all-included' script in the container page. In this script I wrap each of widget-specific script in a function, and when the widget is dynamically loaded, I call that function. However, this way I fetch a lot of js code that may not be used.
Iframe. I can also return the widget as a standalone HTML page to be loaded in iframes. This solves the javascript problem, but I need to make cross-domain calls to interacte with other part of the container page.
I think this should be a common problem faced by web developers. I am new to web development, could you share some 'best pratice' tips for my case?
You should be going ahead with jquery+ajax.. There are lots of drawbacks with iframes. Although you could handle each plugin in separate page and avoid any kind of conflict, usablitity becomes a great headache..
In the time of everything going HTML5 based to support mobile platforms, iframes are hard to cuztomise for mobile screens. Moreover iframe takes out the entire apple users as iframes are not supported by apple devices..
jQuery + Ajax(HTML5) along with CSS3 should be the way to proceed..

Use ExtJs and JQuery together in one application?

we have a big ExtJS (still ExtJs 2) application, which provides windows explorer like functionality on a Java EE server.
We now evaluate implementing a new functionality; we could base this functionality on a jQuery plug in.
Is it recommended to use jQuery and ExtJs in one application?
Or will I have to deal with side effects occurring?
You will not have to deal with any side effect. The only problems I ever ran into when I did this is if I tried to operate on elements that Extjs relied on being left alone. Just make sure that when you start operating using jQuery that you're working inside a div that extjs doesn't plan to mess with. The best way to do this is to inherit from Ext.Component and then operate inside the div it provides. Ext doesn't do anything inside this div so you should be ok. You can also tap into the resize functionality if you need to, though this is not really necessary.
My company does so with no problems on a fairly large Apache/Catalyst site. We do use jQuery() rather than $() due to some old Prototype stuff on our site.
More: Blueprint CSS Extjs and JQuery in the same page, best way to make them coexist without conflict
keep jQuery within the jQuery namespace http://api.jquery.com/jQuery.noConflict/
Use it like so: $.noConflict();
jQuery only adds a single object (jQuery) to the window's context so you won't have any conflicts.
PROBLEM: Some third party libraries for jquery may rely on static webpage organization. As ExtJS components can be added to webpage dynamically - they will have no functions from third party libraries.
SOLUTION: You will have to run this library's script after component is added (use afterrender event, for example). Then you can call these functions on this ext component.

Cloning javascript library into iFrame

I'm creating a popup dialog using jQueryUI. I have run into problems because I'm using exactly the same blocks of HTML and JavaScript code as on the page. (The application was not designed for that and I'm not going to recode it deeply). So I have two tags with same ID attributes in the document - on the page and in popup.
To avoid this I decided to open the dialog in an iFrame. Everything works, of course, but the popup opens too slowly (it has a long list of JS and CSS files to load). They are in cache of course, but the browser seems to send requests to check them.
The question: can anything be done as a quick help? I can connect the parent window using Javascript, so can I somehow import, or clone (deep copy), for example, jQuery library? What do you think of it?
(Please don't blame me if the question is crazy)
You don't need to clone jQuery, you may use it also from within the frame.
parent.$('selector', document).someMethod()

Can jQuery Mobile be used without altering layout or DOM?

I'm interested in using only some of the components of jQuery mobile (specifically, the tap event handlers and datepicker). What's the best way to make use of the library without it "taking over" the layout and behavior my mobile web app?
modifying DOM is JQM's main feature. You have to cripple it hard.
Get the repo from git, remove all plugins from manifest, get to the code and find the .page method/widget and remove all the code (or leave some bits if you need to get something working - I haven't tried that).
Then run make and it will create a stripped jquery.mobile.min.js for you

Categories