html 标签 iframe 基础与应用实践－前端开发

志文工作室

首页
计算机技术
- 电脑基础
- 存储安全
- 网站建设
- 编程开发
  - PHP
  - C
  - GOLang
  - Java
  - 数据库技术
  - 移动开发
前端开发
留言板
支持作者
有趣工具箱
更多
- 链接
- Works
- 网站地图
- Privacy Policy
- GITHUB
- 关于

1 HTML 标签</a></div> </div> </li><li data-pid="h22"> <div class="first-index"> <div><a href="#h22" title="2 iframe 常用场景">2 iframe 常用场景</a></div> </div> </li><li data-pid="h23"> <div class="first-index"> <div><a href="#h23" title="3 背景透明的 iframe">3 背景透明的 iframe</a></div> </div> </li><li data-pid="h24"> <div class="first-index"> <div><a href="#h24" title="4 与 iframe 通信">4 与 iframe 通信</a></div> </div> </li><li data-pid="h31" data-parent="h24"> <div class="secondary-index"> <div><a href="#h31" title="4.1 iframe 同域名通信">4.1 iframe 同域名通信</a></div> </div> </li><li data-pid="h32" data-parent="h24"> <div class="secondary-index"> <div><a href="#h32" title="4.2 iframe 跨域通信">4.2 iframe 跨域通信</a></div> </div> </li><li data-pid="h41" data-parent="h32"> <div class="third-index"> <div><a href="#h41" title="4.2.1 设置 <code>document.domain</code> 方式">4.2.1 设置 <code>document.domain</code> 方式</a></div> </div> </li><li data-pid="h42" data-parent="h32"> <div class="third-index"> <div><a href="#h42" title="4.2.2 postMessage 方式">4.2.2 postMessage 方式</a></div> </div> </li><li data-pid="h43" data-parent="h32"> <div class="third-index"> <div><a href="#h43" title="4.2.3 通过后端 API 中转">4.2.3 通过后端 API 中转</a></div> </div> </li><li data-pid="h25"> <div class="first-index"> <div><a href="#h25" title="5 iframe 高度自适应">5 iframe 高度自适应</a></div> </div> </li><li data-pid="h33" data-parent="h25"> <div class="secondary-index"> <div><a href="#h33" title="5.1 同域名下的 iframe 高度自适应示例">5.1 同域名下的 iframe 高度自适应示例</a></div> </div> </li><li data-pid="h34" data-parent="h25"> <div class="secondary-index"> <div><a href="#h34" title="5.2 跨域下通过 postMessage 实现 iframe 高度自适应示例">5.2 跨域下通过 postMessage 实现 iframe 高度自适应示例</a></div> </div> </li><li data-pid="h26"> <div class="first-index"> <div><a href="#h26" title="6 iframe 权限与安全">6 iframe 权限与安全</a></div> </div> </li><li data-pid="h35" data-parent="h26"> <div class="secondary-index"> <div><a href="#h35" title="6.1 https 页面内的 iframe">6.1 https 页面内的 iframe</a></div> </div> </li><li data-pid="h36" data-parent="h26"> <div class="secondary-index"> <div><a href="#h36" title="6.2 sandbox 沙盒属性">6.2 sandbox 沙盒属性</a></div> </div> </li><li data-pid="h27"> <div class="first-index"> <div><a href="#h27" title="7 iframe 其他问题">7 iframe 其他问题</a></div> </div> </li><li data-pid="h37" data-parent="h27"> <div class="secondary-index"> <div><a href="#h37" title="7.1 自适应高度后的窗体高度问题">7.1 自适应高度后的窗体高度问题</a></div> </div> </li><li data-pid="h28"> <div class="first-index"> <div><a href="#h28" title="8 相关参考">8 相关参考</a></div> </div> </li> </ul> </div> <div class="icp-beian post-ding"> <div class="post-nice"> <span class="number">6</span> <img src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/images/zan.svg" title="点赞"/> </div> <div class="post-bad"> <span class="number">0</span> <img src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/images/cai.svg" title="踩"/> </div> </div> </aside> </div>  <div class="main-main"> <article class="main-content">  <div class="breadcrumb"> 现在位置: <a href="/" title="首页">首页</a> / <a href="https://lzw.me/cate/cs/ued" title=" 前端开发"> 前端开发</a> / <a href="https://lzw.me/tag/html" title=" HTML"> HTML</a> / 正文 </div>   <h1> html 标签 iframe 基础与应用实践 </h1>   <div class="article-info"> <ul> <li id="author"><i class="iconfont icon-chuangzuozhejieshao"></i>任侠</li> <li id="category"><i class="iconfont icon-fenlei"></i><a href="https://lzw.me/cate/cs/ued" title=" 前端开发">前端开发</a> </li> <li> <i class="iconfont icon-shijian"></i>2017-08-08 </li> <li><i class="iconfont icon-icon-test"></i>4390热度</li> <li style="border:none"><i class="iconfont icon-pinglun"><a href="#comment"></i>0评论</a></li> </ul> </div>  <div class="main-article"> <div id="content-index" class="content-index" style="float:left;"><div class="content-index-title">目录</div><span class="content-index-toctoggle">[<a id="content-index-togglelink" href="javascript:content_index_toggleToc()">隐藏</a>]</span> <script type="text/javascript" language="javascript"> window.content_index_showTocToggle=true;function content_index_toggleToc(){var tts="显示";var tth="隐藏";if(window.content_index_showTocToggle){window.content_index_showTocToggle=false;document.getElementById("content-index-contents").style.display="none";document.getElementById("content-index-togglelink").innerHTML=tts}else{window.content_index_showTocToggle=true;document.getElementById("content-index-contents").style.display="block";document.getElementById("content-index-togglelink").innerHTML=tth}} </script> <ul id="content-index-contents"><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h21" title="1 HTML <iframe> 标签"><span>1 HTML <iframe> 标签</span></a></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h22" title="2 iframe 常用场景"><span>2 iframe 常用场景</span></a></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h23" title="3 背景透明的 iframe"><span>3 背景透明的 iframe</span></a></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h24" title="4 与 iframe 通信"><span>4 与 iframe 通信</span></a><ul class="children"><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h31" title="4.1 iframe 同域名通信"><span>4.1 iframe 同域名通信</span></a></li><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h32" title="4.2 iframe 跨域通信"><span>4.2 iframe 跨域通信</span></a><ul class="children"><li class="content-index-level-3"><a href="https://lzw.me/a/html-iframe.html#h41" title="4.2.1 设置 document.domain 方式"><span>4.2.1 设置 document.domain 方式</span></a></li><li class="content-index-level-3"><a href="https://lzw.me/a/html-iframe.html#h42" title="4.2.2 postMessage 方式"><span>4.2.2 postMessage 方式</span></a></li><li class="content-index-level-3"><a href="https://lzw.me/a/html-iframe.html#h43" title="4.2.3 通过后端 API 中转"><span>4.2.3 通过后端 API 中转</span></a></li></ul></li></ul></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h25" title="5 iframe 高度自适应"><span>5 iframe 高度自适应</span></a><ul class="children"><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h33" title="5.1 同域名下的 iframe 高度自适应示例"><span>5.1 同域名下的 iframe 高度自适应示例</span></a></li><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h34" title="5.2 跨域下通过 postMessage 实现 iframe 高度自适应示例"><span>5.2 跨域下通过 postMessage 实现 iframe 高度自适应示例</span></a></li></ul></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h26" title="6 iframe 权限与安全"><span>6 iframe 权限与安全</span></a><ul class="children"><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h35" title="6.1 https 页面内的 iframe"><span>6.1 https 页面内的 iframe</span></a></li><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h36" title="6.2 sandbox 沙盒属性"><span>6.2 sandbox 沙盒属性</span></a></li></ul></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h27" title="7 iframe 其他问题"><span>7 iframe 其他问题</span></a><ul class="children"><li class="content-index-level-2"><a href="https://lzw.me/a/html-iframe.html#h37" title="7.1 自适应高度后的窗体高度问题"><span>7.1 自适应高度后的窗体高度问题</span></a></li></ul></li><li class="content-index-level-1"><a href="https://lzw.me/a/html-iframe.html#h28" title="8 相关参考"><span>8 相关参考</span></a></li></ul></div><div style="clear:both;overflow:hidden;height:2em"></div> <p>在中后台管理系统中，由于业务功能模块的复杂性，使用 iframe 是不可避免的。当需要嵌入单独实现的或由另外一个系统提供的页面功能模块时，你只能选择 iframe。</p> <p>本文尝试对 iframe 应用实践中常见的问题进行简要整理。</p> <h2 id='h21' >1 HTML <iframe> 标签</h2> <p>iframe 用于创建页内框架，以在当前页面中嵌入另外一个页面。所有浏览器都支持 <code>&lt;iframe&gt;</code> 标签。</p> <p><strong>iframe 属性</strong></p> <p>可设置的属性主要有 iframe 特有属性、HTML 全局属性和事件属性。这里不作详述，具体请参考：</p> <ul> <li>http://www.w3school.com.cn/tags/html_ref_standardattributes.asp</li> <li>https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe</li> </ul> <h2 id='h22' >2 iframe 常用场景</h2> <ul> <li>嵌入并展示另外一个页面的功能模块</li> <li>非 formData 方式的兼容低版本浏览器的异步上传实现</li> <li>more...</li> </ul> <h2 id='h23' >3 背景透明的 iframe</h2> <p>如主页面设置了背景色或背景图片，iframe 区域便会有一个白色区块，这是因为 iframe 默认背景为白色。这时可能你需要让 iframe 背景透明。方法为：</p> <p>设置 <code>allowtransparency="true"</code> 属性，并设置样式： <code>background-color: transparent</code>。</p> <p>示例代码：</p> <pre><code class="html"><iframe id="lzwmeIframe" src="https://lzw.me" allowtransparency="true" style="background-color: transparent"> </iframe> </code></pre> <h2 id='h24' >4 与 iframe 通信</h2> <h3 id='h31' >4.1 iframe 同域名通信</h3> <p>当 iframe 中的页面域名与主页面域名相同时，可以直接通过互相访问文档内容来通信。</p> <pre><code class="js">const iframe = document.getElementById('lzwmeIframe'); const height = iframe.contentWindow.document.body.scrollHeight; console.log('子页面高度为：', height); </code></pre> <h3 id='h32' >4.2 iframe 跨域通信</h3> <p>当 iframe 中的页面与主页面域名不同，则因安全问题不可互相访问具体文档。此时需通过其他方式进行。</p> <h4 id='h41' >4.2.1 设置 <code>document.domain</code> 方式</h4> <p>当 iframe 中的页面与主页面的顶级域名相同时，可以通过在两个页面中都设置 <code>document.domain</code> 为顶级域名，如此双方即可互相访问文档内容，则与同域名方式相同。示例：</p> <pre><code class="js">document.domain = 'lzw.me'; </code></pre> <h4 id='h42' >4.2.2 postMessage 方式</h4> <p>通过 postMessage 是当前最简单的实现方式。具体参见下面的跨域下的 iframe 高度自适应示例代码。</p> <p>关于 postMessage 的用法可参考：</p> <ul> <li>https://lzw.me/a/html5-postmessage-post-cross-domain.html</li> <li>https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage</li> </ul> <h4 id='h43' >4.2.3 通过后端 API 中转</h4> <p>通过与后端 API 结合，在子窗体向服务器发送自身相关数据，在父窗体向后端 API 请求该数据，由此通过 API 中转实现通信，也是一种兼容各种情况下的常见实现思路。</p> <p>此方法对前端来说稍微复杂，如非必要不建议选择此方案。</p> <h2 id='h25' >5 iframe 高度自适应</h2> <p>让 iframe 高度与内部页面文档高度相同，即可以让 iframe 没有滚动条。</p> <p>iframe 高度自适应主要通过主页面与 iframe 通信的方式来实现。</p> <h3 id='h33' >5.1 同域名下的 iframe 高度自适应示例</h3> <p>同域名下访问 iframe 内的文档窗体高度来设置 iframe 高度即可。示例：</p> <pre><code class="js">const iframe = document.getElementById('lzwmeIframe'); function setIframeHeight() { try { const docEl = iframe.contentWindow.document.documentElement; iframe.style.height = Math.max(docEl.offsetHeight, docEl.scrollHeight) + 'px'; iframe.style.width = Math.max(docEl.offsetWidth, docEl.scrollWidth) + 'px'; console.log(iframe.style.height, iframe.style.width); } catch(e) { console.log('读取 iframe 内文档异常:', e); } } // iframe 加载时 iframe.addEventListener('load', setIframeHeight); // 窗体大小改变时 window.addEventListener('resize', setIframeHeight); iframe.src = 'https://lzw.me'; </code></pre> <h3 id='h34' >5.2 跨域下通过 postMessage 实现 iframe 高度自适应示例</h3> <p>跨域下可通过 postMessage 通信实现。</p> <p>在父页面中监听 <code>message</code> 事件，得到子窗体高度时改变 iframe 高度：</p> <pre><code class="js">const iframe = document.getElementById('lzwmeIframe'); addEventListener('message', function(ev) { const data = ev.data; if (data.height) { iframe.style.height = data.height + 'px'; } }); // 窗体大小改变，请求子页面再次发送 addEventListener('resize', function() { iframe.contentWindow.postMessage({action: 'getHeight'}, '*'); }); </code></pre> <p>在子页面中，当页面加载完成时，以及监听到 <code>message</code> 事件得到获取高度请求时，发送自己的文档高度：</p> <pre><code class="js">let parent; if (window.parent !== window) { parent = window.parent; } function sendHeight() { if (!parent) return; const docEl = document.documentElement; const height = Math.max(docEl.offsetHeight, docEl.scrollHeight); parent.postMessage({ height: height }, '*'); } addEventListener('load', function() { sendHeight(); }); addEventListener('message', function(ev) { if (ev.data.type !== 'getHeight') { return; } if (!parent) { parent = ev.source; } sendHeight(); }); </code></pre> <h2 id='h26' >6 iframe 权限与安全</h2> <h3 id='h35' >6.1 https 页面内的 iframe</h3> <p>如页面网址为 https 方式，则浏览器因安全问题，会阻塞(block) 对 http 资源的请求。</p> <p>那么 iframe 中也是一样的，即主页面使用了 https，则 iframe 中内嵌的页面也必须为 https 方式。</p> <p>对于此问题，有如下几种解决方案：</p> <ul> <li>如 iframe 中的站点是可控的，则配置它支持 https 即可。</li> <li>将要 iframe 的 http 的站点进行代理转发，转发到同域下的 https 的域名下。但这种方案会存在较多的细节问题需针对性处理，一般很难实现完全兼容。</li> <li>配置让主页面站点同时支持 http 和 https，需要在 iframe 中加载 http 方式的地址时，主页面强制跳转到 http 域名上。</li> </ul> <h3 id='h36' >6.2 sandbox 沙盒属性</h3> <p>通过设置 <code>sandbox</code> 属性，可以启用一系列对 iframe 中内容的额外限制。其取值可为以下几种的组合：</p> <ul> <li><code>""</code> 为空，即不设置，默认不作任何限制。</li> <li><code>allow-forms</code> 允许表单提交</li> <li><code>allow-same-origin</code> 允许 iframe 内容被视为与包含文档有相同的来源</li> <li><code>allow-scripts</code> 允许脚本执行</li> <li><code>allow-top-navigation</code> 允许 iframe 内容从包含文档导航（加载）内容（即允许从 iframe 内修改父级的页面跳转）</li> </ul> <p>当不为空时，不包含在取值列表中的项即被禁用。</p> <p>例如，iframe 中的页面行为可能是不可控的，为了防止其将父页面跳转，可以限制 <code>allow-top-navigation</code>，不允许从 iframe 中修改其父页面导航。示例代码：</p> <pre><code class="html"> <iframe sandbox="allow-scripts allow-same-origin allow-forms" name="lzwme" class="lzwme-iframe" id="lzwmeIframe" frameborder="0" scrolling="no" width="360" height="640" allowtransparency="true" frameborder="0" src=""></iframe> </code></pre> <p>如此设置后 iframe 内的（跨域名的）页面，即无法强制父窗体跳转。但同源地址仍然可有权限跳转，如有需要可作进一步限制，即移除 <code>allow-same-origin</code>。但有一点需注意，移除 <code>allow-same-origin</code> 后，iframe 内想读取顶级域名 cookie 等行为也会被禁止，这可能会带来一些问题，另外跨域的字体加载也会失败，所以原则上不建议移除它。</p> <h2 id='h27' >7 iframe 其他问题</h2> <h3 id='h37' >7.1 自适应高度后的窗体高度问题</h3> <p>当对 iframe 实现自适应高度后，通过 <code>window.innerHeight</code> 读取的值与其内部 body 的值一致。当内部页面存在屏幕居中的 modal 浮层弹窗时，则会出现问题：因为它一般是通过 <code>window.innerHeight</code> 来得到窗体高度，然后计算居中位置的，那么弹窗很可能就出现在实际上看不到的地方。</p> <p>针对这种情况，我们的建议是不要做高度自适应，改用 <code>calc</code> 动态计算 iframe 高度，让 iframe 存在滚动条，页面不存在即可。示例：</p> <pre><code class="js">addEventListener('resize', function() { const iframe = document.getElementById('lzwmeIframe'); const top = iframe.getBoundingClientRect().top; const height = `calc(100vh - ${top}px)`; if (height !== iframe.style.height) { iframe.style.height = height; } }); addEventListener('load', function() { window.resize(); }); </code></pre> <h2 id='h28' >8 相关参考</h2> <ul> <li>http://www.w3school.com.cn/tags/html_ref_standardattributes.asp</li> <li>https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe</li> <li>https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage</li> </ul> </div>  <footer> <div class="article-footer">  <div class="copyright"> <div class="gaoyuan yc"><b>版权声明：</b>除非注明，否则均为<a href="https://lzw.me/">志文工作室</a>原创文章，转载或复制请以超链接形式并注明出处！</div> </div> <div class="flex-center"> <div class="post-ding"> <div class="post-nice"> <span class="number">6</span> <img src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/images/zan.svg" title="点赞"/> </div> <div class="post-bad"> <span class="number">0</span> <img src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/images/cai.svg" title="踩"/> </div>  <div class="donate flex-center"> <a href="https://lzw.me/donate"> <button>赞赏</button> </a> </div> </div> </div>  <div class="label"> <i class="iconfont icon-biaoqian"></i> <ul> <li><a title='HTML' href='https://lzw.me/tag/html'>HTML</a></li><li><a title='iframe' href='https://lzw.me/tag/iframe'>iframe</a></li><li><a title='前端开发' href='https://lzw.me/tag/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91'>前端开发</a></li> </ul> </div> </div> <div class="footer-nav"> <div class="to"> <span class="text">上一篇</span> <a href="https://lzw.me/a/fis3.html" title="fis3 工程化工具应用实践经验">fis3 工程化工具应用实践经验</a> </div> <div class="to right"> <span class="text">下一篇</span> <a href="https://lzw.me/a/puppeteer-install-skip-download-chrome.html" title="puppeteer 最新版本安装设置国内代理、设置跳过 chrome 安装的方法">puppeteer 最新版本安装设置国内代理、设置跳过 chrome 安装的方法</a> </div> </div> </footer> </article> <div class="div-info recommend "> <div class="header"> <ul> <li class="active" style="padding-left:1rem;padding-right:1rem;"><div class="mark"></div>文章推荐</li>  </ul> </div> <div class="list" id="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="https://lzw.me/a/pt-px-em-rem.html" title="pt 与 px、em、rem 的区别与换算" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="pt 与 px、em、rem 的区别与换算"/> </div> <div class="caption"> pt 与 px、em、rem 的区别与换算 </div> <div class="detail"> <span>2016年05月12日</span> <span> <i class="iconfont icon-icon-test"></i>17724 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/css3-box-shadow.html" title="CSS3 box-shadow容器阴影效果示例" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="CSS3 box-shadow容器阴影效果示例"/> </div> <div class="caption"> CSS3 box-shadow容器阴影效果示例 </div> <div class="detail"> <span>2013年03月09日</span> <span> <i class="iconfont icon-icon-test"></i>6992 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/react17-document-addeventlistener.html" title="React16 升级至 React17 后的 document.addEventListener 异常分析与处理" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="React16 升级至 React17 后的 document.addEventListener 异常分析与处理"/> </div> <div class="caption"> React16 升级至 React17 后的 document.addEventListener 异常分析与处理 </div> <div class="detail"> <span>2021年09月03日</span> <span> <i class="iconfont icon-icon-test"></i>1499 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/source-map-explorer.html" title="使用 source-map-explorer 分析前端打包结果进行包体积优化" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/uploads/2020/04/source-map-explorer.png" alt="使用 source-map-explorer 分析前端打包结果进行包体积优化"/> </div> <div class="caption"> 使用 source-map-explorer 分析前端打包结果进行包体积优化 </div> <div class="detail"> <span>2020年04月29日</span> <span> <i class="iconfont icon-icon-test"></i>3328 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/fed-file-download.html" title="前端 javascript 实现文件下载" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/uploads/2017/04/a-download.png" alt="前端 javascript 实现文件下载"/> </div> <div class="caption"> 前端 javascript 实现文件下载 </div> <div class="detail"> <span>2017年04月27日</span> <span> <i class="iconfont icon-icon-test"></i>28024 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/778.html" title="CSS实现垂直居中的5种方法分析及示例" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="CSS实现垂直居中的5种方法分析及示例"/> </div> <div class="caption"> CSS实现垂直居中的5种方法分析及示例 </div> <div class="detail"> <span>2009年03月25日</span> <span> <i class="iconfont icon-icon-test"></i>4537 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/electron-fs-asar.html" title="Electron 应用中 fs 模块删除 asar 文件被占用的问题与解决" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/uploads/2022/10/electron-asar-fs-delete.png" alt="Electron 应用中 fs 模块删除 asar 文件被占用的问题与解决"/> </div> <div class="caption"> Electron 应用中 fs 模块删除 asar 文件被占用的问题与解决 </div> <div class="detail"> <span>2022年10月14日</span> <span> <i class="iconfont icon-icon-test"></i>1653 </span> </div> <div class="category"> 前端开发 </div> </a> </div> <div class="swiper-slide"> <a href="https://lzw.me/a/web-frontend-specification.html" title="Web前端开发规范参考" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="Web前端开发规范参考"/> </div> <div class="caption"> Web前端开发规范参考 </div> <div class="detail"> <span>2013年08月01日</span> <span> <i class="iconfont icon-icon-test"></i>4866 </span> </div> <div class="category"> 前端开发 </div> </a> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div>  <div class="div-info" id="comment"> <div class="header"> <ul> <li class="active"><div class="mark"></div>评论区</li>  </ul> </div> <form class="comment-form" action="/wp-comments-post.php" method="post">  <div class="comment-header">  <div class="comment-person"> <div class="comment-avatar"> <img src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/images/avatar.svg?ver=1757069200" alt="默认头像" title="默认头像"/> </div> <div class="comment-info"> <div class="comment-info-top">恨相知晚</div> <div class="comment-info-bottom">一起参与讨论！</div> </div> </div> <div class="comment-loginout"> <a style="display: none" title="注销登录" href="https://lzw.me/wp-login.php?action=logout&redirect_to=https%3A%2F%2Flzw.me%2Fa%2Fhtml-iframe.html&_wpnonce=8ad508fc59">注销登录</a> </div> </div> <div class="comment-form-main"> <input type="hidden" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="efd38d48b2" /> <input type="hidden" name="comment_parent" value=" "> <input type="hidden" name="comment_post_ID" value="2348" id="comment_post_ID"> <div class="comment-textarea"> <textarea id="comment_content" name="comment" maxlength="65525" placeholder="三言两语,安慰自己,冷言冷语,坚持自己" rows="5" class="comment-content"></textarea> <i class="iconfont icon-biaoqing emoji"></i> <ul class="emoji-list"> <li class="smilees" title="呵呵" data-emoji="hehe"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/hehe.png"/> </li> <li class="smilees" title="哈哈" data-emoji="haha"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/haha.png"/> </li> <li class="smilees" title="吐舌" data-emoji="tushe"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/tushe.png"/> </li> <li class="smilees" title="啊" data-emoji="a"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/a.png"/> </li> <li class="smilees" title="酷" data-emoji="ku"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/ku.png"/> </li> <li class="smilees" title="怒" data-emoji="nu"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/nu.png"/> </li> <li class="smilees" title="开心" data-emoji="kaixin"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/kaixin.png"/> </li> <li class="smilees" title="汗" data-emoji="han"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/han.png"/> </li> <li class="smilees" title="泪" data-emoji="lei"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/lei.png"/> </li> <li class="smilees" title="黑线" data-emoji="heixian"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/heixian.png"> </li> <li class="smilees" title="鄙视" data-emoji="bishi"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/bishi.png"/> </li> <li class="smilees" title="不高兴" data-emoji="bugaoxing"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/bugaoxing.png"/> </li> <li class="smilees" title="真棒" data-emoji="zhenbang"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/zhenbang.png"/> </li> <li class="smilees" title="钱" data-emoji="qian"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/qian.png"/> </li> <li class="smilees" title="疑问" data-emoji="yiwen"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/yiwen.png"/> </li> <li class="smilees" title="阴险" data-emoji="yinxian"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/yinxian.png"/> </li> <li class="smilees" title="吐" data-emoji="tu"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/tu.png"/> </li> <li class="smilees" title="咦" data-emoji="yi"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/yi.png"/> </li> <li class="smilees" title="委屈" data-emoji="weiqv"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/weiqv.png"/> </li> <li class="smilees" title="花心" data-emoji="huaxin"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/huaxin.png"/> </li> <li class="smilees" title="呼~~" data-emoji="hu"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/hu.png"/> </li> <li class="smilees" title="笑眼" data-emoji="xiaoyan"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/xiaoyan.png"/> </li> <li class="smilees" title="冷" data-emoji="leng"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/leng.png"/> </li> <li class="smilees" title="太开心" data-emoji="taikaixin"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/taikaixin.png"/> </li> <li class="smilees" title="右滑稽" data-emoji="huaji2"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/huaji2.png"> </li> <li class="smilees" title="左滑稽" data-emoji="huaji"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/huaji.png"/> </li> <li class="smilees" title="勉强" data-emoji="mianqiang"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/mianqiang.png"/> </li> <li class="smilees" title="狂汗" data-emoji="kuanghan"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/kuanghan.png"/> </li> <li class="smilees" title="乖" data-emoji="guai"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/guai.png"/> </li> <li class="smilees" title="睡觉" data-emoji="shuijiao"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/shuijiao.png"/> </li> <li class="smilees" title="惊哭" data-emoji="jingku"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/jingku.png"/> </li> <li class="smilees" title="生气" data-emoji="shengqi"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/shengqi.png"> </li> <li class="smilees" title="惊讶" data-emoji="jingya"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/jingya.png"/> </li> <li class="smilees" title="喷" data-emoji="pen"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/pen.png"/> </li> <li class="smilees" title="爱心" data-emoji="aixin"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/aixin.png"/> </li> <li class="smilees" title="心碎" data-emoji="xinsui"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/xinsui.png"/> </li> <li class="smilees" title="玫瑰" data-emoji="meigui"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/meigui.png"/> </li> <li class="smilees" title="礼物" data-emoji="liwu"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/liwu.png"/> </li> <li class="smilees" title="彩虹" data-emoji="caihong"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/caihong.png"/> </li> <li class="smilees" title="星星月亮" data-emoji="xxyl"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/xxyl.png"/> </li> <li class="smilees" title="太阳" data-emoji="sun"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/sun.png"/> </li> <li class="smilees" title="钱币" data-emoji="money"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/money.png"/> </li> <li class="smilees" title="灯泡" data-emoji="bulb"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/bulb.png"/> </li> <li class="smilees" title="茶杯" data-emoji="cup"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/cup.png"/> </li> <li class="smilees" title="蛋糕" data-emoji="cake"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/cake.png"/> </li> <li class="smilees" title="音乐" data-emoji="music"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/music.png"/> </li> <li class="smilees" title="haha" data-emoji="haha2"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/haha2.png"/> </li> <li class="smilees" title="胜利" data-emoji="win"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/win.png"/> </li> <li class="smilees" title="大拇指" data-emoji="good"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/good.png"/> </li> <li class="smilees" title="弱" data-emoji="bad"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/bad.png"/> </li> <li class="smilees" title="OK" data-emoji="ok"> <img loading='lazy' src="https://fastly.jsdelivr.net/gh/renxia/theme-document@dev-lzw/assets/smilies/ok.png"/> </li> </ul> </div> <div class="comment-container"> <input placeholder="昵称" name="author" type="text" class="comment-name" value="" required/> <input placeholder="邮箱" name="email" type="email" class="comment-mail" value="" required/> <input placeholder="网址" name="url" type="url" class="comment-url" value="" required/> </div> </div> <div class="comment-form-footer"> <button type="submit">提交</button> </div> </form>  </div> </div>  <div id="fixed"> <aside class="main-right" id="right">  <div class="author"> <div class="author-beijin"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/bg.jpg" title="作者头像"/> </div> <div class="offset"> <div class="author-avatar"> <img loading="lazy" src="https://lzw.me/x/lib/lzwme/img/xcx_tool.jpg" title="作者头像"/> </div> <div class="author-info"> <div class="nickname"> 任侠 </div> <div class="tag"> feder </div> </div> <div class="author-self"> </div> <div class="statistic"> <div class="item"> <span class="top">用户数</span> <span class="bottom">2317</span> </div> <div class="item"> <span class="top">标签数</span> <span class="bottom">3347</span> </div> <div class="item"> <span class="top">链接数</span> <span class="bottom" id="siteCreateDate">213</span> </div> <div class="item"> <span class="top">文章数</span> <span class="bottom">1719</span> </div> <div class="item"> <span class="top">评论数</span> <span class="bottom">3262</span> </div> <div class="item"> <span class="top">阅读数</span> <span class="bottom">15400093</span> </div> <div class="item"> <span class="top">运行天数</span> <span class="bottom" id="runDays">6278</span> </div> <div class="item"> <span class="top">建站时间</span> <span class="bottom" id="siteCreateDate">2008-06-28</span> </div> <div class="item"> <span class="top">最后更新</span> <span class="bottom">2025-9-5</span> </div> </div> </div> </div>  <div class="div-info"> <div class="header"> <ul> <li class="active"><div class="mark"></div>文章信息</li>  </ul> </div> <ul class="ul" style="margin-top: 0.5rem;"> <li>任侠创建于：<span>2017-08-08 10:16</span></li> <li>最后编辑于：<span>2025-07-07 14:50</span></li> <li>字数统计：<span>5486</span></li> </ul> </div> <div class="div-info recent"> <div class="header"> <ul> <li class="active"><div class="mark"></div>最新文章</li>  </ul> </div> <ul class="ul"> <li> <a href="https://lzw.me/a/ai-coding-assistant.html" title="AI Coding Assistant：流行 AI 智能编程辅助工具列表参考（持续更新）" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/uploads/2025/09/ai-coding-assistant.jpg" alt="AI Coding Assistant：流行 AI 智能编程辅助工具列表参考（持续更新）" /> </div> <div class="article"> <div class="caption"> AI Coding Assistant：流行 AI 智能编程辅助工具列表参考（持续更新） </div> <div class="datetime"> 2025-07-05 </div> </div> </a> </li><li> <a href="https://lzw.me/a/domain-transfer-from-godaddy-to-cloudflare.html" title="GoDaddy 域名续费太贵：转移到 Cloudflare 价格省一半！" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/uploads/2025/09/cloudflare-domain-transfer-1.jpg" alt="GoDaddy 域名续费太贵：转移到 Cloudflare 价格省一半！" /> </div> <div class="article"> <div class="caption"> GoDaddy 域名续费太贵：转移到 Cloudflare 价格省一半！ </div> <div class="datetime"> 1天前 </div> </div> </a> </li><li> <a href="https://lzw.me/a/qmt-back-test-get-price.html" title="迅投QMT实盘和回测模式下获取handlebar当前K线价格的方法" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/uploads/2025/08/qmt-back-test-preview.jpg" alt="迅投QMT实盘和回测模式下获取handlebar当前K线价格的方法" /> </div> <div class="article"> <div class="caption"> 迅投QMT实盘和回测模式下获取handlebar当前K线价格的方法 </div> <div class="datetime"> 6天前 </div> </div> </a> </li><li> <a href="https://lzw.me/a/electron-builder-uos-deepin.html" title="Electron 应用构建支持统信 UOS 系统安装使用的方法" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="Electron 应用构建支持统信 UOS 系统安装使用的方法" /> </div> <div class="article"> <div class="caption"> Electron 应用构建支持统信 UOS 系统安装使用的方法 </div> <div class="datetime"> 28天前 </div> </div> </a> </li><li> <a href="https://lzw.me/a/nginx-sse-off-proxy-buffering.html" title="SSE 流式请求避免 nginx 缓冲导致块式输出的解决办法" target="_blank"> <div class="thumnbnail"> <img loading="lazy" src="https://lzw.me/wp-content/themes/theme-document/assets/images/default.png" alt="SSE 流式请求避免 nginx 缓冲导致块式输出的解决办法" /> </div> <div class="article"> <div class="caption"> SSE 流式请求避免 nginx 缓冲导致块式输出的解决办法 </div> <div class="datetime"> 2025-06-08 </div> </div> </a> </li> </ul> </div> <div class="div-info"> <div class="header"> <ul> <li class="active"><div class="mark"></div>最新评论</li>  </ul> </div> <ul class="ul" style="margin-top: 0.5rem;"> <li> <div class="comment-widget"> <img loading="lazy" class="author-avatar" src="https://gravatar.loli.net/avatar/?s=96&d=mm&r=g" title="头像"/> <a href="https://lzw.me/a/acme-sh-dnspod-api-nginx.html" title="[…] 参考：基于 acme.sh 和 dnspod API 自动生成与续期泛域名SSL证书 […]"> <span class="name"> GoDaddy 域名续费太贵：转移到 Cloudflare 价格省一半！－网站建设－志文工作室 </span> <span class="comment-widget-content"> […] 参考：基于 acme.sh 和 dnspod API 自动生成与续期泛域名SSL证书 […] </span> </a> </div> </li><li> <div class="comment-widget"> <img loading="lazy" class="author-avatar" src="https://gravatar.loli.net/avatar/?s=96&d=mm&r=g" title="头像"/> <a href="https://lzw.me/a/free-movie-website.html" title="[…] 简单来说，通过开源免费的电影建站程序搭建，并配置上定时自动化执行的第三方视频采集资源站持续更新片源，就可以低成本轻松搭建一个电影在线观看网站。如果想了解的更多，可以参阅我曾写过的这篇介绍文章：免费电影网站建设的模式与技术内幕 […] "> <span class="name"> 免费电影网站的另一种打开方式：批量下载、边看边播不卡顿、支持 Docker 部署、永久免费！ - 志文工作室 </span> <span class="comment-widget-content"> […] 简单来说，通过开源免费的电影建站程序搭建，并配置上定时自动化执行的第三方视频采集资源站持续更新片源，就可以低成本轻松搭建一个电影在线观看网站。如果想了解的更多，可以参阅我曾写过的这篇介绍文章：免费电影网站建设的模式与技术内幕 […] </span> </a> </div> </li><li> <div class="comment-widget"> <img loading="lazy" class="author-avatar" src="https://gravatar.loli.net/avatar/3637d1ca9190602b77712364fc323cf531777848f137ab5c95f8e02a0cc2acc0?s=96&d=mm&r=g" title="头像"/> <a href="https://lzw.me/a/searxng-openwebui.html" title="<p>b站这些国内的比较快，搜索引擎类的国内应该就博查比较专业一些。另外前几天看到阿里通义文档里有夸克搜索的API可以调用，可以去看看文档</p> "> <span class="name"> 任侠 </span> <span class="comment-widget-content"> <p>b站这些国内的比较快，搜索引擎类的国内应该就博查比较专业一些。另外前几天看到阿里通义文档里有夸克搜索的API可以调用，可以去看看文档</p> </span> </a> </div> </li><li> <div class="comment-widget"> <img loading="lazy" class="author-avatar" src="https://gravatar.loli.net/avatar/?s=96&d=mm&r=g" title="头像"/> <a href="https://lzw.me/a/searxng-openwebui.html" title="或者searXNG可以不可以限制返回数量、或者限制查询时间？没有使用open-webui部署，单纯的python的request调用 "> <span class="name"> baiyang </span> <span class="comment-widget-content"> 或者searXNG可以不可以限制返回数量、或者限制查询时间？没有使用open-webui部署，单纯的python的request调用 </span> </a> </div> </li><li> <div class="comment-widget"> <img loading="lazy" class="author-avatar" src="https://gravatar.loli.net/avatar/?s=96&d=mm&r=g" title="头像"/> <a href="https://lzw.me/a/searxng-openwebui.html" title="searXNG在国内能使用的只有360、baidu、搜狗，还有偶尔能用的bing。我问问题大概查询时间都是3s以上，大佬有没有别的搜搜引擎推荐 "> <span class="name"> baiyang </span> <span class="comment-widget-content"> searXNG在国内能使用的只有360、baidu、搜狗，还有偶尔能用的bing。我问问题大概查询时间都是3s以上，大佬有没有别的搜搜引擎推荐 </span> </a> </div> </li> </ul> </div> </aside> </div> </main>   <div class="fixed">  <button class="toTop" data-text="回到顶部"><i class="iconfont icon-you-copy-copy-copy"></i></button>  <button id="theme-color" data-text="主题设置"><i class="iconfont icon-shezhi1"> <div class="theme-color"> <ul> <li> <div class="personal"></div> </li> <li> <div class="theme-one"></div> </li> <li> <div class="theme-two"></div> </li> <li> <div class="theme-three"></div> </li> <li> <div class="theme-four"></div> </li> <li> <div class="theme-five"></div> </li> <li> <div class="theme-six"></div> </li> <li> <div class="theme-seven"></div> </li> <li> <div class="theme-eight"></div> </li> </ul> </div> </i></button>  <button id="progress" data-text="阅读进度">0%</button> </div> <div class="main-bottom"> Theme By <a href="https://github.com/friend-nicen/theme-document" title="Document" target="_blank" rel="nofollow">Document.</a> </span> <a href="https://beian.miit.gov.cn/" title="工信部ICP备案" target="_blank" rel="nofollow" style="color:"> 豫ICP备11007008号-3</a></div>  <link rel="stylesheet" type="text/css" href="//lzw.me/wp-content/cache/wpfc-minified/qjot80qb/h7g3.css" media="all"/> <script type="text/javascript" src="https://lzw.me/x/lib/utils/h5-common.min.js?v=1"></script> <script type="text/javascript" src="/x/lib/theme-document/td.diy.js?v=11"></script><script type="application/ld+json"> { "@context": { "@context": { "images": { "@id": "http://schema.org/image", "@type": "@id", "@container": "@list" }, "title": "http://schema.org/headline", "description": "http://schema.org/description", "pubDate": "http://schema.org/DateTime" } }, "@id": "https://lzw.me/a/html-iframe.html", "title": "html 标签 iframe 基础与应用实践 ", "images": ["https://lzw.me/wp-content/themes/theme-document/assets/images/default.png"], "description": "目录 1 HTML <iframe> 标签2 iframe 常用场景3 背景透明的 iframe4 与 iframe 通信4.1 iframe 同域名通信4.2 iframe 跨域通信4.2.1 设置 document.domain 方式4.2.2 postMessage 方式4.2.3 通过后端 API 中转5 iframe 高度自适应5.1 同域名下的 iframe 高度自 ", "pubDate": "2017-08-08 10:16:08 ", "upDate": "2025-07-07 14:50:54 " } </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/theme-document\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> </body> </html>