场景
我们在开发中经常会遇到需要配合小伙伴的情况,比如我们需要开发一个js,实现摸个功能,小伙伴不需要知道这里面怎么实现的,只要要引用到页面中就行
传参
- 我们可以在引用js之前,可以在全局设置一个变量,在我们的js中获取变量。(会增加全局变量,增加后期维护)
- 我们在提供的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();
})();
网友评论