动态加载带有数据属性的 JavaScript 小部件答案

【问题标题】：Dynamically loading JavaScript widget with data attributes动态加载带有数据属性的 JavaScript 小部件
【发布时间】：2015-08-12 09:42:34
【问题描述】：

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

<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 调用传递数据属性？如何动态加载数据属性完整的上述小部件？

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

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

【问题讨论】：

$("head").append("<script data-id='LFKkv' data-width='240'><\/script>").prop("src", 'http://domain.com/public/jsonp/widget.js');
@dandavis 恐怕这没有任何作用......
@superphonic 可以在widget.js 中包含js，其中小部件在问题加载时访问script 元素的data-* 属性？
@guest271314 我不确定你刚才说什么，抱歉。
@superphonic 可以访问附加到文档的script 元素的data-* 属性的widget.js 的一部分？

标签： javascript jquery ajax jsonp

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用 jQuery load() 喜欢

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

【讨论】：

Ermm...我是小部件的所有者，它确实看到了数据属性，这就是小部件的定制方式
@superphonic，它是如何看到属性的？不是来自后端？
您只需将该脚本标记连同属性一起放置在您希望显示小部件的页面中。小部件使用 jsonp 进行跨域使用
@superphonic，当你这样做
我可以 100% 确认它确实看到了数据属性。

【解决方案3】：

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

【讨论】：

【解决方案4】：

好的，你应该试试这个：

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

这是您在 url 中传递参数的方式。你输入?，然后开始输入data=value&data2=value2，它必须是正确的html编码。

【讨论】：

【解决方案5】：

你能把你的小部件包装在一个函数中，并使用一个事件监听器吗？

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

});

【讨论】：