在React中使用TypeScript掌握`<iframe>`标签：全面指南

DEV Community ·

在React中使用TypeScript掌握``标签：全面指南</h1> </a> </div> </div> <div class="card-body pt-4">  <div class="read-tips-box d-flex align-items-center"> <span class="mr-2 d-flex align-items-center" style="height: 100%;">💡</span> <span style="line-height: 1.5;">原文英文，约1500词，阅读约需6分钟。</span> </div>  <div class="entry-section-header"> <span class="icon">📝</span> <h2 class="title">内容提要</h2> </div> <p id="ai-summary-W1wpa2QAfI4yjjA0qK0t" class="text-justify text-break ai-summary my-3"> 在React应用中使用<iframe>标签嵌入外部内容时，需要关注安全性、性能和交互性。本文介绍了<iframe>的基本用法、动态控制、跨域通信、安全最佳实践、懒加载、PDF显示、动态调整大小及可访问性等，提供实用示例和最佳实践，帮助开发者安全高效地使用<iframe>。 </p>  <div class="key-points my-3"> <div class="entry-section-header"> <span class="icon">🎯</span> <h2 class="title">关键要点</h2> </div> <ul class="pl-3 mb-3 js-key-points" data-text-ads='{}'> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="0" data-kp-hash="f5e51544d2c08afc61fe9c5883319bfef440325e" data-kp-lit="0"> <p class="kp-text">在React应用中使用<iframe>标签嵌入外部内容时，需要关注安全性、性能和交互性。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="1" data-kp-hash="7bb8ffbf0adc6f4ed2aa9c7d9a775dda2054ba21" data-kp-lit="0"> <p class="kp-text">基本用法包括嵌入视频、地图和第三方小部件。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="2" data-kp-hash="88a1c292507ab51d6aba4a948da998e11c5491d0" data-kp-lit="0"> <p class="kp-text">动态控制<iframe>属性可以通过React状态实现。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="3" data-kp-hash="d82c191733dca5827087024abde0a41b23d9a7d8" data-kp-lit="0"> <p class="kp-text">跨域通信可以使用postMessage实现安全通信。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="4" data-kp-hash="8c9ea3c8b95b79cf8cf40f82ead4614afc96cf02" data-kp-lit="0"> <p class="kp-text">安全最佳实践包括使用sandbox属性和设置X-Frame-Options头。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="5" data-kp-hash="d6a8921749c889c824424814f8d66bc344e5b4b6" data-kp-lit="0"> <p class="kp-text">懒加载可以提高初始页面加载时间。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="6" data-kp-hash="bb178eecf3e743bbf98faf328a17e1eda6614485" data-kp-lit="0"> <p class="kp-text">显示PDF时可以通过在URL后添加#toolbar=0来隐藏工具栏。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="7" data-kp-hash="7be24460b8e0e44b20117afb087e922988207c6b" data-kp-lit="0"> <p class="kp-text">动态调整<iframe>的高度可以通过ResizeObserver实现。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="8" data-kp-hash="26f567f04b4144fc7e891c79a0d8e821adb11ea3" data-kp-lit="0"> <p class="kp-text">可访问性考虑包括为<iframe>添加title属性和提供后备链接。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="9" data-kp-hash="a787896353d77b95e317dad8577765c3003bfa21" data-kp-lit="0"> <p class="kp-text">处理错误和边缘情况时，需要检测加载失败和CORS问题。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="10" data-kp-hash="7a40b189e0eb3a13a4a1743ed8f9ca8a8f40a272" data-kp-lit="0"> <p class="kp-text">高级跨域通信示例展示了双向消息传递的实现。</p> </li> <li class="text-justify text-break key-point-item " data-eid="W1wpa2QAfI4yjjA0qK0t" data-kp-index="11" data-kp-hash="5a7f42f87e1545fb0ab364aa19243f7434fe5b46" data-kp-lit="0"> <p class="kp-text">结论是使用<iframe>时需平衡功能、安全性和性能。</p> </li> </ul> </div>  <div class="article-qa my-4"> <div class="entry-section-header"> <span class="icon">❓</span> <h2 class="title">延伸问答</h2> </div> <div class="qa-list"> <section class="qa-item mb-3"> <h3 class="qa-question h5 mb-2 text-break">在React中如何安全地使用<iframe>标签？</h3> <p class="text-justify text-break mb-2">使用sandbox属性限制权限，并设置X-Frame-Options头以防止点击劫持。</p> </section> <section class="qa-item mb-3"> <h3 class="qa-question h5 mb-2 text-break">如何在React中动态控制<iframe>的内容？</h3> <p class="text-justify text-break mb-2">可以通过React状态管理动态更新<iframe>的src属性，例如使用按钮切换不同的URL。</p> </section> <section class="qa-item mb-3"> <h3 class="qa-question h5 mb-2 text-break">如何处理<iframe>的跨域通信？</h3> <p class="text-justify text-break mb-2">可以使用postMessage方法实现安全的跨域通信，确保验证消息的来源。</p> </section> <section class="qa-item mb-3"> <h3 class="qa-question h5 mb-2 text-break">在React中如何实现<iframe>的懒加载？</h3> <p class="text-justify text-break mb-2">通过在<iframe>标签中添加loading='lazy'属性，可以延迟加载不在视口中的<iframe>。</p> </section> <section class="qa-item mb-3"> <h3 class="qa-question h5 mb-2 text-break">如何在<iframe>中显示PDF并隐藏工具栏？</h3> <p class="text-justify text-break mb-2">在PDF的URL后添加#toolbar=0，可以隐藏PDF查看器的工具栏。</p> </section> <section class="qa-item mb-3"> <h3 class="qa-question h5 mb-2 text-break">使用<iframe>时需要考虑哪些可访问性因素？</h3> <p class="text-justify text-break mb-2">应为<iframe>添加title属性，并提供后备链接以确保可访问性。</p> </section> </div> </div>  <div class="text-justify mb-3"> <div class="entry-section-header"> <span class="icon">🏷️</span> <h2 class="title">标签</h2> </div> <div class="d-flex flex-wrap"> <a class="entry-tag" href="/t/?tags=%3Ciframe%3E" title="<iframe>"><iframe></a> <a class="entry-tag" href="/t/?tags=iframe" title="iframe">iframe</a> <a class="entry-tag" href="/t/?tags=react" title="react">react</a> <a class="entry-tag" href="/t/?tags=typescript" title="typescript">typescript</a> <a class="entry-tag" href="/t/?tags=%E5%AE%89%E5%85%A8%E6%80%A7" title="安全性">安全性</a> <a class="entry-tag" href="/t/?tags=%E6%80%A7%E8%83%BD" title="性能">性能</a> <a class="entry-tag" href="/t/?tags=%E6%87%92%E5%8A%A0%E8%BD%BD" title="懒加载">懒加载</a> <a class="entry-tag" href="/t/?tags=%E8%B7%A8%E5%9F%9F%E9%80%9A%E4%BF%A1" title="跨域通信">跨域通信</a> </div> </div>  <div class="d-flex align-items-center mt-4 pt-2 border-top social-bar-container">  <div class="py-3 d-flex flex-wrap align-items-center"> <a class="action-btn mr-3 mb-2" href="/o/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWQiOiI2NmJjMzBiYWMwOWY2YThlNDAzZjI1NmIiLCJlaWQiOiI2N2JiN2Q4ZTY4ZGMwM2NjYTE3ZTZlOTQiLCJxdW90ZWRfbGluayI6Imh0dHBzJTNBJTJGJTJGZGV2LnRvJTJGc2VyaWZjb2xha2VsJTJGbWFzdGVyaW5nLXRoZS10YWctaW4tcmVhY3Qtd2l0aC10eXBlc2NyaXB0LWEtY29tcHJlaGVuc2l2ZS1ndWlkZS0yN202IiwicXVvdGVkX3RhZ3MiOiJyZWFjdCUyQyVFNiVBMCU4NyVFNyVBRCVCRSUyQ2lmcmFtZSUyQ3R5cGVzY3JpcHQlMkMlRTYlOEMlODclRTUlOEQlOTcifQ.Ui7ilWYBT99u-pnQRV5X_0Kq9okb_aepqngi4hj1Iok/" target="_blank" rel="noopener" title="阅读原文"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> <polyline points="15 3 21 3 21 9"></polyline> <line x1="10" y1="14" x2="21" y2="3"></line> </svg> <span class="ml-1">阅读原文</span> </a>  <a id="screenshotW1wpa2QAfI4yjjA0qK0t" class="action-btn mr-3 mb-2" style="cursor:pointer" title="生成长图"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <circle cx="8.5" cy="8.5" r="1.5"></circle> <polyline points="21 15 16 10 5 21"></polyline> </svg> <span class="ml-1">生成长图</span> </a>  <a id="shareW1wpa2QAfI4yjjA0qK0t" class="action-btn mr-3 mb-2" style="cursor:pointer" title="点击复制链接"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"> <circle cx="18" cy="5" r="3"></circle> <circle cx="6" cy="12" r="3"></circle> <circle cx="18" cy="19" r="3"></circle> <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line> <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line> </svg> <span class="ml-1">分享链接</span> </a> <span id="copiedW1wpa2QAfI4yjjA0qK0t" class="text-success ml-2 small mb-2" style="display:none; opacity: 0; transition: opacity 0.3s;"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><polyline points="20 6 9 17 4 12"></polyline></svg> 已复制链接 </span> </div> </div> <script type="text/javascript"> var btn = document.querySelector('#shareW1wpa2QAfI4yjjA0qK0t'); btn.addEventListener('click', () => { var t = moment("2025-02-23 19:05:08").format('YYYY-M-D'); var u = "https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/"; $.ajax({ url: "/dwz/", type: 'post', data: {"eid": "W1wpa2QAfI4yjjA0qK0t"}, dataType:'json', success:function(result){ var dwz = result.short_url; const textCopied = ClipboardJS.copy( "在React中使用TypeScript掌握`<iframe>`标签：全面指南\n\n" + "AI生成摘要：在React应用中使用<iframe>标签嵌入外部内容时，需要关注安全性、性能和交互性。本文介绍了<iframe>的基本用法、动态控制、跨域通信、安全最佳实践、懒加载、PDF显示、动态调整大小及可访问性等，提供实用示例和最佳实践，帮助开发者安全高效地使用<iframe>。\n\n" + dwz ); console.log('copied!', textCopied); var $copied = $("#copiedW1wpa2QAfI4yjjA0qK0t"); $copied.show().css("opacity", 1); setTimeout(function() { $copied.css("opacity", 0); setTimeout(function() { $copied.hide(); }, 300); }, 2000); } }); }) var screenshotBtn = document.querySelector('#screenshotW1wpa2QAfI4yjjA0qK0t'); if (screenshotBtn) { screenshotBtn.addEventListener('click', () => { if (typeof htmlToImage === 'undefined') { $.getScript("https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.js", function() { generateScreenshot(); }); } else { generateScreenshot(); } }); } function generateScreenshot() { var btn = document.querySelector('#screenshotW1wpa2QAfI4yjjA0qK0t'); var originalText = btn.innerHTML; btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="ml-1">生成中...</span>'; var target = btn.closest('.entry-card'); if (!target) { btn.innerHTML = originalText; return; } var clone = target.cloneNode(true); // --- 移动端适配方案 --- // 使用 414px (iPhone Plus/Max 逻辑宽度) 触发移动端布局 // 配合 pixelRatio: 3 输出约 1242px 宽的高清图，在手机上阅读体验最佳 var mobileWidth = 414; clone.style.width = mobileWidth + 'px'; // 调整内边距，在窄屏下节省空间 // 假设原 padding 较大，这里强制缩小 clone.style.padding = '0'; // 强制调整标题字号为移动端大小，覆盖可能存在的 PC 端媒体查询样式 var title = clone.querySelector('.article-title'); if (title) { title.style.fontSize = '1.25rem'; } // 解决闪烁：设置为透明，并穿透点击 clone.style.opacity = '0'; clone.style.pointerEvents = 'none'; // 保持 fixed 定位在视口内 clone.style.position = 'fixed'; clone.style.top = '0'; clone.style.left = '0'; clone.style.zIndex = '-9999'; clone.style.backgroundColor = '#ffffff'; clone.classList.remove('no-hover'); // 移除 social bar var socialBar = clone.querySelector('.social-bar-container'); if (socialBar) socialBar.remove(); // 移除 read tips var readTips = clone.querySelector('.read-tips-box'); if (readTips) readTips.remove(); // --- 添加底部二维码区域 --- var footer = document.createElement('div'); footer.style.display = 'flex'; footer.style.flexDirection = 'column'; footer.style.alignItems = 'center'; footer.style.justifyContent = 'center'; footer.style.padding = '30px 0 50px 0'; footer.style.backgroundColor = '#ffffff'; footer.style.marginTop = '10px'; // 1. 上方文字 var topText = document.createElement('div'); topText.innerText = '长按识别浏览'; topText.style.fontSize = '13px'; topText.style.color = '#888'; topText.style.marginBottom = '12px'; topText.style.letterSpacing = '1px'; footer.appendChild(topText); // 2. 二维码容器 var qrContainer = document.createElement('div'); qrContainer.style.padding = '6px'; qrContainer.style.backgroundColor = '#fff'; qrContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)'; qrContainer.style.borderRadius = '4px'; footer.appendChild(qrContainer); // 3. 下方品牌文字 var bottomText = document.createElement('div'); bottomText.innerText = '小红花·文摘'; bottomText.style.fontSize = '15px'; bottomText.style.fontWeight = 'bold'; bottomText.style.color = '#d7263d'; // 品牌色 bottomText.style.marginTop = '12px'; bottomText.style.letterSpacing = '1px'; footer.appendChild(bottomText); // 4. 网址信息 var urlText = document.createElement('div'); urlText.innerText = 'https://xhh.club'; urlText.style.fontSize = '11px'; urlText.style.color = '#d7263d'; urlText.style.marginTop = '4px'; footer.appendChild(urlText); clone.appendChild(footer); document.body.appendChild(clone); // 生成二维码 try { new QRCode(qrContainer, { text: "https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/", width: 100, height: 100, correctLevel : QRCode.CorrectLevel.L }); // 修正二维码样式 var qrImg = qrContainer.querySelector('img'); if(qrImg) { qrImg.style.display = 'block'; qrImg.style.margin = '0'; // 去除默认边距 } } catch (e) { console.error("QRCode generation failed", e); } // 优化图片处理：尝试直接从已加载的图片中获取数据，避免重新下载导致的 429 和 CORS 错误 var originalImages = target.getElementsByTagName('img'); var cloneImages = clone.getElementsByTagName('img'); var promises = []; for (var i = 0; i < originalImages.length; i++) { let originalImg = originalImages[i]; let cloneImg = cloneImages[i]; // 1. 如果原图本身就没加载成功，直接替换 clone 图为透明 if (!originalImg.complete || originalImg.naturalWidth === 0) { cloneImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; cloneImg.removeAttribute('srcset'); if (cloneImg.classList.contains('entry-hero-image')) { var hero = cloneImg.parentNode; if (hero && hero.classList.contains('entry-hero')) { hero.classList.add('is-fallback'); } cloneImg.remove(); } continue; } // 2. 尝试通过 Canvas 读取图片数据 (Data URL) try { var canvas = document.createElement('canvas'); canvas.width = originalImg.naturalWidth; canvas.height = originalImg.naturalHeight; var ctx = canvas.getContext('2d'); ctx.drawImage(originalImg, 0, 0); var dataURL = canvas.toDataURL('image/png'); cloneImg.src = dataURL; cloneImg.removeAttribute('srcset'); } catch (e) { console.warn('Canvas failed (CORS), trying proxy fetch:', originalImg.src); // 3. 如果 Canvas 读取失败（通常是 CORS），尝试使用代理获取 var proxyUrl = '/proxy/image?url=' + encodeURIComponent(originalImg.src); var p = fetch(proxyUrl) .then(resp => { if (!resp.ok) throw new Error(resp.status + ' ' + resp.statusText); return resp.blob(); }) .then(blob => { return new Promise((resolve, reject) => { var reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(blob); }); }) .then(dataUrl => { cloneImg.src = dataUrl; cloneImg.removeAttribute('srcset'); }) .catch(err => { console.warn('Proxy fetch failed, hiding image:', originalImg.src, err); // 4. 如果 fetch 也失败，替换为透明占位符以防止截图失败 cloneImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; cloneImg.removeAttribute('srcset'); if (cloneImg.classList.contains('entry-hero-image')) { var hero = cloneImg.parentNode; if (hero && hero.classList.contains('entry-hero')) { hero.classList.add('is-fallback'); } cloneImg.remove(); } if (cloneImg.classList.contains('entry-source-icon')) { cloneImg.style.display = 'none'; } }); promises.push(p); } } Promise.all(promises).then(function() { // 获取精确的高度 var height = clone.offsetHeight; setTimeout(() => { htmlToImage.toPng(clone, { width: mobileWidth, height: height, backgroundColor: '#ffffff', pixelRatio: 3, skipAutoScale: true, cacheBust: false, style: { opacity: '1', visibility: 'visible', zIndex: 'auto' } }).then(function (dataUrl) { var link = document.createElement('a'); link.download = '在React中使用TypeScript掌握`<iframe>`标签：全面指南.png'; link.href = dataUrl; link.click(); document.body.removeChild(clone); btn.innerHTML = originalText; }).catch(function (error) { console.error('Screenshot failed:', error); alert('生成长图失败，请重试。'); document.body.removeChild(clone); btn.innerHTML = originalText; }); }, 500); }); } </script> </div> </div> <div class="xhh-card entry-card px-3"> <div class="entry-section-header"> <span class="icon">➡️</span> <h2 class="title">继续阅读</h2> </div> <div class="pb-2"> <ol class="sidebar-list mb-0"> <li> <a href="https://xhh.club/e/lDKQOspV3WaGwwydV6hJ/" title="SELinux卷标签更改正式发布（以及在v1.37中的可能影响）"> SELinux卷标签更改正式发布（以及在v1.37中的可能影响） </a> <div class="text-muted text-truncate small">Kubernetes v1.37预计将默认启用SELinuxMount功能，以提升卷设置速度，但可能影响依赖旧模型的应用。v1.36适合审计集群并调整设置...</div> </li> <li> <a href="https://xhh.club/e/j2YwsikoMfBQXXickssw/" title="Aurora PostgreSQL 大版本升级指南"> Aurora PostgreSQL 大版本升级指南 </a> <div class="text-muted text-truncate small">本文介绍了Amazon Aurora PostgreSQL的大版本升级指南，包括升级前的准备、兼容性测试、性能测试及多种升级方案（如蓝绿部署）。强调提前规...</div> </li> <li> <a href="https://xhh.club/e/YU5C3OkDmdBrww7T7ROO/" title="在AWS EMR Core节点部署Flink Client的实战指南"> 在AWS EMR Core节点部署Flink Client的实战指南 </a> <div class="text-muted text-truncate small">本文介绍了如何在AWS EMR的Core节点上通过Bootstrap Action自动安装Flink Client工具链。该方案通过打包Flink二进制文...</div> </li> <li> <a href="https://xhh.club/e/EOiIRCbM0CNvnnOMGmVC/" title="大型语言模型代理在连接顺序优化方面表现如何？"> 大型语言模型代理在连接顺序优化方面表现如何？ </a> <div class="text-muted text-truncate small">Databricks平台探索利用大型语言模型（LLM）优化数据库查询中的连接顺序。传统查询优化器在估算子查询规模时面临挑战，导致连接顺序选择不佳。通过开发...</div> </li> <li> <a href="https://xhh.club/e/YU5CiMcDmdBrww7T7aDb/" title="X将允许Grok为您定制时间线"> X将允许Grok为您定制时间线 </a> <div class="text-muted text-truncate small">X平台将AI聊天机器人Grok用于个性化用户时间线，允许高级订阅者选择特定主题以优化信息流。Grok根据用户互动习惯推荐内容。同时，因使用率下降，X社区功...</div> </li> <li> <a href="https://xhh.club/e/KW1NkLndn2XuWWmkZ5rE/" title="特斯拉的收入再次上升，准备加大对人工智能和机器人技术的投入"> 特斯拉的收入再次上升，准备加大对人工智能和机器人技术的投入 </a> <div class="text-muted text-truncate small">特斯拉在2026年第一季度报告中显示，收入达到224亿美元，净利润4.77亿美元，分别比2025年增长16%和17%。公司计划在第二季度建设首个大规模的O...</div> </li> </ol> </div> </div> </main> </div> <div class="col-sm-4"> <div class="xhh-card sidebar-card"> <div class="sidebar-header"> <span>👤 个人中心</span> </div> <div class="d-flex justify-content-between align-items-center"> <div class="text-muted small pr-2">在公众号发送验证码完成验证</div> <button type="button" class="action-btn action-btn-primary" onclick="openLoginModal(); return false;" >去登录</button> </div> </div> <div id="aside-div"></div> </div> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mpVerifyModalTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content border-0 rounded-lg shadow-sm"> <div class="modal-header px-4 py-3 border-0 border-bottom"> <div> <h5 class="modal-title mb-0" id="mpVerifyModalTitle">登录验证</h5> <div class="text-muted small mt-1">在本设备完成一次验证即可继续使用</div> </div> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body px-4 py-3"> <p class="text-muted small mb-4">完成下面两步后，将自动完成登录并继续当前操作。</p> <div class="mb-4"> <div class="d-flex align-items-center mb-3"> <span class="badge badge-secondary mr-2">1</span> <span class="font-weight-bold">关注公众号</span> </div> <div class="text-center mb-3"> <img class="img-fluid rounded border" style="max-width: 240px;" alt="小红花技术领袖公众号二维码" src="//cdn1.xhh.club/static/image/qrcode_for_gh-8273a751e212fdf1b1af4424db11a495.jpg" /> </div> <div class="text-center"> <div class="h5 font-weight-bold mb-1">小红花技术领袖</div> <div class="text-muted small">如果当前 App 无法识别二维码，请在<strong>微信</strong>搜索并关注该公众号</div> </div> </div> <div class="mb-2"> <div class="d-flex align-items-center mb-3"> <span class="badge badge-secondary mr-2">2</span> <span class="font-weight-bold">发送验证码</span> </div> <div class="bg-light rounded p-3 text-center"> <div class="text-muted small mb-1">在公众号对话中发送下面 4 位验证码</div> <div class="h2 font-weight-bold text-monospace text-primary mb-0" style="letter-spacing: 0.18em;" id="verify-code"></div> </div> </div> </div> <div class="modal-footer border-0 px-4 pb-4 pt-0"> <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">稍后再说</button> </div> </div> </div> </div> </body> <footer class=""> <div class="site-footer pt-5 pb-3"> <div class="container"> <div class="row"> <div class="col-sm-7 col-lg-8"> <div class="row mb-2"> <div class="col-5 col-sm-6 col-md-4 all-center"> <img width="100%" src="//cdn1.xhh.club/static/image/logo-ad40ebf952ec4aa3912c5a7ff1294866.png" alt="小红花技术领袖俱乐部"/> </div> <div class="col-7 col-sm-6 my-2 all-center"> <div> <span class="h5">小红花·文摘：汇聚分发优质内容</span> <br /> <span class="text-muted">小红花技术领袖俱乐部</span> <div class="mt-4"> <span class="text-muted">Copyright © 2021-<script>document.write(new Date().getFullYear())</script></span> <br /> <a class="text-muted" href="//beian.miit.gov.cn/" target="_blank" title="粤ICP备2022094092号-1">粤ICP备2022094092号-1</a> </div> </div> </div> </div> </div> <div class="col-sm-5 col-lg-4 all-center"> <div class="row"> <div class="col-6 text-center"> <span class="text-muted small">公众号</span> <img class="pr-2 my-1" width="100%" src="//cdn1.xhh.club/static/image/qrcode_for_gh-8273a751e212fdf1b1af4424db11a495.jpg" alt="小红花技术领袖俱乐部公众号二维码"/> </div> <div class="col-6 text-center"> <span class="text-muted small">视频号</span> <img class="pl-2 my-1" width="100%" src="//cdn1.xhh.club/static/image/qrcode_for_sph-4eb0941aa904b0eb2c4be1f0491771d0.jpeg" alt="小红花技术领袖俱乐部视频号二维码"/> </div> </div> </div> </div> </div> </div> </footer> </html>