動態加載JavaScript的小部件與數據屬性

目前我有你的地方插入你網頁上有以下動態加載JavaScript的小部件與數據屬性

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

一個widget我想加載這個動態的頁面加載後，我曾嘗試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>

來源

2015-05-29 superphonic

'$（「頭」）附加（「<腳本數據-ID = 'LFKkv' 數據寬度= '240'><\/script> 」）.prop（「 SRC」，的「http：//域.com/public/jsonp/widget.js'）;' – dandavis

@dandavis恐怕這樣做什麼都不會做...... – superphonic

@superphonic可以在'widget.js'內包含'js'，其中widget訪問'data- *在加載問題時''script'元素的屬性？ – guest271314

嘗試通過options對象，該對象加載widget,js的「初始化」功能，在success回調「初始化」功能

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

來源

2015-06-26 17:21:37 guest271314

使用jQuery load()像

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

來源

2015-05-29 13:38:37 AmmarCSE

呃...我是窗口小部件的所有者，它看到數據屬性，這就是窗口小部件的自定義 – superphonic

@superphonic，它是如何看到這些屬性的？不是從後端？ – AmmarCSE

只需將該腳本標記和屬性放置在您希望顯示小部件的頁面中。這個小部件使用jsonp進行跨域的使用 – superphonic

你可以用你的小部件在一個函數中，並使用事件偵聽器？

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

});

來源

2015-06-26 15:34:01 Grinde

確定的小部件設置options你應該試試這個：

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

這是你如何傳遞一個url中的參數。你把?，然後開始把data=value&data2=value2它必須正確的HTML編碼。

來源

2015-06-27 04:40:36

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

來源

2015-07-01 08:44:37

試試這個，這將會起作用。 –

動態加載JavaScript的小部件與數據屬性

回答

相關問題