javascript - funcion - ¿Cómo cargar apropiadamente los complementos de jQuery en un sitio web de terceros?
ejecutar javascript despues de cargar pagina (0)
Estoy construyendo un widget que utiliza algunos plugins jQuery para trabajar.
Se implementa a través de:
<script src="http://example.com/widget"></script>
<div id="widget"></div>
Y el script recuperado se ve así:
(function() {
var jQuery;
// Look for jQuery on page; if there, use it, otherwise fetch it
if (window.jQuery === undefined || window.jQuery.fn.jquery !== ''2.1.3'') {
loadScript("//code.jquery.com/jquery-2.1.3.min.js", scriptLoadHandler);
} else {
jQuery = window.jQuery;
loadExternalLibraries();
main();
}
// Fetch 3rd party libraries from server
function loadExternalLibraries() {
<% widget_javascripts.each do |filename| %>
var url = "//example.com/widget/javascripts/" + "<%= filename %>";
loadScript(url, function() {
console.log("Added " + "<%= filename%>");
});
<% end %>
}
function loadScript(url, callback) {
/* Load script from url and calls callback once it''s loaded */
var scriptTag = document.createElement(''script'');
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", url);
if (typeof callback !== "undefined") {
if (scriptTag.readyState) {
/* For old versions of IE */
scriptTag.onreadystatechange = function () {
if (this.readyState === ''complete'' || this.readyState === ''loaded'') {
callback();
}
};
} else {
scriptTag.onload = callback;
}
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(scriptTag);
}
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
loadExternalLibraries();
main();
}
function main() {
jQuery(document).ready(function($) {
$(''#widget'').plugin1();
});
}
})();
jQuery parece cargar bien, pero $(''#widget'').plugin1()
devuelve el clásico TypeError: $(...).plugin1 is not a function
.
Así que traté de seguir esta publicación ( http://alexmarandon.com/articles/widget-jquery-plugins/ ) y envolví el complemento en otra función y le pasé la variable jQuery
local así:
// Plugin1 code
function initPlugin1(jQuery) {
(function ($) {
# plugin code here
}(jQuery));
}
// modified loadExternalLibraries function
function loadExternalLibraries() {
% widget_javascripts.each do |filename| %>
var url = "//example.com/widget/javascripts/" + "<%= filename %>";
loadScript(url, function() {
initPlugin1(jQuery);
});
<% end %>
}
Además de que se me recuerda que initPlugin1 is not defined
para cada otra biblioteca de complementos recuperada, sigo obteniendo el error TypeError
original.
Asumiendo que tengo de 4 a 5 plugins de ese tipo (sin que ninguno también sea posible), ¿me estoy acercando a este problema de la manera correcta?