Skip to main content

Tedshd's Dev note

JavaScript - Dynamic Load script || JSONP Callback

Table of Contents

# JavaScript - Dynamic Load script || JSONP Callback

## Intro

Sometimes we need dynamic load script or handle jsonp callback

And we need handle script onload or jsonp callback onload or something error

## How to do?

Use onload, onerror method

## Code

if (typeof UTIL == 'undefined' || !UTIL) {
    var UTIL = {};
}
UTIL.createEl = {
    get: function(sTag, oAttr, handleOnLoad, handleError) {
        var el = document.createElement(sTag);
        for (var i in oAttr) {
            el[i] = oAttr[i];
        }
        if (handleOnLoad) {
            el.onload = handleOnLoad;
        }
        if (handleError) {
            el.onerror = handleError;
        }
        this.append(el);
        return el;
    },
    append: function(dNode) {
        var dHead = document.getElementsByTagName('head')[0] || document.body;
        dHead.appendChild(dNode);
    },
    remove: function(dNode) {
        setTimeout(function() {
            dNode.parentNode.removeChild(dNode);
            dNode = null;
        }, 0);
    },
    js: function(sUrl, handleOnLoad, handleError) {
        var dNode = this.get('script', {
            src: sUrl,
            type: 'text/javascript'
        }, handleOnLoad, handleError);
        return dNode;
    },
    css: function(sUrl, sMedia) {
        if (!sMedia) {
            sMedia = 'all';
        }
        return this.get('link', {
            'href':sUrl,
            'rel':'stylesheet',
            'type':'text/css',
            'media':sMedia
        });
    }
};

## Example

var run = function() {
    alert('OK');
},
errorHandle = function() {
    alert('Error');
};
UTIL.createEl.js('http://tysh310246.blogspot.com/feeds/posts/default?alt=json&callback=myFunction', run, errorHandle);

function myFunction (data) {
    console.log(data);
}

Refer - JavaScript Madness: Dynamic Script Loading Refer - Script Loading issue « 小莊記事