动态加载具有数据属性的JavaScript小部件

superphonic 发表于 Dev

超音

目前，我有一个小部件，您可以在页面上的某处插入以下内容

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

我想在页面加载后动态地加载它，我尝试了$.getScript如下所示的jQuery ，但失败了：

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

由于数据属性之间URL上的空格，我假设。

我可以使用ajax，但不知道如何通过jQuery ajax调用传递数据属性？如何动态地加载完整的数据属性的上述小部件？

编辑：包括我的小部件脚本的相关部分，以便您可以看到我的小部件如何获取数据属性：

    <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>

客人271314

尝试将options对象传递到加载的“ init”函数，该函数在“ init”函数的回调中的小部件上widget,js设置optionssuccess

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)
});