Динамическая загрузка JavaScript виджет с данными атрибутов

Question

В настоящее время у меня есть виджет, который вы вставляете где-то на вас страницу со следующим

<script src='http://domain.com/public/jsonp/widget.js' data-id='LFKkv' data-width='240'></script> 

Я хотел бы, чтобы загрузить это динамически после загрузки страницы, я попытался JQuery $.getScript например, ниже, что не утихает:

$.getScript("http://domain.com/public/jsonp/widget.js' data-id='LFKkv' data-width='240'", function(data){ ... }) 

Из-за пробелов в URL-адресе между атрибутами данных, которые я предполагаю.

Я мог бы использовать ajax, но я не знаю, как передавать атрибуты данных через jQuery ajax-вызов? Как динамически загружать указанный выше виджет с атрибутами данных?

EDIT: Включая соответствующие части моего виджета сценария, так что вы можете увидеть, как мой виджет захватывает данные атрибуты:

<script> 

    var scriptName = "widget.js"; 
    TGW = window.jQuery.noConflict(true); 

    var allScripts = document.getElementsByTagName('script'); 
    var targetScripts = []; 

    for (var i in allScripts) { 
     var name = allScripts[i].src 
     if(name && name.indexOf(scriptName) > 0) 
      targetScripts.push(allScripts[i]); 
    } 

    scriptTag = targetScripts[targetScripts.length - 1]; 

    // Getting the data attributes here 
    jScript = TGW(scriptTag); 
    id = jScript.data("id"); 
    widget_width = jScript.data("width"); 
    </script> 

Answer 1

Попробуйте передавая options объект в "INIT" функцию, которая загружает widget,js, установите options на виджете в success обратного вызова функции "INIT"

TGW = window.jQuery.noConflict(true); 
function initWidget (options) { 
    return TGW.ajax({ 
    url: url, 
    dataType: "script" 
    }) 
    .then(function(script) { 
    // if `TGW.widgetName()` requires several seconds to load, 
    // try adding adding `setTimeout` or `.delay` to wait 
    // until `TGW.widgetName` defined before returning `TGW.widgetName` 
    return options && TGW.widgetName 
      ? TGW.widgetName(options) 
      : TGW.widgetName(/* defaults?, are `id`, `width` required? */); 
    }); 
}; 

initWidget({"id":"LFKkv", "width":"240"}) 
.then(function(widget) { 
    console.log(widget) 
}); 

Answer 2

Использование JQuery load() как

$(window).load(function() { 
    $('<script/>').attr({ 
     'src': 'http://domain.com/public/jsonp/widget.js', 
     'data-id': 'LFKkv', 
     'data-width': '240' 
    }).appendTo('body') 
}); 

Answer 3

Вы можете обернуть ваш виджет в функции и использовать прослушиватель событий?

window.addEventListener('load', function() { 

    var allScripts = document.getElementsByTagName('script'); 
    var targetScripts = []; 

    for (var i = 0; i < allScripts.length; i++) { 
     var name = allScripts[i].src; 
     if (name && name.indexOf(scriptName) > 0) 
      targetScripts.push(allScripts[i]); 
    } 

    var scriptTag = targetScripts[targetScripts.length - 1]; 

    console.log(scriptTag.dataset.width); 

}); 

Answer 4

ОК, вы должны попробовать это вместо:

$.getScript("http://domain.com/public/jsonp/widget.js?data-id=LFKkv&data-width=240", function(data){ ... }) 

Вот как вы передаете параметры в URL-адресе. Вы помещаете ?, а затем начинаете ставить data=value&data2=value2 И он должен быть правильно закодирован html.

Answer 5

function loadjscssfile(filename, filetype){ 
    if (filetype=="js"){ //if filename is a external JavaScript file 
     var fileref=document.createElement('script') 
     fileref.setAttribute("type","text/javascript") 
     fileref.setAttribute("src", filename) 
    } 
    else if (filetype=="css"){ //if filename is an external CSS file 
     var fileref=document.createElement("link") 
     fileref.setAttribute("rel", "stylesheet") 
     fileref.setAttribute("type", "text/css") 
     fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref!="undefined") 
     document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file