qb-pc-sdk 1.3.0 → 1.3.2

package/inline-loader-local.js

@@ -0,0 +1 @@
+!function(n){"use strict";var e=void 0!==n&&n.window?n.window:"undefined"!=typeof window?window:n,i=e.document;if(i&&!e.AdSDK){var r=e.navigator&&e.navigator.userAgent||"",d=e.navigator&&e.navigator.platform||"";if(!/Android|iPhone|iPad|iPod|Mac|webOS|BlackBerry|IEMobile|Opera Mini/i.test(r)&&/Win|Windows/i.test(r+d)){e._qbPcSdkLoading=!0;var o="./core.min.js";if(i.currentScript&&i.currentScript.src&&(o=i.currentScript.src.replace(/\/[^/]+\.js$/i,"/core.min.js")),i.querySelector('script[src="'+o+'"]'))c(null);else{var t=i.createElement("script");t.src=o,t.async=!0,t.onload=function(){e.GDTAdSDK&&e.AdSDK?c(null):setTimeout(function(){c(e.GDTAdSDK&&e.AdSDK?null:new Error("SDK\u521d\u59cb\u5316\u5931\u8d25"))},100)},t.onerror=function(){c(new Error("SDK\u52a0\u8f7d\u5931\u8d25"))},i.head.appendChild(t)}}}function c(n){e._qbPcSdkLoading=!1,e.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:n?{error:n,AdSDK:null,GDTAdSDK:null}:{AdSDK:e.AdSDK,GDTAdSDK:e.GDTAdSDK}}))}}("undefined"!=typeof window?window:"undefined"!=typeof global?global:this);

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.3.0",
-  "description": "pc广告 SDK 封装器 - 去除容灾",
+  "version": "1.3.2",
+  "description": "pc广告 SDK 封装器 - 新增懒加载模式",
   "main": "core.min.js",
   "files": [
     "core.min.js",
     "inline-loader.js",
+    "inline-loader-local.js",
     "index.js","src",
     "README.md"
   ],

package/src/ad-sdk-wrapper.js

@@ -422,6 +422,7 @@
         }
 
         async _loadAd() {
+            if (this._isUnsupportedPlatform) return;
             try {
                 await window.GDTAdSDK.init({ appId: this.gdtAppId });
 
@@ -662,6 +663,66 @@
             
             return true;
         }
+
+        var lazyAdObserver = null;
+        function loadLazyAd(element) {
+            if (element._qbAdInitialized) return;
+            var appId = element.getAttribute('data-app-id');
+            var placementId = element.getAttribute('data-ad-id') || element.getAttribute('data-placement-id');
+            if (!appId || !placementId) return;
+            element._qbAdInitialized = true;
+            element.innerHTML = '';
+            try {
+                var adSDKInstance = new window.AdSDK({
+                    appId: appId,
+                    placementId: placementId,
+                    container: element,
+                    onAdLoaded: function(ad, instance) {
+                        if (window.qbAds._onAdLoaded && typeof window.qbAds._onAdLoaded === 'function') {
+                            window.qbAds._onAdLoaded.call(this, ad, instance, element);
+                        }
+                    },
+                    onAdError: function(err, msg) {
+                        if (window.qbAds._onAdError && typeof window.qbAds._onAdError === 'function') {
+                            window.qbAds._onAdError.call(this, err, msg, element);
+                        }
+                    },
+                    onAdExpose: function() {
+                        if (window.qbAds._onAdExpose && typeof window.qbAds._onAdExpose === 'function') {
+                            window.qbAds._onAdExpose.call(this, element);
+                        }
+                    },
+                    onAdClick: function() {
+                        if (window.qbAds._onAdClick && typeof window.qbAds._onAdClick === 'function') {
+                            window.qbAds._onAdClick.call(this, element);
+                        }
+                    }
+                });
+                window._qbAdsInstances.push({ element: element, instance: adSDKInstance });
+            } catch (error) {
+                element._qbAdInitialized = false;
+            }
+        }
+        function startLazyAdObserver() {
+            if (!window.AdSDK || !window.GDTAdSDK) return;
+            var lazyEls = window.document.querySelectorAll('.lazy-ad');
+            if (lazyEls.length === 0) return;
+            if (!lazyAdObserver) {
+                lazyAdObserver = new window.IntersectionObserver(function(entries) {
+                    entries.forEach(function(entry) {
+                        if (!entry.isIntersecting) return;
+                        var el = entry.target;
+                        loadLazyAd(el);
+                        lazyAdObserver.unobserve(el);
+                    });
+                }, { root: null, rootMargin: '200px', threshold: 0 });
+            }
+            lazyEls.forEach(function(el) {
+                if (el._qbLazyObserved) return;
+                el._qbLazyObserved = true;
+                lazyAdObserver.observe(el);
+            });
+        }
         
         const originalPush = window.qbAds.push.bind(window.qbAds);
         
@@ -670,6 +731,7 @@
                 if (window.AdSDK && window.GDTAdSDK) {
                     setTimeout(function() {
                         initAllAdSlots();
+                        startLazyAdObserver();
                     }, 0);
                 }
             };
