/** * 创建广告 * config 参数说明 * @param {string[]} ad_id 广告id * @param {string} ad_type 广告类型 1:视频 2:图片 * @param {string} ad_pos 广告位置 * @param {string[]} ad_size 广告尺寸 * @param {string} ad_text 广告文案 * @param {string[]} ad_url 广告链接 * @param {string[]} ad_cover 广告图片 */ document.addEventListener('DOMContentLoaded', function () { const base = 'http://10.30.160.129:8082/' /** * 广告初始化 * @param config 广告配置 * @returns */ function ad_init(config = {}) { const uuid = localStorage.getItem('ad_id') // 启动上报 fetch(`${base}ad/click?uuid=${uuid}`).then((res) => res.text()) const slots = config.slots || [] const date = new Date() const dateTime = date.getTime() for (let i = 0; i < slots.length; i++) { const v = slots[i] if (!v.creativesList || !v.creativesList.length) continue // 获取对应广告位置 const ad_pos = document.querySelector('#sxtv-ad-' + v.slotId) if (!ad_pos) return console.error('广告位置不存在：#sxtv-ad-' + v.slotId) // 判定当前时间是否在creativesList的时间内 const ele = document.createElement('div') for (let o = 0; o < v.creativesList.length; o++) { const item = v.creativesList[o] const start = new Date(item.startDate + ' 00:00:00').getTime() const end = new Date(item.endDate + '').getTime() // 判断变量是否数组 if (dateTime < start || dateTime > end || !Array.isArray(item.stuffsList)) continue // 获取广告类型 1 轮播 2 交替 const showType = item.showType console.log('广告类型', showType) if (showType === 2) ele.appendChild(generateAlternateAd(item), date) else if (showType === 1) ele.appendChild(generateCarouselAd(item, date)) ele.style.width = '100%' ele.style.height = '100%' ele.addEventListener('click', () => { // 点击广告 fetch(base + 'ad/click?uuid=123&stuffId=1008&slotId=3') .then((res) => res.text()) .then(() => { window.open(v.ad_url) }) }) } ad_pos.style.width = v.width + 'px' ad_pos.style.height = v.height + 'px' ad_pos.appendChild(ele) } } // 生成轮播广告 const generateCarouselAd = function (generateCarousel = {}) { console.log('生成轮播广告', generateCarousel) const son_ele = document.createElement('div') return son_ele } // 生成交替广告 const generateAlternateAd = function (generateAlternate = {}) { console.log('生成交替广告', generateAlternate) const son_ele = document.createElement('div') return son_ele } function generateBrowserFingerprint() { return new Promise((resolve, reject) => { // 在这里执行获取指纹的操作，例如使用Canvas、WebGL等方法 // 然后将生成的指纹字符串作为参数传递给resolve函数 // 获取浏览器信息 const browserInfo = `${navigator.userAgent} ${window.screen.width}x${window.screen.height}` // 获取时区偏移量 const timezoneOffset = Intl.DateTimeFormat().resolvedOptions().timeZone // 在这里处理获取到的指纹信息 const canvasFingerprint = getCanvasFingerprint() const webglFingerprint = getWebglFingerprint() // 将所有信息组合成一个字符串 const fingerprintStr = `${browserInfo}|${timezoneOffset}|${canvasFingerprint}|${webglFingerprint}` // 使用createHash生成哈希值 createHash(fingerprintStr) .then((hash) => { resolve(hash) }) .catch((error) => { reject(error) }) }) } // Canvas指纹获取函数 function getCanvasFingerprint() { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') if (!ctx) return '' // 绘制一些内容 ctx.fillStyle = '#f60' ctx.fillRect(0, 0, 16, 16) ctx.fillStyle = '#069' ctx.font = '11pt Arial' ctx.fillText('Cwm fjord!!', 4, 10) ctx.fillStyle = 'rgba(102, 204, 0, 0.7)' ctx.fillText('Cwm fjord!!', 5, 11) ctx.scale(2, 2) ctx.fillStyle = '#fff' ctx.font = '24pt Arial' ctx.fillText('Cwm fjord!!', 10, 25) ctx.fillStyle = 'rgba(102, 204, 0, 0.7)' ctx.fillText('Cwm fjord!!', 10, 25) const data = canvas.toDataURL() return data.replace(/data:image\/png;base64,/, '') } // WebGL指纹获取函数 function getWebglFingerprint() { const canvas = document.createElement('canvas') const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') if (!gl) return '' const extensions = gl.getSupportedExtensions() if (!extensions) return '' const extStr = extensions.join(',') const rendererInfo = gl.getParameter(gl.RENDERER) + '/' + gl.getParameter(gl.VENDOR) return rendererInfo + extStr } function createHash(str) { if (!crypto || !crypto.subtle || !crypto.subtle.digest || !TextEncoder) { console.error('浏览器不支持创建哈希值') return Promise.reject() } // 将字符串转换为 Uint8Array const encoder = new TextEncoder() const data = encoder.encode(str) // 使用 SubtleCrypto API 计算 SHA-256 摘要 return new Promise((resolve, reject) => { crypto.subtle .digest('SHA-256', data) .then((hashBuffer) => { // 将 ArrayBuffer 转换为十六进制字符串 const hashArray = Array.from(new Uint8Array(hashBuffer)) const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('') resolve(hashHex) }) .catch((error) => { reject(error) }) }) } // const CFG = '__AD_CONFIG__' const CFG = '{"catalogId":2,"catalogName":"首页测试4","createTime":"2024-11-18T17:23:17","mediaId":1048,"parentId":0,"slots":[{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:45:59","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":11,"slotName":"测试9-1","status":10,"uid":1,"updatedTime":"2024-11-26T10:04","width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:45:41","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":10,"slotName":"测试8","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:44:49","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":9,"slotName":"测试7","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:44:42","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":8,"slotName":"测试6","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:44:32","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":7,"slotName":"测试5","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:44:25","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":6,"slotName":"测试4","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-26T09:44:07","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":5,"slotName":"测试3","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-25T15:00:18","creativesList":[],"height":1,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":3,"slotName":"测试2","status":10,"uid":1,"width":1},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-25T14:57:22","creativesList":[],"height":100,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":2,"slotName":"测试1","status":10,"uid":1,"width":100},{"adType":1,"catalog":{"catalogId":2,"catalogName":"首页测试4"},"catalogId":2,"createdTime":"2024-11-18T17:43:56","creativesList":[{"createdTime":"2024-11-19T10:24:21","creativeId":1013,"creativeName":"测试创意2","endDate":"2029-11-20","intervalType":2,"showType":1,"startDate":"2024-11-18","status":10,"stuffsList":[{"addr":"https://cxzx.smcic.net/ad/stuff/20241126/1608375984.png","createdTime":"2024-11-26T16:08:39","creativeId":1013,"height":323,"landingPage":"123","status":10,"stuffId":1013,"stuffName":"测试12","type":1,"uid":1,"updatedTime":"2024-12-04T15:05:41","width":421}],"timeInterval":"000000000000000000000000111111111111111111111111000000000000000000000000111111111111111111111111000000000000000000000000111111111111111111111111111111111111111111111111","updatedTime":"2024-12-04T16:14:15"}],"height":200,"media":{"mediaId":1048,"mediaName":"西部网"},"mediaId":1048,"slotId":1,"slotName":"首页测试广告位","status":10,"width":300}],"status":1}' const data = JSON.parse(CFG) // 广告sdk if (localStorage.getItem('ad_id')) { ad_init(data) return } // 生成并输出浏览器指纹 generateBrowserFingerprint().then((ad_id) => { localStorage.setItem('ad_id', ad_id + '') ad_init(data) }) })