加载script标签时参数

2021-08-09  本文已影响0人  AAA前端

场景

我们在开发中经常会遇到需要配合小伙伴的情况,比如我们需要开发一个js,实现摸个功能,小伙伴不需要知道这里面怎么实现的,只要要引用到页面中就行

传参

  1. 我们可以在引用js之前,可以在全局设置一个变量,在我们的js中获取变量。(会增加全局变量,增加后期维护)
  2. 我们在提供的js上实现传参。可以参考网盟代码。

原理

首先获取页面中所有的 script 标签,遍历script标签, 通过类名获取我们提供的js。 然后修改类名。以便后面的script能够执行(页面可能引用多个js,只是参数不同)。 然后获取script标签上的参数,组合拼接后发送新的js(我们也可以直接在当前js中处理逻辑)

网盟代码

(function () {
    function getDomScript() {
        var aScripts = document.getElementsByTagName('script');
        // console.log(aScripts);
        var domScript = '';
        var sClassName = '';
        for (var i = 0; i < aScripts.length; i++) {
            sClassName = aScripts[i].className;
            //    console.log(aScripts[i].className);
            if (sClassName == 'show-koolearn-ad') {
                domScript = aScripts[i];
                domScript.className = sClassName + '-loaded';
                break;
            }
        }
        return domScript;
    }
    function getOptions(domScript) {
        var oParams = {
            width: domScript.getAttribute('data-width'),
            height: domScript.getAttribute('data-height'),
            userid: domScript.getAttribute('data-userid'),
            type: domScript.getAttribute('data-type'),
            id: domScript.getAttribute('data-id'),
            platform: domScript.getAttribute('data-platform'),
            keyword: domScript.getAttribute('data-keyword')
        };
        return oParams;
    }
    function getSrc(oParams) {
        var url = '//un.koolearn.com/ad/show';
        var aParams = [];
        for (var i in oParams) {
            aParams.push(i + '=' + oParams[i]);
        }
        return url + '?' + aParams.join('&');
    }
    function showIframe() {
        var domScript = getDomScript();
        if (domScript != '') {
            console.log(domScript);
            var oParams = getOptions(domScript);
            // create iframe
            var domIframe = document.createElement('iframe');
            domIframe.frameBorder = '0';
            domIframe.width = oParams.width;
            domIframe.height = oParams.height;
            domIframe.src = getSrc(oParams);
            domScript.parentNode.insertBefore(domIframe, domScript);
        }
    }
    showIframe();
})();

上一篇 下一篇

猜你喜欢

热点阅读