javascript - Remove iframe and prevent conflicts with libraries -
we have application make carrusel images , using iframe insert in web pages.
we want remove iframe, , have ready work 1 div, our users insert in 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 our code minified gulp.
our javascript call our api , paint necessary inside div, problem using libraries, jquery , others.
we want prevent conflict example jquery or whatever other library conflict web page of user.
what best technology implement , prevent possible conflict our code?
thanks!
isolation of styles , scripts page widget embedded why iframe
typically used. keep using iframe
.
in future (once implemented in popular browsers), instead of iframe
, use all
css property value of unset
, initial
, or revert
, reset inherited styles widget element , nested elements , safely apply own styles.
for js libraries in general, there no universal way prevent conflicts, jquery, use jquery.noconflict(true)
free both $
, jquery
variables make possible other libraries (including different versions of jquery itself) reuse these variables, long able include jquery version , call jquery.noconflict(true)
before page’s own jquery version (which unlikely). alternatively, rid of using libraries @ (libraries jquery unneeded in cases), , instead use own vanilla-js script or, if can’t drop using library, try wrap code of library (together own code uses library) in self-executing anonymous function prevent variables defines leaking global namespace.
Comments
Post a Comment