@@ -692,13 +754,14 @@
                 }
             }
             
-            // 尝试初始化所有广告位
+            // 尝试初始化所有广告位（即插即用 ins）
             const initialized = initAllAdSlots();
+            startLazyAdObserver();
             
             if (!initialized && window.AdSDK && window.GDTAdSDK) {
-                // 如果 SDK 已经加载但初始化失败，稍后重试
                 setTimeout(function() {
                     initAllAdSlots();
+                    startLazyAdObserver();
                 }, 100);
             }
             
@@ -711,30 +774,31 @@
             setTimeout(function() {
                 if (window.AdSDK && window.GDTAdSDK) {
                     initAllAdSlots();
+                    startLazyAdObserver();
                 }
             }, 0);
         } else {
-            // 监听 DOMContentLoaded 事件
             window.addEventListener('DOMContentLoaded', function() {
                 setTimeout(function() {
                     if (window.AdSDK && window.GDTAdSDK) {
                         initAllAdSlots();
+                        startLazyAdObserver();
                     }
                 }, 0);
             });
         }
         
-        // 如果 SDK 已经加载完成（同步加载的情况），立即尝试初始化
         if (window.AdSDK && window.GDTAdSDK) {
             setTimeout(function() {
                 initAllAdSlots();
+                startLazyAdObserver();
             }, 0);
         }
         
-        // 监听 SDK 就绪事件（异步加载的情况）
         window.addEventListener('qb-pc-sdk-ready', function() {
             setTimeout(function() {
                 initAllAdSlots();
+                startLazyAdObserver();
             }, 0);
         });
         
@@ -742,18 +806,20 @@
         if (window.MutationObserver) {
             const observer = new window.MutationObserver(function(mutations) {
                 let shouldInit = false;
+                let shouldInitLazy = false;
                 mutations.forEach(function(mutation) {
                     mutation.addedNodes.forEach(function(node) {
                         if (node.nodeType === 1) {
-                            // 检查是否是广告位标签，或其包含广告位标签
                             if (node.tagName && node.tagName.toLowerCase() === 'ins' && 
                                 node.classList && node.classList.contains('qb-adsbyqubian')) {
                                 shouldInit = true;
-                            } else if (node.querySelectorAll) {
+                            } else if (node.classList && node.classList.contains('lazy-ad')) {
+                                shouldInitLazy = true;
+                            }
+                            if (node.querySelectorAll) {
                                 const adSlots = node.querySelectorAll('ins.qb-adsbyqubian');
-                                if (adSlots.length > 0) {
-                                    shouldInit = true;
-                                }
+                                if (adSlots.length > 0) shouldInit = true;
+                                if (node.querySelectorAll('.lazy-ad').length > 0) shouldInitLazy = true;
                             }
                         }
                     });
@@ -762,7 +828,12 @@
                 if (shouldInit && window.AdSDK && window.GDTAdSDK) {
                     setTimeout(function() {
                         initAllAdSlots();
-                    }, 100); // 延迟一点，确保 DOM 完全插入
+                    }, 100);
+                }
+                if (shouldInitLazy && window.AdSDK && window.GDTAdSDK) {
+                    setTimeout(function() {
+                        startLazyAdObserver();
+                    }, 100);
                 }
             });
             

package/src/{example-simple.html → pcAdTest.html}

@@ -1,26 +1,87 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Native广告异步加载测试</title>
-    <!-- 内联版本：极简引导器，只负责容灾和异步加载，Windows环境检测在loader.min.js中 -->
-    <!-- <script>
-(function(g){"use strict";var w=g&&g.window?g.window:(typeof window!=="undefined"?window:g),d=w.document;if(!d||w._qbPcSdkLoading||w.AdSDK)return;w._qbPcSdkLoading=true;var pr="https://unpkg.com/qb-pc-sdk@latest/loader.min.js",fb="https://file.qubiankeji.com/qb-pc-sdk/loader.min.js";var loaded=false;var timeoutId=setTimeout(function(){if(!loaded&&fb&&!d.querySelector('script[src="'+fb+'"]')){loaded=true;var fs=d.createElement("script");fs.src=fb;fs.async=true;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}},2000);var s=d.createElement("script");s.src=pr;s.async=true;s.onload=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);}};s.onerror=function(){if(!loaded){loaded=true;clearTimeout(timeoutId);if(fb&&!d.querySelector('script[src="'+fb+'"]')){var fs=d.createElement("script");fs.src=fb;fs.async=true;fs.onerror=function(){w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));};d.head.appendChild(fs);}else{w._qbPcSdkLoading=false;w.dispatchEvent(new CustomEvent("qb-pc-sdk-ready",{detail:{error:new Error("SDK加载失败"),AdSDK:null,GDTAdSDK:null}}));}}};d.head.appendChild(s);})(typeof window!=="undefined"?window:(typeof global!=="undefined"?global:this));
-</script> -->
-    <script src="https://www.qubiankeji.com/file/inline-loader.js" defer></script>
+    <script src="https://unpkg.com/qb-pc-sdk@latest/inline-loader.js" defer></script>
     <style>
