DEV Community ·

在React中使用TypeScript掌握``标签：全面指南</h1> </div> </header> <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 read-tips-icon">💡</span> <span class="read-tips-text">原文英文，约1500词，阅读约需6分钟。</span> </div>  <section class="entry-summary"> <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> </section>  <section 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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="在React应用中使用<iframe>标签嵌入外部内容时，需要关注安全性、性能和交互性。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-0" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">在React应用中使用<iframe>标签嵌入外部内容时，需要关注安全性、性能和交互性。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="基本用法包括嵌入视频、地图和第三方小部件。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-1" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">基本用法包括嵌入视频、地图和第三方小部件。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="动态控制<iframe>属性可以通过React状态实现。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-2" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">动态控制<iframe>属性可以通过React状态实现。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="跨域通信可以使用postMessage实现安全通信。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-3" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">跨域通信可以使用postMessage实现安全通信。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="安全最佳实践包括使用sandbox属性和设置X-Frame-Options头。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-4" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">安全最佳实践包括使用sandbox属性和设置X-Frame-Options头。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="懒加载可以提高初始页面加载时间。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-5" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">懒加载可以提高初始页面加载时间。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="显示PDF时可以通过在URL后添加#toolbar=0来隐藏工具栏。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-6" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">显示PDF时可以通过在URL后添加#toolbar=0来隐藏工具栏。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="动态调整<iframe>的高度可以通过ResizeObserver实现。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-7" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">动态调整<iframe>的高度可以通过ResizeObserver实现。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="可访问性考虑包括为<iframe>添加title属性和提供后备链接。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-8" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">可访问性考虑包括为<iframe>添加title属性和提供后备链接。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="处理错误和边缘情况时，需要检测加载失败和CORS问题。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-9" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">处理错误和边缘情况时，需要检测加载失败和CORS问题。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="高级跨域通信示例展示了双向消息传递的实现。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-10" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">高级跨域通信示例展示了双向消息传递的实现。</p> </span> </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"> <span class="kp-meta js-light-share-trigger" role="button" tabindex="0" title="分享这条金句" aria-label="分享这条金句" data-light-text="结论是使用<iframe>时需平衡功能、安全性和性能。" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/#kp-11" data-hide-btn-read="true" style="display: none;"> <span class="kp-badge" data-badge="金句" aria-hidden="true"></span> <span class="kp-sup" data-kp-count="" style="display: none;" aria-hidden="true"> <span class="kp-count"></span> </span> </span> <span class="kp-action" role="button" tabindex="0" title="点亮金句" aria-pressed="false" aria-label="点亮金句"> <p class="kp-text mb-0">结论是使用<iframe>时需平衡功能、安全性和性能。</p> </span> </li> </ul> </section>  <section class="article-insights my-4"> <div class="entry-section-header"> <span class="icon">🔎</span> <h2 class="title">延伸解读</h2> </div> <div class="insight-list"> <section class="insight-item mb-3"> <h3 class="h5 mb-2 text-break">安全性的重要性</h3> <p class="text-justify text-break mb-2">在使用<iframe>标签时，安全性是首要考虑因素。开发者应使用sandbox属性限制<iframe>的权限，并确保嵌入的内容设置了X-Frame-Options头，以防止点击劫持等安全风险。</p> </section> <section class="insight-item mb-3"> <h3 class="h5 mb-2 text-break">性能优化策略</h3> <p class="text-justify text-break mb-2">懒加载是提升页面加载性能的有效方法。通过延迟加载<iframe>，可以减少初始加载时间，从而改善用户体验。此外，使用ResizeObserver动态调整<iframe>的高度也能提升页面的响应性。</p> </section> <section class="insight-item mb-3"> <h3 class="h5 mb-2 text-break">跨域通信的挑战</h3> <p class="text-justify text-break mb-2">在<iframe>中实现跨域通信时，使用postMessage方法是安全的选择。开发者需确保验证消息来源，以防止潜在的安全漏洞。同时，处理CORS问题时，可能需要与内容提供者协商适当的CORS头。</p> </section> </div> </section>  <section 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> </section>  <section 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> </section>  <div class="d-flex align-items-center mt-4 pt-2 border-top social-bar-container js-entry-social-bar" data-entry-id="W1wpa2QAfI4yjjA0qK0t" data-entry-title="在React中使用TypeScript掌握``标签：全面指南" data-entry-summary="本文全面介绍在React中使用标签的最佳实践，包括安全性、性能、动态控制和跨域通信等，帮助开发者高效嵌入外部内容。" data-entry-url="https://xhh.club/e/W1wpa2QAfI4yjjA0qK0t/" data-site-origin="https://xhh.club" data-dwz-url="/dwz/" data-fulltext-now-url="/fulltext_now/" data-html-to-image-src="//cdn1.xhh.club/static/js/html-to-image-1b01c7cd9fb375bd1fb395b3dfd31450.js" data-screenshot-filename="在React中使用TypeScript掌握``标签：全面指南.png">  <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 noreferrer" 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 js-entry-screenshot" href="#" 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 js-entry-share" href="#" 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 js-entry-copied"> <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> </div> </article> <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/6yfws8MOwHkg3tzYJXIg/" title="[企业] 微软向IT管理员提供WSUS更新服务器故障排除指南缓解扫描失败或超时"> [企业] 微软向IT管理员提供WSUS更新服务器故障排除指南缓解扫描失败或超时 </a> <div class="text-muted text-truncate small">#系统资讯 [企业] 微软向 IT 管理员提供 WSUS 更新服务器故障排除指南，通过手动清理元数据缓存可以缓解扫描失败或超时问题。这个问题从 7 月 1...</div> </li> <li> <a href="https://xhh.club/e/yfZMyPJiU3IARWTB8xmF/" title="Release Notes for Safari Technology Preview 248"> Release Notes for Safari Technology Preview 248 </a> <div class="text-muted text-truncate small">Safari Technology Preview Release 248 is now available for download for macOS...</div> </li> <li> <a href="https://xhh.club/e/TxVrTYDpzN1HMh0tcHjc/" title="Kimi K3: White House alleges Fable 5 siphoning"> Kimi K3: White House alleges Fable 5 siphoning </a> <div class="text-muted text-truncate small">Top White House technology official Michael Kratsios on Wednesday accused Chi...</div> </li> <li> <a href="https://xhh.club/e/xVsBxUK4NMZKHJ9VEjuc/" title="Agents keep changing their answers. Harness just built delivery pipelines that don’t care."> Agents keep changing their answers. Harness just built delivery pipelines that don’t care. </a> <div class="text-muted text-truncate small">Software delivery lifecycle company (SDLC) Harness wants to put agents throug...</div> </li> <li> <a href="https://xhh.club/e/CtkFOERLzwOG3qARq5uC/" title="美图拿出1亿元，面向全行业寻找AI影像Builder"> 美图拿出1亿元，面向全行业寻找AI影像Builder </a> <div class="text-muted text-truncate small">美图产品挑战赛（Meitu Hatch Catch）火热报名中</div> </li> <li> <a href="https://xhh.club/e/yfZMCPriU3IARWTB8xEd/" title="OpenAI built support agents for its own customer service line, now it hopes big enterprises will trust them too"> OpenAI built support agents for its own customer service line, now it hopes big enterprises will trust them too </a> <div class="text-muted text-truncate small">The general consensus emerging across the AI and industrial spheres is that t...</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> <footer class=""> <div class="site-footer pt-5 pb-3"> <div class="container"> <div class="d-flex mb-4"> <span class="text-muted small"> <strong>友情链接：</strong> <a class="text-muted pr-2" href="https://moge.ai/#xhh" target="_blank" rel="noopener noreferrer" title="MOGE.AI"> MOGE.AI </a> <a class="text-muted pr-2" href="https://jiulongtech.com/#xhh" target="_blank" rel="noopener noreferrer" title="九胧科技"> 九胧科技 </a> <a class="text-muted pr-2" href="https://ai.gitee.com/#xhh" target="_blank" rel="noopener noreferrer" title="模力方舟 Gitee AI"> 模力方舟 Gitee AI </a> <a class="text-muted pr-2" href="https://cainiaopro.com/#xhh" target="_blank" rel="noopener noreferrer" title="菜鸟教程"> 菜鸟教程 </a> <a class="text-muted pr-2" href="https://www.remio.ai/#xhh" target="_blank" rel="noopener noreferrer" title="Remio.AI"> Remio.AI </a> <a class="text-muted pr-2" href="https://www.deepseeklian.com/#xhh" target="_blank" rel="noopener noreferrer" title="DeekSeek连连"> DeekSeek连连 </a> <a class="text-muted pr-2" href="https://www.53ai.com/#xhh" target="_blank" rel="noopener noreferrer" title="53AI"> 53AI </a> <a class="text-muted pr-2" href="http://www.shenlongproxy.com/?promotionLink=9c902a#xhh" target="_blank" rel="noopener noreferrer" title="神龙海外代理IP"> 神龙海外代理IP </a> <a class="text-muted pr-2" href="http://www.ipipgo.com/?promotionLink=9c902a#xhh" target="_blank" rel="noopener noreferrer" title="IPIPGO全球代理IP"> IPIPGO全球代理IP </a> <a class="text-muted pr-2" href="https://www.dongboge.cn/#xhh" target="_blank" rel="noopener noreferrer" title="东波哥的博客"> 东波哥的博客 </a> <a class="text-muted pr-2" href="https://www.youkaoshi.cn/#xhh" target="_blank" rel="noopener noreferrer" title="匡优考试在线考试系统"> 匡优考试在线考试系统 </a> <a class="text-muted pr-2" href="https://osguider.com/#xhh" target="_blank" rel="noopener noreferrer" title="开源服务指南"> 开源服务指南 </a> <a class="text-muted pr-2" href="https://docs.lanyingim.com/?utm_source=xhhclub#xhh" target="_blank" rel="noopener noreferrer" title="蓝莺IM"> 蓝莺IM </a> <a class="text-muted pr-2" href="https://solo.xin#xhh" target="_blank" rel="noopener noreferrer" title="Solo 独立开发者社区"> Solo 独立开发者社区 </a> <a class="text-muted pr-2" href="https://ai.eiefun.com/#xhh" target="_blank" rel="noopener noreferrer" title="AI酷站导航"> AI酷站导航 </a> <a class="text-muted pr-2" href="https://www.eiefun.com/#xhh" target="_blank" rel="noopener noreferrer" title="极客Fun"> 极客Fun </a> <a class="text-muted pr-2" href="https://blog.wpjam.com/#xhh" target="_blank" rel="noopener noreferrer" title="我爱水煮鱼"> 我爱水煮鱼 </a> <a class="text-muted pr-2" href="https://weekly.yichuansoft.com/#xhh" target="_blank" rel="noopener noreferrer" title="周报生成器"> 周报生成器 </a> <a class="text-muted pr-2" href="https://he3.app#xhh" target="_blank" rel="noopener noreferrer" title="He3.app"> He3.app </a> <a class="text-muted pr-2" href="https://easycv.cn/#xhh" target="_blank" rel="noopener noreferrer" title="简单简历"> 简单简历 </a> <a class="text-muted pr-2" href="https://www.baijing.cn/#xhh" target="_blank" rel="noopener noreferrer" title="白鲸出海"> 白鲸出海 </a> <a class="text-muted pr-2" href="https://www.tsalon.tech/#xhh" target="_blank" rel="noopener noreferrer" title="T沙龙"> T沙龙 </a> <a class="text-muted pr-2" href="https://www.jobui.com/#xhh" target="_blank" rel="noopener noreferrer" title="职友集"> 职友集 </a> <a class="text-muted pr-2" href="http://techparty.org/#xhh" target="_blank" rel="noopener noreferrer" title="TechParty"> TechParty </a> <a class="text-muted pr-2" href="https://weekly.pychina.org/#xhh" target="_blank" rel="noopener noreferrer" title="蟒周刊"> 蟒周刊 </a> <a class="text-muted pr-2" href="https://aimusicgenerator.me#xhh" target="_blank" rel="noopener noreferrer" title="Best AI Music Generator"> Best AI Music Generator </a> </span> </div> <hr class="border-top-0 border-bottom mb-4" style="border-color: rgba(0,0,0,0.05);" /> </div> <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" rel="noopener noreferrer" 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> </body> </html>