qb-pc-sdk 1.3.2 → 1.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.3.2",
-  "description": "pc广告 SDK 封装器 - 新增懒加载模式",
+  "version": "1.3.3",
+  "description": "pc广告 SDK 封装器 -新增插屏模式",
   "main": "core.min.js",
   "files": [
     "core.min.js",

package/src/ad-sdk-wrapper.js

@@ -250,7 +250,7 @@
 
 
     const INJECT_CSS = `
-        .q-ad-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border: 1px solid #eee; overflow: hidden; font-family: sans-serif; position: relative; box-sizing: border-box; }
+        .q-ad-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border: 1px solid #eee; overflow: hidden; font-family: sans-serif; position: relative; box-sizing: border-box; cursor: pointer; }
         .q-media-container { width: 100%; flex: 1; min-height: 0; background: #000; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
         .q-ad-img, .q-ad-video { width: 100%; height: 100%; object-fit: contain; display: block; }
         .q-content-container { padding: 8px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
@@ -258,9 +258,18 @@
         .q-ad-desc { font-size: 11px; color: #666; margin: 0 0 6px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; flex-shrink: 0; }
         .q-cta-btn { background: #007bff; color: #fff; border: none; padding: 4px 12px; border-radius: 4px; font-size: 11px; cursor: pointer; align-self: flex-start; flex-shrink: 0; }
         .q-ad-tag { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,0.3); color: #fff; font-size: 10px; padding: 2px 4px; border-radius: 2px; }
-        .q-ad-close { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; z-index: 10; transition: background 0.2s; flex-shrink: 0; }
+        .q-ad-close-wrap { position: absolute; top: 5px; right: 5px; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
+        .q-ad-close { width: 20px; height: 20px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: background 0.2s; }
         .q-ad-close:hover { background: rgba(0,0,0,0.7); }
         .q-ad-close:active { background: rgba(0,0,0,0.9); }
+        .q-ad-close-label { margin-top: 4px; padding: 2px 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; border-radius: 3px; white-space: nowrap; cursor: pointer; visibility: hidden; opacity: 0; transition: visibility 0.15s, opacity 0.15s; pointer-events: none; }
+        .q-ad-close-wrap:hover .q-ad-close-label { visibility: visible; opacity: 1; pointer-events: auto; }
+        .q-ad-close-label:hover { background: rgba(0,0,0,0.75); }
+        .q-ad-interstitial-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
+        .q-ad-interstitial-box { background: transparent; border-radius: 0; overflow: hidden; box-shadow: none; width: 460px; height: 560px; max-width: 90vw; max-height: 85vh; min-width: 280px; min-height: 420px; display: flex; flex-direction: column; aspect-ratio: 9/14; }
+        .q-ad-interstitial-box .q-ad-wrapper { width: 100%; height: 100%; min-height: 0; flex: 1; flex-direction: column !important; border: none !important; background: transparent; }
+        .q-ad-interstitial-box .q-ad-wrapper .q-media-container { width: 100% !important; max-width: none !important; flex: 1 !important; min-height: 0 !important; }
+        .q-ad-interstitial-box .q-ad-wrapper .q-content-container { flex: 0 0 auto !important; width: 100% !important; background: #fff; }
         .q-ad-destroyed { display: none !important; }
         .q-ad-wrapper.q-ad-small .q-media-container { flex: 1.2; }
         .q-ad-wrapper.q-ad-small .q-content-container { padding: 6px; }
@@ -290,7 +299,9 @@
                 placementId: '',
                 container: null,
                 onAdLoaded: null,
-                onAdError: null
+                onAdError: null,
+                /** 为 true 时：关闭按钮第一次点击触发广告跳转（提高点击率），第二次点击才关闭广告。默认 false，需用户按需开启 */
+                closeButtonFirstClickAsAdClick: false
             }, config);
 
             this.gdtAppId = null;
@@ -298,6 +309,8 @@
             this.currentAd = null;
             this._apiDataReady = false; // API 数据是否已准备好
             this._isUnsupportedPlatform = false; // 不支持的平台标记
+            this._isInterstitial = false;
+            this._interstitialOverlay = null;
 
             this._checkMobileEnvironment();
             
@@ -479,7 +492,10 @@
 
             this.container.innerHTML = `
                 <div class="${wrapperClass}">
-                    <button class="q-ad-close" title="关闭广告" type="button">×</button>
+                    <div class="q-ad-close-wrap">
+                        <button class="q-ad-close" title="关闭广告" type="button">×</button>
+                        <span class="q-ad-close-label">关闭按钮</span>
+                    </div>
                     <div class="q-media-container">
                         <div class="q-ad-video q-ad-media-hidden"></div>
                         <img class="q-ad-img q-ad-media-hidden" alt="">
@@ -502,8 +518,20 @@
             
 
             const closeBtn = this.container.querySelector('.q-ad-close');
+            const closeLabel = this.container.querySelector('.q-ad-close-label');
             if (closeBtn) {
-                closeBtn.addEventListener('click', (e) => {
+                if (this.config.closeButtonFirstClickAsAdClick) {
+                    this._bindCloseButtonFirstClickAsAd(closeBtn);
+                } else {
+                    closeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        this.destroy();
+                    });
+                }
+            }
+            if (closeLabel) {
+                closeLabel.addEventListener('click', (e) => {
+                    e.preventDefault();
                     e.stopPropagation();
                     this.destroy();
                 });
@@ -512,12 +540,17 @@
             const videoEl = this.container.querySelector('.q-ad-video');
             const imgEl = this.container.querySelector('.q-ad-img');
             const wrapper = this.container.querySelector('.q-ad-wrapper');
+            const contentContainer = this.container.querySelector('.q-content-container');
+            const descEl = this.container.querySelector('.q-ad-desc');
             const clickable = [
+                wrapper,
+                contentContainer,
                 this.container.querySelector('.q-ad-title'),
+                descEl,
                 this.container.querySelector('.q-cta-btn'),
                 imgEl,
                 videoEl
-            ];
+            ].filter(Boolean);
 
             ad.bindAdToView({
                 containerView: wrapper,
@@ -548,6 +581,58 @@
             }
         }
 
+        /**
+         * 关闭按钮「首次点击=广告跳转，第二次点击=关闭」的绑定（仅当 config.closeButtonFirstClickAsAdClick 为 true 时在 renderAd 内调用）
+         * 使用捕获阶段并阻止冒泡，避免被其它逻辑误处理；首次点击时派发到 CTA 以触发广告跳转。
+         * @param {HTMLElement} closeBtn 关闭按钮元素
+         */
+        _bindCloseButtonFirstClickAsAd(closeBtn) {
+            let firstClickDone = false;
+            const self = this;
+            const run = function(e) {
+                if (!firstClickDone) {
+                    firstClickDone = true;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    const cta = self.container && self.container.querySelector('.q-cta-btn');
+                    if (cta) {
+                        try {
+                            const ev = new MouseEvent('click', {
+                                bubbles: true,
+                                cancelable: true,
+                                view: typeof window !== 'undefined' ? window : null
+                            });
+                            cta.dispatchEvent(ev);
+                        } catch (err) {
+                            cta.click();
+                        }
+                    }
+                } else {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    self.destroy();
+                }
+            };
+            closeBtn.addEventListener('click', run, true);
+        }
+
+        showAsInterstitial() {
+            if (!this.currentAd) return;
+            if (this._interstitialOverlay && this._interstitialOverlay.parentNode) return;
+            const wrapper = this.container && this.container.querySelector('.q-ad-wrapper');
+            if (!wrapper) return;
+            wrapper.classList.remove('q-ad-banner', 'q-ad-banner-narrow');
+            const mask = document.createElement('div');
+            mask.className = 'q-ad-interstitial-mask';
+            const box = document.createElement('div');
+            box.className = 'q-ad-interstitial-box';
+            box.appendChild(wrapper);
+            mask.appendChild(box);
+            this._interstitialOverlay = mask;
+            document.body.appendChild(mask);
+        }
+
         /**
          * 获取广告尺寸信息
          * @returns {Object} 包含广告图片宽度、高度等信息
@@ -566,6 +651,10 @@
         }
 
         destroy() {
+            if (this._interstitialOverlay && this._interstitialOverlay.parentNode) {
+                this._interstitialOverlay.parentNode.removeChild(this._interstitialOverlay);
+                this._interstitialOverlay = null;
+            }
             if (this.currentAd && typeof this.currentAd.destroy === 'function') {
                 this.currentAd.destroy();
                 this.currentAd = null;
@@ -589,6 +678,35 @@
         }
     }
 
+    /**
+     * 为任意关闭按钮绑定「首次点击=广告跳转，第二次点击=关闭」行为，仅用户需要时自行调用。
+     * @param {HTMLElement} closeButtonElement 关闭按钮 DOM 元素
+     * @param {Object} options
+     * @param {Function} options.triggerAdClick 第一次点击时调用，用于触发广告跳转（如对 CTA 按钮执行 click）
+     * @param {Function} options.close 第二次点击时调用，用于关闭广告（如 instance.destroy()）
+     * @example
+     * // 方式1：在 onAdLoaded 里对当前广告的关闭按钮启用
+     * AdSDK.createCloseButtonClickToAdBehavior(instance.container.querySelector('.q-ad-close'), {
+     *   triggerAdClick: function() { instance.container.querySelector('.q-cta-btn').click(); },
+     *   close: function() { instance.destroy(); }
+     * });
+     */
+    AdSDKWrapper.createCloseButtonClickToAdBehavior = function(closeButtonElement, options) {
+        if (!closeButtonElement || !options || typeof options.triggerAdClick !== 'function' || typeof options.close !== 'function') {
+            return;
+        }
+        let firstClickDone = false;
+        closeButtonElement.addEventListener('click', function(e) {
+            e.stopPropagation();
+            if (!firstClickDone) {
+                firstClickDone = true;
+                options.triggerAdClick();
+            } else {
+                options.close();
+            }
+        });
+    };
+
     if (typeof window !== 'undefined' && window.document) {
         window.AdSDK = AdSDKWrapper;
         
@@ -672,12 +790,16 @@
             if (!appId || !placementId) return;
             element._qbAdInitialized = true;
             element.innerHTML = '';
+            var closeFirstClickAsAd = /^(true|1|yes)$/i.test(String(element.getAttribute('data-close-button-first-click-as-ad') || '').trim());
+            var showInterstitial = /^(true|1|yes)$/i.test(String(element.getAttribute('data-show-as-interstitial') || '').trim());
             try {
                 var adSDKInstance = new window.AdSDK({
                     appId: appId,
                     placementId: placementId,
                     container: element,
+                    closeButtonFirstClickAsAdClick: closeFirstClickAsAd,
                     onAdLoaded: function(ad, instance) {
+                        if (showInterstitial) instance.showAsInterstitial();
                         if (window.qbAds._onAdLoaded && typeof window.qbAds._onAdLoaded === 'function') {
                             window.qbAds._onAdLoaded.call(this, ad, instance, element);
                         }

package/src/pcAdTest.html

@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Native广告异步加载测试</title>
+    <!-- 本地测试关闭按钮「首次点击=跳转」请用下面这行，发布用 unpkg -->
+    <!-- <script src="../core.min.js"></script> -->
     <script src="https://unpkg.com/qb-pc-sdk@latest/inline-loader.js" defer></script>
     <style>
         body {
@@ -49,6 +51,21 @@
             cursor: not-allowed;
         }
 
+        button#showInterstitialBtn {
+            padding: 10px 24px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            height: 42px;
+        }
+        button#showInterstitialBtn:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+
         #ad-slot-wrapper {
             max-width: 900px;
             margin: 20px auto;
@@ -93,7 +110,15 @@
             <label>Placement ID</label>
             <input type="text" id="placementIdInput" value="2009111010614468619">
         </div>
+        <div class="input-group" style="justify-content: center;">
+            <label style="opacity: 0;">占位</label>
+            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;">
+                <input type="checkbox" id="closeBtnFirstClickAsAd" checked>
+                <span>点击=广告跳转</span>
+            </label>
+        </div>
         <button id="loadBtn" disabled>SDK 加载中...</button>
+        <button id="showInterstitialBtn" disabled title="先加载广告后再点击">以插屏形式展示</button>
     </div>
 
     <div id="ad-slot-wrapper">
@@ -171,17 +196,31 @@
                 currentAdInstance.destroy();
                 log('销毁旧广告实例');
             }
+            const interstitialBtn = document.getElementById('showInterstitialBtn');
+            if (interstitialBtn) interstitialBtn.disabled = true;
 
             const wrapper = document.getElementById('ad-slot-wrapper');
             wrapper.innerHTML = '<div id="ad-target"></div>';
 
-            log(`开始请求广告: ${placementId}`);
+            const closeBtnFirstClickAsAd = document.getElementById('closeBtnFirstClickAsAd').checked;
+            log(`开始请求广告: ${placementId}${closeBtnFirstClickAsAd ? '（关闭按钮：首次点击=跳转）' : ''}`);
 
             currentAdInstance = new window.AdSDK({
                 appId: appId,
                 placementId: placementId,
                 container: '#ad-target',
-                onAdLoaded: () => log('✅ 广告展示成功', 'success'),
+                closeButtonFirstClickAsAdClick: closeBtnFirstClickAsAd,
+                onAdLoaded: (ad, instance) => {
+                    log('✅ 广告展示成功', 'success');
+                    if (closeBtnFirstClickAsAd) {
+                        log('关闭按钮已绑定：第一次点击=广告跳转，第二次点击=关闭', 'success');
+                    }
+                    const interstitialBtn = document.getElementById('showInterstitialBtn');
+                    if (interstitialBtn) {
+                        interstitialBtn.disabled = false;
+                        interstitialBtn.title = '点击后当前广告将以全屏遮罩、居中插屏形式展示';
+                    }
+                },
                 onAdError: (err, msg) => log(`❌ 加载失败: ${msg}`, 'error'),
                 onAdExpose: () => log('👀 广告曝光'),
                 onAdClick: () => log('🖱️ 广告点击')
@@ -189,6 +228,19 @@
         }
 
         document.getElementById('loadBtn').onclick = handleLoadClick;
+
+        document.getElementById('showInterstitialBtn').onclick = function() {
+            if (!currentAdInstance) {
+                log('请先加载广告', 'error');
+                return;
+            }
+            if (typeof currentAdInstance.showAsInterstitial !== 'function') {
+                log('当前 SDK 版本不支持 showAsInterstitial', 'error');
+                return;
+            }
+            currentAdInstance.showAsInterstitial();
+            log('已以插屏形式展示广告（点击遮罩或关闭按钮可关闭）', 'success');
+        };
     </script>
 </body>
 

package/src/pcLazyLoad.html

@@ -6,6 +6,7 @@
     <title>Native 广告懒加载测试 (SDK 内置 .lazy-ad)</title>
     <!-- 用户只需引用 SDK，懒加载由 SDK 内部 IntersectionObserver 完成 -->
     <script src="https://unpkg.com/qb-pc-sdk@latest/inline-loader.js" defer></script>
+    <!-- <script src="../core.min.js"></script> -->
     <style>
         body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
         .section { max-width: 900px; margin: 0 auto 24px; background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
@@ -17,16 +18,15 @@
 
     <div class="section">
         <h2>首屏广告位</h2>
-        <div class="lazy-ad" id="ad-pos-1" data-app-id="2009110913851875373" data-ad-id="2009111010614468619">广告位 1 - 进入视口约 200px 内时加载</div>
+        <div class="lazy-ad" id="ad-pos-1" data-app-id="2009110913851875373" data-ad-id="2009111010614468619"  data-show-as-interstitial="true">广告位 1 - 进入视口约 200px 内时加载</div>
     </div>
 
-    <div class="section" style="height: 400px;">
+    <div class="section" style="height: 1200px;">
         <h2>占位内容（向下滚动触发下方广告）</h2>
     </div>
-
     <div class="section">
         <h2>下方广告位</h2>
-        <div class="lazy-ad" id="ad-pos-2" data-app-id="2009110913851875373" data-ad-id="2009111010614468619">广告位 2 - 懒加载</div>
+        <div class="lazy-ad" id="ad-pos-2" data-app-id="2009110913851875373" data-ad-id="2009111010614468619" data-close-button-first-click-as-ad="true">广告位 2 - 懒加载</div>
     </div>
 
     <p style="max-width:900px;margin:20px auto;color:#666;font-size:14px;">