-        body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
-        .control-panel { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px; display: flex; gap: 15px; max-width: 900px; margin: 0 auto; }
-        .input-group { display: flex; flex-direction: column; gap: 6px; flex: 1; }
-        button#loadBtn { padding: 10px 24px; background-color: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; height: 42px; }
-        button#loadBtn:disabled { background-color: #ccc; cursor: not-allowed; }
-        #ad-slot-wrapper { max-width: 900px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px; min-height: 240px; border: 2px dashed #e0e0e0; }
-        #log-container { max-width: 900px; margin: 20px auto; background: #2d2d2d; color: #00ff00; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; height: 250px; overflow-y: auto; }
-        .log-error { color: #ff4444; }
-        .log-success { color: #00ff00; }
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: sans-serif;
+            background: #f0f2f5;
+        }
+
+        .control-panel {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+            display: flex;
+            gap: 15px;
+            max-width: 900px;
+            margin: 0 auto;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            flex: 1;
+        }
+
+        button#loadBtn {
+            padding: 10px 24px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            height: 42px;
+        }
+
+        button#loadBtn:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+
+        #ad-slot-wrapper {
+            max-width: 900px;
+            margin: 20px auto;
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            min-height: 240px;
+            border: 2px dashed #e0e0e0;
+        }
+
+        #log-container {
+            max-width: 900px;
+            margin: 20px auto;
+            background: #2d2d2d;
+            color: #00ff00;
+            padding: 15px;
+            border-radius: 8px;
+            font-family: monospace;
+            font-size: 12px;
+            height: 250px;
+            overflow-y: auto;
+        }
+
+        .log-error {
+            color: #ff4444;
+        }
+
+        .log-success {
+            color: #00ff00;
+        }
     </style>
 </head>
+
 <body>
 
     <div class="control-panel">
@@ -65,7 +126,7 @@
         }
 
         // --- 核心逻辑：处理异步加载的时序 ---
-        
+
         const initUI = () => {
             const loadBtn = document.getElementById('loadBtn');
             loadBtn.disabled = false;
@@ -102,7 +163,7 @@
 
         function handleLoadClick() {
             if (!isSdkReady) return;
-            
+
             const appId = document.getElementById('appIdInput').value.trim();
             const placementId = document.getElementById('placementIdInput').value.trim();
 
@@ -130,4 +191,5 @@
         document.getElementById('loadBtn').onclick = handleLoadClick;
     </script>
 </body>
+
 </html>

package/src/pcLazyLoad.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Native 广告懒加载测试 (SDK 内置 .lazy-ad)</title>
+    <!-- 用户只需引用 SDK，懒加载由 SDK 内部 IntersectionObserver 完成 -->
+    <script src="https://unpkg.com/qb-pc-sdk@latest/inline-loader.js" defer></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); }
+        .section h2 { margin: 0 0 16px; font-size: 18px; color: #333; }
+        .lazy-ad { min-height: 220px; border: 2px dashed #e0e0e0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; box-sizing: border-box; }
+    </style>
+</head>
+<body>
+
+    <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>
+
+    <div class="section" style="height: 400px;">
+        <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>
+
+    <p style="max-width:900px;margin:20px auto;color:#666;font-size:14px;">
+        接入说明：页面中放入 <code>&lt;div class="lazy-ad" data-app-id="应用ID" data-ad-id="广告位ID"&gt;&lt;/div&gt;</code>，引用 SDK 后即可自动懒加载（rootMargin 200px），无需额外脚本。
+    </p>
+
+</body>
+</html>