沉浸式翻译 immersive translate

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

DEV Community ·

在React中使用TypeScript掌握``标签：全面指南</h1> </a> </div> </div> <div class="card-body">  <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"> <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="点亮金句"> <span class="kp-text">在React应用中使用<iframe>标签嵌入外部内容时，需要关注安全性、性能和交互性。</span> </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="点亮金句"> <span class="kp-text">基本用法包括嵌入视频、地图和第三方小部件。</span> </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="点亮金句"> <span class="kp-text">动态控制<iframe>属性可以通过React状态实现。</span> </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="点亮金句"> <span class="kp-text">跨域通信可以使用postMessage实现安全通信。</span> </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="点亮金句"> <span class="kp-text">安全最佳实践包括使用sandbox属性和设置X-Frame-Options头。</span> </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="点亮金句"> <span class="kp-text">懒加载可以提高初始页面加载时间。</span> </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="点亮金句"> <span class="kp-text">显示PDF时可以通过在URL后添加#toolbar=0来隐藏工具栏。</span> </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="点亮金句"> <span class="kp-text">动态调整<iframe>的高度可以通过ResizeObserver实现。</span> </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="点亮金句"> <span class="kp-text">可访问性考虑包括为<iframe>添加title属性和提供后备链接。</span> </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="点亮金句"> <span class="kp-text">处理错误和边缘情况时，需要检测加载失败和CORS问题。</span> </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="点亮金句"> <span class="kp-text">高级跨域通信示例展示了双向消息传递的实现。</span> </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="点亮金句"> <span class="kp-text">结论是使用<iframe>时需平衡功能、安全性和性能。</span> </span> </li> </ul> </div> <script> (function () { function updateKeyPointUI(li, lit, count) { li.dataset.kpLit = lit ? '1' : '0'; li.classList.toggle('kp-lit', ((count && count > 0) || !!lit)); li.classList.toggle('kp-my-lit', !!lit); var btn = li.querySelector('.kp-action'); if (btn) { btn.title = lit ? '取消点亮' : '点亮金句'; btn.setAttribute('aria-pressed', lit ? 'true' : 'false'); btn.setAttribute('aria-label', lit ? '取消点亮' : '点亮金句'); } var metaEl = li.querySelector('.kp-meta'); if (metaEl) metaEl.style.display = (count && count > 0) || lit ? '' : 'none'; var supEl = li.querySelector('.kp-sup'); var countEl = li.querySelector('.kp-count'); if (countEl && supEl) { if (count && count > 0) { supEl.setAttribute('data-kp-count', '+' + String(count)); // Keep legacy span empty to avoid DOM text pollution countEl.textContent = ''; supEl.style.display = ''; } else { supEl.setAttribute('data-kp-count', ''); countEl.textContent = ''; supEl.style.display = 'none'; } } } function flashTitle(btn, nextTitle, durationMs) { if (!btn) return; var prev = btn.title; btn.title = nextTitle; window.setTimeout(function () { // 避免覆盖后续更新（例如成功后已点亮） if (btn.title === nextTitle) btn.title = prev; }, durationMs || 1200); } function getCurrentCount(li) { var supEl = li.querySelector('.kp-sup'); var raw = ''; if (supEl) raw = String(supEl.getAttribute('data-kp-count') || '').trim(); var n = parseInt(raw, 10); if (isNaN(n)) return 0; return n; } function bindKeyPoint(li) { var btn = li.querySelector('.kp-action'); if (!btn) return; function onActivate(ev, fromKeyboard) { if (ev) { ev.preventDefault(); ev.stopPropagation(); } var eid = li.dataset.eid; var idx = li.dataset.kpIndex; var kpHash = li.dataset.kpHash; if (!eid || idx === undefined || idx === null) return; if (!kpHash) return; if (btn.dataset.kpBusy === '1') return; btn.dataset.kpBusy = '1'; btn.classList.add('is-loading'); btn.setAttribute('aria-busy', 'true'); var updated = false; fetch('/e/' + encodeURIComponent(eid) + '/kp/' + encodeURIComponent(idx) + '/light/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ toggle: true, kp_hash: kpHash }) }) .then(function (r) { if (r.status === 403) { // 点亮需要登录态：弹出验证框，成功后刷新当前页即可 if (typeof window.openLoginModal === 'function') { window.openLoginModal(); } else if (typeof window.openMpVerify === 'function') { window.openMpVerify(window.location.href); } throw new Error('HTTP 403'); } if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); }) .then(function (data) { if (!data || !data.succ) throw new Error((data && data.err_message) || 'failed'); updateKeyPointUI(li, !!data.lit, data.count || 0); // 点亮成功后的引导逻辑 try { if (data && data.lit) { var quoteText = li.querySelector('.kp-text').textContent; var metaEl = li.querySelector('.kp-meta.js-light-share-trigger'); if (metaEl && data.kp_id) metaEl.setAttribute('data-kp-id', data.kp_id); if (data.is_first_mover && typeof window.openQuickComment === 'function') { // 第一个点亮者：先弹评论引导 window.openQuickComment(data.kp_id, quoteText, metaEl, true); } else if (typeof window.showLightModal === 'function') { // 正常点亮：直接弹分享卡片 if (metaEl) window.showLightModal(metaEl); } } } catch (e) { console.error('引导弹窗失败', e); } updated = true; }) .catch(function (err) { // 轻量失败提示：不弹窗、不打断阅读 if (err && String(err.message || '').indexOf('403') >= 0) { flashTitle(btn, '需要验证后才能点亮', 1500); } else { flashTitle(btn, '点亮失败，稍后再试', 1500); } }) .finally(function () { btn.classList.remove('is-loading'); btn.removeAttribute('aria-busy'); btn.dataset.kpBusy = '0'; // 移动端点击后焦点可能残留，取消点亮后会触发 :focus 样式看起来像“卡住粗体” // 键盘触发（Enter/Space）则保留焦点，方便连续操作 if (!fromKeyboard && btn && typeof btn.blur === 'function') btn.blur(); }); } btn.addEventListener('click', function (ev) { // 点击文本广告链接时：不拦截默认跳转，也不触发点亮。 try { if (ev && ev.target && ev.target.closest && ev.target.closest('a.text-ad')) { return; } } catch (_) { // ignore } onActivate(ev, false); }); btn.addEventListener('keydown', function (ev) { var key = ev.key || ev.code; if (key === 'Enter' || key === ' ') { onActivate(ev, true); } }); } document.addEventListener('DOMContentLoaded', function () { var items = document.querySelectorAll('.key-point-item'); for (var i = 0; i < items.length; i++) { bindKeyPoint(items[i]); } }); })(); </script>  <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('card-img-top')) { cloneImg.style.display = 'none'; // 触发样式回退 var overlay = cloneImg.nextElementSibling; if (overlay && overlay.classList.contains('entry-header-overlay')) { overlay.style.position='static'; overlay.style.background='none'; overlay.classList.remove('text-white'); overlay.classList.add('text-dark'); overlay.querySelectorAll('.text-white').forEach(el => el.classList.remove('text-white')); overlay.querySelectorAll('.text-white-50').forEach(el => {el.classList.remove('text-white-50'); el.classList.add('text-muted');}); } } 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('card-img-top')) { cloneImg.style.display = 'none'; var overlay = cloneImg.nextElementSibling; if (overlay && overlay.classList.contains('entry-header-overlay')) { overlay.style.position='static'; overlay.style.background='none'; overlay.classList.remove('text-white'); overlay.classList.add('text-dark'); overlay.querySelectorAll('.text-white').forEach(el => el.classList.remove('text-white')); overlay.querySelectorAll('.text-white-50').forEach(el => {el.classList.remove('text-white-50'); el.classList.add('text-muted');}); } } 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/wMODnttznkBCW1UrB7BV/" title="将Rust与Python结合用于数据科学"> 将Rust与Python结合用于数据科学 </a> <div class="text-muted text-truncate small">Python在数据科学中仍然主导，因其生态成熟且易用。但随着数据集增大，Python在性能和内存管理上面临挑战。Rust可提升性能和内存安全，适合复杂计算...</div> </li> <li> <a href="https://xhh.club/e/fZezo4IuWzMwFLT93s3j/" title="上下文是2026年AI编码的真正瓶颈"> 上下文是2026年AI编码的真正瓶颈 </a> <div class="text-muted text-truncate small">在工程领导会议上，AI生成代码的安全性和可信度受到关注，关键在于上下文传递。解决这一问题的公司将加速进展，减少技术债务。AI工具需获取工程师的隐性知识，目...</div> </li> <li> <a href="https://xhh.club/e/4HsqFT12PKndOf2cRgR5/" title="Gitee 软件工厂新范式：高安全、强协同、快交付，一体化研发全打通"> Gitee 软件工厂新范式：高安全、强协同、快交付，一体化研发全打通 </a> <div class="text-muted text-truncate small">国家安全领域的软件研发面临严格标准和复杂性双重挑战。传统研发模式效率低，存在管理和安全盲区。Gitee通过统一管理平台和标准化工具链，提高协作效率，缩短交...</div> </li> <li> <a href="https://xhh.club/e/7nqysYO0hQSzsN5GzOzZ/" title="戴夫·佩奇：pgEdge Postgres MCP 服务器的新功能：Beta 2 和 Beta 3"> 戴夫·佩奇：pgEdge Postgres MCP 服务器的新功能：Beta 2 和 Beta 3 </a> <div class="text-muted text-truncate small">pgEdge Postgres MCP Server Beta 2版本新增写入访问模式、改进令牌管理和CLI命令一致性。Beta 3将推出自定义工具和数据...</div> </li> <li> <a href="https://xhh.club/e/SToesNUXpwgEfGk54J7i/" title="随着太阳活动逐渐减弱星链将在今年把4,400颗卫星下降到480公里轨道"> 随着太阳活动逐渐减弱星链将在今年把4,400颗卫星下降到480公里轨道 </a> <div class="text-muted text-truncate small">随着太阳活动减弱，SpaceX计划在2026年将4400颗星链卫星从550公里调整至480公里轨道，以降低空气阻力和碰撞风险，从而提高安全性和减少能耗。</div> </li> <li> <a href="https://xhh.club/e/MCiKSiLQzHIXoN6pJaaW/" title="一月MCP核心维护者更新"> 一月MCP核心维护者更新 </a> <div class="text-muted text-truncate small">MCP团队经历重大变动，Inna Harper和Basil Hosmer离开，三位新核心维护者加入。2026年将是忙碌的一年，多个SEPs在推进中，MCP...</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="d-flex mb-4"> <span class="text-muted small"> <strong>友情链接：</strong> <a class="text-muted pr-2" href="https://moge.ai/#xhh" target="_blank" title="MOGE.AI"> MOGE.AI </a> <a class="text-muted pr-2" href="https://jiulongtech.com/#xhh" target="_blank" title="九胧科技"> 九胧科技 </a> <a class="text-muted pr-2" href="https://ai.gitee.com/#xhh" target="_blank" title="模力方舟 Gitee AI"> 模力方舟 Gitee AI </a> <a class="text-muted pr-2" href="https://cainiaopro.com/#xhh" target="_blank" title="菜鸟教程"> 菜鸟教程 </a> <a class="text-muted pr-2" href="https://www.remio.ai/#xhh" target="_blank" title="Remio.AI"> Remio.AI </a> <a class="text-muted pr-2" href="https://www.deepseeklian.com/#xhh" target="_blank" title="DeekSeek连连"> DeekSeek连连 </a> <a class="text-muted pr-2" href="https://www.53ai.com/#xhh" target="_blank" title="53AI"> 53AI </a> <a class="text-muted pr-2" href="http://www.shenlongproxy.com/?promotionLink=9c902a#xhh" target="_blank" title="神龙海外代理IP"> 神龙海外代理IP </a> <a class="text-muted pr-2" href="http://www.ipipgo.com/?promotionLink=9c902a#xhh" target="_blank" title="IPIPGO全球代理IP"> IPIPGO全球代理IP </a> <a class="text-muted pr-2" href="https://www.dongboge.cn/#xhh" target="_blank" title="东波哥的博客"> 东波哥的博客 </a> <a class="text-muted pr-2" href="https://www.youkaoshi.cn/#xhh" target="_blank" title="匡优考试在线考试系统"> 匡优考试在线考试系统 </a> <a class="text-muted pr-2" href="https://osguider.com/#xhh" target="_blank" title="开源服务指南"> 开源服务指南 </a> <a class="text-muted pr-2" href="https://docs.lanyingim.com/?utm_source=xhhclub#xhh" target="_blank" title="蓝莺IM"> 蓝莺IM </a> <a class="text-muted pr-2" href="https://solo.xin#xhh" target="_blank" title="Solo 独立开发者社区"> Solo 独立开发者社区 </a> <a class="text-muted pr-2" href="https://ai.eiefun.com/#xhh" target="_blank" title="AI酷站导航"> AI酷站导航 </a> <a class="text-muted pr-2" href="https://www.eiefun.com/#xhh" target="_blank" title="极客Fun"> 极客Fun </a> <a class="text-muted pr-2" href="https://blog.wpjam.com/#xhh" target="_blank" title="我爱水煮鱼"> 我爱水煮鱼 </a> <a class="text-muted pr-2" href="https://weekly.yichuansoft.com/#xhh" target="_blank" title="周报生成器"> 周报生成器 </a> <a class="text-muted pr-2" href="https://he3.app#xhh" target="_blank" title="He3.app"> He3.app </a> <a class="text-muted pr-2" href="https://easycv.cn/#xhh" target="_blank" title="简单简历"> 简单简历 </a> <a class="text-muted pr-2" href="https://www.baijing.cn/#xhh" target="_blank" title="白鲸出海"> 白鲸出海 </a> <a class="text-muted pr-2" href="https://www.tsalon.tech/#xhh" target="_blank" title="T沙龙"> T沙龙 </a> <a class="text-muted pr-2" href="https://www.jobui.com/#xhh" target="_blank" title="职友集"> 职友集 </a> <a class="text-muted pr-2" href="http://techparty.org/#xhh" target="_blank" title="TechParty"> TechParty </a> <a class="text-muted pr-2" href="https://weekly.pychina.org/#xhh" target="_blank" title="蟒周刊"> 蟒周刊 </a> <a class="text-muted pr-2" href="https://aimusicgenerator.me#xhh" target="_blank" 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" 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>