A
A
Alexander2016-04-01 11:26:32
JavaScript
Alexander, 2016-04-01 11:26:32

I am writing a js-widget for embedding in third-party sites. How to connect js plugins and libraries without "conflicts"?

Hello Toaster!
A widget will be embedded into affiliate sites that displays a list of products.
My embed code looks like this:

<div id="widget1"></div>

  <script>			
  var set = {
    id: 'widget1',
    partner: 1,
    currency: 'rub'
  };
  (function(){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = "http://site.ru/api/widget.js";
    document.getElementsByTagName('head')[0].appendChild(s);
  })();			
  </script>


Inside widget.js, I connect css, jquery and several plugins to it (datapicker, keyfilter, autocomplete, photo frame), after that I get the content using ajax and insert it into "#widget1" on the partner page.
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href",  "http://site.ru/api/widget.css");
document.getElementsByTagName("head")[0].appendChild(link);

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = false;
s.src =  "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js";
document.getElementsByTagName('head')[0].appendChild(s);

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = false;
s.src =  "https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js";
document.getElementsByTagName('head')[0].appendChild(s);

// ajax и все остальное...


Who implemented this, tell me, I'm on the right path?

I had a misunderstanding, it turns out that I connect my set of js libraries and plugins to the page for my partner, but what if he ALREADY has them connected on the page? For example, jquery is most likely already connected to it, and, perhaps, the version is higher than mine. I suspect that conflicts may begin.

Is there any way I can check if the library/plugin I need is included and if it matches the version I need?
And how in general, in the mind, should this problem be solved?
Thank you.

P.S. The option "to rewrite the entire widget in pure js" is not considered now, the deadlines are running out.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
Natalia Bazenova, 2016-04-01
@logiciel

To be honest, this approach - dragging a bunch of plugins with you and pushing them into someone else's page - seems to me not only unprofessional, but also dishonest towards partners. They will not know why their page is slowing down.
When I wrote widgets, I immediately took pure js without dependencies - it's clear that conflicts are inevitable.
You might be advised to embed your widget in an iframe. At least there won't be any conflicts.

A
Alexey Kot, 2016-04-01
@CheshireCat

I think using the "module" pattern you should not have any conflicts. More
I see that you are using an immediately-called function, so you are familiar with this.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question