美文网首页
加载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标签时参数

    场景 我们在开发中经常会遇到需要配合小伙伴的情况,比如我们需要开发一个js,实现摸个功能,小伙伴不需要知道这里面怎...

  • javascript性能优化

    优化页面加载时间html标签加载顺序浏览器加载和执行script标签引入的js时,会暂停页面渲染,直到代码加载并执...

  • 模块加载标准

    熟悉模块加载标准之后 浏览器 html 文本插入非常多 script 标签时,异步加载这些标签,使页面响应速度变快...

  • require js

    js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此...

  • 跨域

    JSONP 原理: 动态创建一个script标签,动态加载一个js文件,载入成功之后会执行在url参数中指定的函数...

  • script标签的async和defer

    script标签用于加载脚本与执行脚本,直接使用script脚本的话,HTML会按照顺序来加载并执行脚本,在脚本加...

  • JS基础

    defer(延迟脚本)和async(异步脚本)区别:当把script的标签放在头部时,都是延迟加载,立即执行。但是...

  • script 标签应该放在html文件的什么位置

    问题: 当在html文件中嵌入script标签时,正确的位置应该放在哪里? 分析 当浏览器加载一个含有 标签的页面...

  • 文档就绪函数的四种写法

    当script标签写在head标签内时才需要使用文档就绪函数当它写在文档末尾时不需要写文档就绪函数这是加载顺序的问...

  • 浏览器渲染机制 /CSS控制多行省略号

    前端HTML浏览器渲染顺序,HTML代码自上而下进行解析加载。 先解析head标签中的代码。遇到script时,浏...

网友评论

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

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