美文网首页
加载script标签时参数

加载script标签时参数

作者: AAA前端 | 来源:发表于2021-08-09 17:08 被阅读0次

    场景

    我们在开发中经常会遇到需要配合小伙伴的情况,比如我们需要开发一个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();
    })();
    
    

    相关文章

      网友评论

          本文标题:加载script标签时参数

          本文链接:https://www.haomeiwen.com/subject/mmgzvltx.html