无涯教程-HTML - ＜iframe＞属性

'# 无涯教程-HTML - ＜iframe＞属性

一、背景与问题

在现代Web开发中，标签作为跨页面内容嵌入的核心工具，其功能远超简单的"嵌入页面"。它涉及跨域通信、安全策略、资源加载优化等多个技术领域。本文将深入探讨<iframe>属性的底层原理、实际应用场景、安全风险及性能优化策略。</p><p>特别注意：本文不涉及HTML5的<code><iframe></code>新增属性（如<code>loading</code>、<code>referrerpolicy</code>等），而是聚焦于传统属性（如<code>src</code>、<code>sandbox</code>、<code>allow</code>）的深度解析。</p><h2>二、基本原理</h2><h3>1. 跨域通信机制</h3><p>当使用<iframe>嵌入第三方内容时，浏览器会启动<strong>同源策略</strong>（Same-Origin Policy）的防护机制。该策略要求：</p><ul><li><code>src</code>属性指向的URL必须与当前页面的协议、域名、端口完全一致</li><li>否则会触发<strong>跨域限制</strong>（CORS），导致无法访问iframe内部的DOM元素</li></ul><h3>2. 沙箱模式（Sandbox）</h3><p><code>sandbox</code>属性通过限制iframe的运行权限，实现安全隔离。其支持的属性值包括：</p><pre><code class="lang-html"><iframe sandbox="allow-scripts allow-same-origin" ...></code></pre><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>allow-scripts</td><td>允许执行脚本</td></tr><tr><td>allow-same-origin</td><td>允许同源访问</td></tr><tr><td>allow-forms</td><td>允许表单提交</td></tr><tr><td>allow-orientation-lock</td><td>允许旋转锁</td></tr><tr><td>allow-pointer-lock</td><td>允许指针锁定</td></tr></tbody></table><h3>3. 允许属性（Allow）</h3><p><code>allow</code>属性用于控制iframe的权限，其语法为：</p><pre><code class="lang-html"><iframe allow="camera; microphone; ..."></code></pre><h3>4. 资源加载机制</h3><p>浏览器在加载iframe时会执行以下步骤：</p><ol><li>解析<code>src</code>属性的URL</li><li>检查同源策略</li><li>根据<code>sandbox</code>和<code>allow</code>属性决定权限</li><li>加载内容并执行</li></ol><h2>三、环境准备</h2><h3>1. 开发环境</h3><ul><li>浏览器：Chrome 120+ / Firefox 110+</li><li>开发工具：VS Code / WebStorm</li><li>浏览器调试：开发者工具（F12）</li></ul><h3>2. 测试页面</h3><p>创建两个HTML文件：</p><pre><code class="lang-html"> <iframe src="child.html" sandbox="allow-scripts" allow="microphone" style="width:100%;height:300px;"></iframe>  <input type="text" id="test" placeholder="输入内容"> <script> document.getElementById('test').addEventListener('input', function(e) { alert('输入内容：' + e.target.value); }); </script></code></pre><h2>四、核心实现</h2><h3>1. 基础用法示例</h3><pre><code class="lang-html"><iframe src="https://example.com" sandbox="allow-scripts" allow="microphone" style="width:100%;height:300px;" title="示例iframe"> </iframe></code></pre><p><strong>关键代码解释</strong>：</p><ul><li><code>sandbox="allow-scripts"</code>：允许执行脚本</li><li><code>allow="microphone"</code>：允许访问麦克风</li><li><code>title</code>属性：提高可访问性</li></ul><h3>2. 跨域通信示例</h3><pre><code class="lang-html"><iframe src="https://third-party.com" sandbox="allow-scripts allow-same-origin" allow="camera" style="width:100%;height:300px;" title="跨域iframe"> </iframe></code></pre><p><strong>注意事项</strong>：</p><ul><li>需要第三方服务器配置CORS头</li><li><code>allow-same-origin</code>允许访问同源资源</li><li><code>allow-scripts</code>允许执行脚本</li></ul><h3>3. 安全隔离示例</h3><pre><code class="lang-html"><iframe src="https://malicious-site.com" sandbox="allow-scripts" allow="none" style="width:100%;height:300px;" title="安全隔离"> </iframe></code></pre><p><strong>关键代码解释</strong>：</p><ul><li><code>allow="none"</code>：禁用所有权限</li><li>该配置下iframe无法执行任何脚本或访问外部资源</li><li>适用于需要完全隔离的场景</li></ul><h2>五、完整案例</h2><h3>场景：第三方登录系统集成</h3><pre><code class="lang-html"> <iframe id="loginIframe" src="https://auth.example.com/login" sandbox="allow-scripts allow-forms" allow="camera; microphone" style="width:100%;height:500px;" title="登录授权"> </iframe> <script> // 等待iframe加载完成 window.addEventListener('load', function() { const iframe = document.getElementById('loginIframe'); iframe.onload = function() { // 监听iframe中的消息 window.addEventListener('message', function(event) { if (event.origin !== 'https://auth.example.com') return; if (event.data.type === 'auth_success') { alert('授权成功！'); // 调用父窗口的函数 parent.processAuth(event.data.token); } }); }; }); </script></code></pre><p><strong>关键点</strong>：</p><ul><li>使用<code>postMessage</code>进行跨域通信</li><li>验证<code>event.origin</code>确保消息来源</li><li>通过<code>allow-forms</code>允许表单提交</li></ul><h2>六、源码解析</h2><h3>1. iframe加载流程</h3><pre><code class="lang-javascript">// 简化版iframe加载逻辑 function loadIframe(src, sandboxAttrs, allowAttrs) { const iframe = document.createElement('iframe'); iframe.src = src; iframe.sandbox = sandboxAttrs; iframe.allow = allowAttrs; // 监听加载完成事件 iframe.onload = function() { console.log('iframe加载完成:', iframe.src); }; // 监听错误事件 iframe.onerror = function() { console.error('iframe加载失败:', iframe.src); }; document.body.appendChild(iframe); }</code></pre><h3>2. 跨域通信实现</h3><pre><code class="lang-javascript">// 父窗口 window.addEventListener('message', function(event) { if (event.origin !== 'https://third-party.com') return; console.log('收到子窗口消息:', event.data); }); // 子窗口 window.parent.postMessage({ type: 'hello', data: 'world' }, 'https://parent-site.com');</code></pre><h2>七、进阶使用</h2><h3>1. 动态加载内容</h3><pre><code class="lang-html"><iframe id="dynamicIframe" src="" sandbox="allow-scripts" style="width:100%;height:300px;" > </iframe> <script> const iframe = document.getElementById('dynamicIframe'); iframe.src = 'https://dynamic-content.com?token=' + encodeURIComponent(generateToken()); </script></code></pre><h3>2. 响应式布局</h3><pre><code class="lang-css">iframe { width: 100%; aspect-ratio: 16 / 9; border: none; }</code></pre><h3>3. 预加载策略</h3><pre><code class="lang-html"><iframe src="https://preloaded.com" sandbox="allow-scripts" style="display:none;" title="预加载"> </iframe></code></pre><h2>八、性能与工程实践</h2><h3>1. 性能优化策略</h3><table><thead><tr><th>优化措施</th><th>说明</th></tr></thead><tbody><tr><td>懒加载</td><td>使用<code>loading="lazy"</code>属性延迟加载</td></tr><tr><td>预加载</td><td>提前加载关键资源</td></tr><tr><td>资源压缩</td><td>压缩第三方内容</td></tr><tr><td>内存管理</td><td>避免创建大量iframe</td></tr></tbody></table><h3>2. 安全实践</h3><ul><li>使用<code>allow</code>属性精确控制权限</li><li>验证所有传入的URL</li><li>避免使用<code>allow-same-origin</code>除非必要</li><li>使用<code>referrerpolicy="no-referrer"</code>保护隐私</li></ul><h3>3. 异常处理</h3><pre><code class="lang-javascript">iframe.onerror = function() { console.error('加载失败:', iframe.src); iframe.src = ''; // 清除内容 };</code></pre><h2>九、常见问题与踩坑</h2><h3>1. 跨域限制问题</h3><p><strong>错误示例</strong>：</p><pre><code class="lang-html"><iframe src="https://third-party.com" sandbox="allow-scripts"></iframe></code></pre><p><strong>问题分析</strong>：无法访问第三方资源</p><p><strong>解决方案</strong>：</p><ul><li>配置CORS头：<code>Access-Control-Allow-Origin: *</code></li><li>使用<code>allow-same-origin</code>允许同源访问</li><li>使用代理服务器中转</li></ul><h3>2. 安全属性配置错误</h3><p><strong>错误示例</strong>：</p><pre><code class="lang-html"><iframe sandbox="allow-scripts" allow="none"></iframe></code></pre><p><strong>问题分析</strong>：<code>allow-scripts</code>和<code>allow="none"</code>冲突</p><p><strong>解决方案</strong>：使用<code>allow</code>属性替代<code>sandbox</code>属性</p><h3>3. 隐藏内容泄露</h3><p><strong>错误示例</strong>：</p><pre><code class="lang-html"><iframe style="display:none;"></iframe></code></pre><p><strong>问题分析</strong>：仍然会加载资源，造成性能浪费</p><p><strong>解决方案</strong>：使用<code>loading="lazy"</code>属性</p><h2>十、最佳实践</h2><h3>1. 安全配置建议</h3><ul><li>只允许必要的权限</li><li>使用<code>allow</code>属性替代<code>sandbox</code>属性</li><li>验证所有输入的URL</li><li>避免使用<code>allow-same-origin</code>除非绝对必要</li></ul><h3>2. 性能优化建议</h3><ul><li>使用<code>loading="lazy"</code>延迟加载</li><li>使用<code>referrerpolicy="no-referrer"</code>保护隐私</li><li>对第三方内容进行缓存</li><li>使用Web Workers处理复杂逻辑</li></ul><h3>3. 代码规范建议</h3><ul><li>给iframe添加<code>title</code>属性</li><li>使用有意义的ID命名</li><li>避免使用<code>allow</code>属性的通配符</li><li>使用<code>allow</code>属性精确控制权限</li></ul><h2>十一、总结</h2><iframe>标签作为Web开发中重要的内容嵌入工具，其属性配置直接影响到安全性和性能。通过合理配置`sandbox`和`allow`属性，可以实现安全隔离和功能控制。在实际开发中，应根据具体需求选择合适的配置方案，避免不必要的安全风险。对于需要高度控制的场景，建议采用Web组件或API调用等替代方案。通过本文的深入解析，相信读者能够更好地理解和应用<iframe>技术。 </section> <footer class="post-footer clearfix"> <div class="pull-left tag-list"> <i class="glyphicon glyphicon-folder-open"></i> none </div> <div class="pull-right tag-list post-permalink" > 最后修改于：2026年09月15日 04:29 </div> </footer> </article> <div > <ul style="height: 30px; position: relative; left: -22px; margin: 0px 5px 30px; list-style-type: none;"> <li style="float: left;"><a class="btn btn-default" href="https://blog.huangque888.com/archives/279.html" title="ThinkPHP容易学吗">上一篇</a></li> <li style="float: right;"><a class="btn btn-default" href="https://blog.huangque888.com/archives/282.html" title="（首页部分）基于HTML+CSS+JavaScript的网页项目大作业首页部分（含前后端，Jquery，Bootstrap，Animate.css，Node等）">下一篇</a></li> </ul> </div> <div class="about-author clearfix"><div id="comments"> <h3>评论已关闭</h3> </div> </div> <div class="about-author clearfix"> <div id="comments"> <div class="widget"> <h4 class="title">推荐阅读</h4> <div class="content recent-post"> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60902.html" title=" AIGC实战——Transformer模型" class="post-title"> AIGC实战——Transformer模型</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> , <a href="https://blog.huangque888.com/tag/machine-learning/">机器学习</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60879.html" title=" Socket TCP 和 UDP 编程基础（Python）" class="post-title"> Socket TCP 和 UDP 编程基础（Python）</a> <div class="date">2024年11月30日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/tcp/">tcp</a> , <a href="https://blog.huangque888.com/tag/udp/">udp</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60915.html" title=" 如何使用 ChatGPT 进行学术润色？你需要这些指令" class="post-title"> 如何使用 ChatGPT 进行学术润色？你需要这些指令</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/ai/">AI</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60785.html" title=" 最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别（详细教程）" class="post-title"> 最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别（详细教程）</a> <div class="date">2024年11月24日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60892.html" title=" ChatGPT 和 DALL·E 2 配合生成故事绘本" class="post-title"> ChatGPT 和 DALL·E 2 配合生成故事绘本</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60791.html" title=" omegaconf，一个超强的 Python 库！" class="post-title"> omegaconf，一个超强的 Python 库！</a> <div class="date">2024年11月24日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60907.html" title=" 【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测" class="post-title"> 【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60867.html" title=" ［超级详细］如何在深度学习训练模型过程中使用 GPU 加速" class="post-title"> ［超级详细］如何在深度学习训练模型过程中使用 GPU 加速</a> <div class="date">2024年11月29日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> , <a href="https://blog.huangque888.com/tag/machine-learning/">机器学习</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60862.html" title=" Python 物理引擎pymunk最完整教程" class="post-title"> Python 物理引擎pymunk最完整教程</a> <div class="date">2024年11月27日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60863.html" title=" MediaPipe 人体姿态与手指关键点检测教程" class="post-title"> MediaPipe 人体姿态与手指关键点检测教程</a> <div class="date">2024年11月27日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60832.html" title=" 深入了解 Taipy：Python 打造 Web 应用的全面教程" class="post-title"> 深入了解 Taipy：Python 打造 Web 应用的全面教程</a> <div class="date">2024年11月26日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60802.html" title=" 基于Transformer的时间序列预测模型" class="post-title"> 基于Transformer的时间序列预测模型</a> <div class="date">2024年11月25日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/matplotlib/">Matplotlib</a> , <a href="https://blog.huangque888.com/tag/machine-learning/">机器学习</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60808.html" title=" Python在金融大数据分析中的AI应用（股价分析、量化交易）实战" class="post-title"> Python在金融大数据分析中的AI应用（股价分析、量化交易）实战</a> <div class="date">2024年11月25日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/matplotlib/">Matplotlib</a> , <a href="https://blog.huangque888.com/tag/machine-learning/">机器学习</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60897.html" title=" AIGC Gradio系列学习教程之Components" class="post-title"> AIGC Gradio系列学习教程之Components</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60885.html" title=" Python3 `asyncio` — 异步 I/O，事件循环和并发工具" class="post-title"> Python3 `asyncio` — 异步 I/O，事件循环和并发工具</a> <div class="date">2024年11月30日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60906.html" title=" llama-factory SFT系列教程：大模型在自定义数据集 LoRA 训练与部署" class="post-title"> llama-factory SFT系列教程：大模型在自定义数据集 LoRA 训练与部署</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> , <a href="https://blog.huangque888.com/tag/machine-learning/">机器学习</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60782.html" title=" Python 多线程和多进程用法" class="post-title"> Python 多线程和多进程用法</a> <div class="date">2024年11月24日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60843.html" title=" Python socket详解，全网最全教程" class="post-title"> Python socket详解，全网最全教程</a> <div class="date">2024年11月27日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/http/">http</a> , <a href="https://blog.huangque888.com/tag/websocket/">websocket</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60830.html" title=" python之plot()和subplot()画图" class="post-title"> python之plot()和subplot()画图</a> <div class="date">2024年11月26日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/matplotlib/">Matplotlib</a> </div></div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/60894.html" title=" 理解 DALL·E 2、Stable Diffusion 和 Midjourney 工作原理" class="post-title"> 理解 DALL·E 2、Stable Diffusion 和 Midjourney 工作原理</a> <div class="date">2024年12月01日<div class="tag-list"> <i class="glyphicon glyphicon-tags"></i> <a href="https://blog.huangque888.com/tag/python/">python</a> , <a href="https://blog.huangque888.com/tag/ai/">AI</a> , <a href="https://blog.huangque888.com/tag/machine-learning/">机器学习</a> </div></div> </div> </div> </div> </div> </div> </main> <aside class="col-md-3 sidebar">    <div class="widget"> <h4 class="title">关于</h4> <div class="card"> <div class="card-info"> <img class="card-info-img" src="https://blog.huangque888.com/avatar_150.jpg"> <div class="card-info-name">Wu - YG</div> <div class="card-info-description">用欣赏的眼光看世界</div> </div>  <div class="card-icon"><a href="https://blog.huangque888.com/feed " title="rss" class="icon-rss"></a><a href="mailto:369199417@qq.com " title="email" class="icon-email"></a><a href="https://www.huangque888.com/img/weixin.jpg" title="wechat" class="icon-wechat"></a></div>  <div class="card-data"> <div class="card-data-item"> <div class="headline">文章</div> <div class="length-num">58980</div> </div> <div class="card-data-item"> <div class="headline">分类</div> <div class="length-num">31</div> </div> <div class="card-data-item"> <div class="headline">评论</div> <div class="length-num">0</div> </div> <div class="card-data-item"> <div class="headline">页面</div> <div class="length-num">58982</div> </div> </div> <div class="card-text"> <span>已在风雨中度过 6年297天3小时29分</span> </div> </div> </div>   <div class="widget"> <h4 class="title">分类</h4> <div class="category"> <ul class="menu-list"> <li> <a href="https://blog.huangque888.com/category/default/" title="所有"> <span class="menu-title">所有</span> <span class="menu-count label">58958</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/web/" title="前端技术"> <span class="menu-title">前端技术</span> <span class="menu-count label">0</span> </a> </li> <ul> <li> <a href="https://blog.huangque888.com/category/vue/" title="vue.js"> <span class="menu-title">vue.js</span> <span class="menu-count label">2603</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/js/" title="javascript"> <span class="menu-title">javascript</span> <span class="menu-count label">1934</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/ajax/" title="ajax"> <span class="menu-title">ajax</span> <span class="menu-count label">1758</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/css/" title="css"> <span class="menu-title">css</span> <span class="menu-count label">1577</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/css3/" title="css3"> <span class="menu-title">css3</span> <span class="menu-count label">1524</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/html/" title="html"> <span class="menu-title">html</span> <span class="menu-count label">1207</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/nodejs/" title="nodejs"> <span class="menu-title">nodejs</span> <span class="menu-count label">972</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/typescript/" title="typescript"> <span class="menu-title">typescript</span> <span class="menu-count label">1942</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/elementui/" title="elementui"> <span class="menu-title">elementui</span> <span class="menu-count label">2521</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/jquery/" title="jquery"> <span class="menu-title">jquery</span> <span class="menu-count label">1721</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/h5/" title="html5"> <span class="menu-title">html5</span> <span class="menu-count label">1096</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/npm/" title="npm"> <span class="menu-title">npm</span> <span class="menu-count label">449</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/miniprog/" title="小程序"> <span class="menu-title">小程序</span> <span class="menu-count label">345</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/flutter/" title="flutter"> <span class="menu-title">flutter</span> <span class="menu-count label">1887</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/rn/" title="react native"> <span class="menu-title">react native</span> <span class="menu-count label">2123</span> </a> </li> </ul> <li> <a href="https://blog.huangque888.com/category/server/" title="后端技术"> <span class="menu-title">后端技术</span> <span class="menu-count label">0</span> </a> </li> <ul> <li> <a href="https://blog.huangque888.com/category/php/" title="php"> <span class="menu-title">php</span> <span class="menu-count label">1551</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/go/" title="golang"> <span class="menu-title">golang</span> <span class="menu-count label">2046</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/mysql/" title="mysql"> <span class="menu-title">mysql</span> <span class="menu-count label">2203</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/distributed/" title="分布式"> <span class="menu-title">分布式</span> <span class="menu-count label">951</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/python/" title="python"> <span class="menu-title">python</span> <span class="menu-count label">2518</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/crawler/" title="爬虫"> <span class="menu-title">爬虫</span> <span class="menu-count label">1135</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/middleware/" title="中间件"> <span class="menu-title">中间件</span> <span class="menu-count label">1310</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/linux/" title="linux"> <span class="menu-title">linux</span> <span class="menu-count label">2045</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/es/" title="elasticsearch"> <span class="menu-title">elasticsearch</span> <span class="menu-count label">1977</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/java/" title="java"> <span class="menu-title">java</span> <span class="menu-count label">9385</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/redis/" title="redis"> <span class="menu-title">redis</span> <span class="menu-count label">1935</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/db/" title="数据库"> <span class="menu-title">数据库</span> <span class="menu-count label">7986</span> </a> </li> <li> <a href="https://blog.huangque888.com/category/aigc/" title="AIGC"> <span class="menu-title">AIGC</span> <span class="menu-count label">546</span> </a> </li> </ul> </div> </div>   <div class="widget"> <h4 class="title">标签云</h4> <div class="content tag-cloud"> <a rel="tag" href="https://blog.huangque888.com/tag/es/" title="elasticsearch">elasticsearch(7531)</a> <a rel="tag" href="https://blog.huangque888.com/tag/spring/" title="spring">spring(7034)</a> <a rel="tag" href="https://blog.huangque888.com/tag/sql/" title="sql">sql(6674)</a> <a rel="tag" href="https://blog.huangque888.com/tag/VUE/" title="VUE">VUE(5722)</a> <a rel="tag" href="https://blog.huangque888.com/tag/JS/" title="Javascript">Javascript(5591)</a> <a rel="tag" href="https://blog.huangque888.com/tag/go/" title="golang">golang(4252)</a> <a rel="tag" href="https://blog.huangque888.com/tag/java/" title="java">java(4235)</a> <a rel="tag" href="https://blog.huangque888.com/tag/python/" title="python">python(3860)</a> <a rel="tag" href="https://blog.huangque888.com/tag/mysql/" title="Mysql">Mysql(3414)</a> <a rel="tag" href="https://blog.huangque888.com/tag/css/" title="css">css(3081)</a> <a rel="tag" href="https://blog.huangque888.com/tag/linux/" title="linux">linux(2830)</a> <a rel="tag" href="https://blog.huangque888.com/tag/element/" title="elementui">elementui(2637)</a> <a rel="tag" href="https://blog.huangque888.com/tag/react/" title="react.js">react.js(2397)</a> <a rel="tag" href="https://blog.huangque888.com/tag/redis/" title="redis">redis(2145)</a> <a rel="tag" href="https://blog.huangque888.com/tag/jquery/" title="jquery">jquery(1810)</a> <a rel="tag" href="https://blog.huangque888.com/tag/node-js/" title="node.js">node.js(1770)</a> <a rel="tag" href="https://blog.huangque888.com/tag/ajax/" title="ajax">ajax(1502)</a> <a rel="tag" href="https://blog.huangque888.com/tag/php/" title="PHP">PHP(1371)</a> <a rel="tag" href="https://blog.huangque888.com/tag/ai/" title="AI">AI(1330)</a> <a rel="tag" href="https://blog.huangque888.com/tag/distributed/" title="分布式">分布式(1236)</a> <a rel="tag" href="https://blog.huangque888.com/tag/mid-ware/" title="中间件">中间件(1092)</a> <a rel="tag" href="https://blog.huangque888.com/tag/h5/" title="html5">html5(1082)</a> <a rel="tag" href="https://blog.huangque888.com/tag/django/" title="django">django(1059)</a> <a rel="tag" href="https://blog.huangque888.com/tag/typescript/" title="typescript">typescript(933)</a> <a rel="tag" href="https://blog.huangque888.com/tag/gin/" title="gin">gin(853)</a> <a rel="tag" href="https://blog.huangque888.com/tag/npm/" title="npm">npm(707)</a> <a rel="tag" href="https://blog.huangque888.com/tag/microservices/" title="微服务">微服务(666)</a> <a rel="tag" href="https://blog.huangque888.com/tag/css3/" title="css3">css3(564)</a> <a rel="tag" href="https://blog.huangque888.com/tag/http/" title="http">http(535)</a> <a rel="tag" href="https://blog.huangque888.com/tag/ubuntu/" title="ubuntu">ubuntu(518)</a> <a rel="tag" href="https://blog.huangque888.com/tag/json/" title="json">json(516)</a> <a rel="tag" href="https://blog.huangque888.com/tag/ios/" title="ios">ios(482)</a> <a rel="tag" href="https://blog.huangque888.com/tag/miniprogram/" title="小程序">小程序(470)</a> <a rel="tag" href="https://blog.huangque888.com/tag/net/" title=".net">.net(469)</a> <a rel="tag" href="https://blog.huangque888.com/tag/architecture/" title="架构">架构(448)</a> <a rel="tag" href="https://blog.huangque888.com/tag/centos/" title="centos">centos(435)</a> <a rel="tag" href="https://blog.huangque888.com/tag/nginx/" title="nginx">nginx(405)</a> <a rel="tag" href="https://blog.huangque888.com/tag/mq/" title="mq">mq(369)</a> <a rel="tag" href="https://blog.huangque888.com/tag/uniapp/" title="uniapp">uniapp(332)</a> <a rel="tag" href="https://blog.huangque888.com/tag/algorithm/" title="算法">算法(312)</a> <a rel="tag" href="https://blog.huangque888.com/tag/list/" title="链表">链表(296)</a> <a rel="tag" href="https://blog.huangque888.com/tag/mvc/" title="mvc">mvc(227)</a> <a rel="tag" href="https://blog.huangque888.com/tag/websocket/" title="websocket">websocket(213)</a> <a rel="tag" href="https://blog.huangque888.com/tag/vscode/" title="vscode">vscode(198)</a> <a rel="tag" href="https://blog.huangque888.com/tag/machine-learning/" title="机器学习">机器学习(184)</a> <a rel="tag" href="https://blog.huangque888.com/tag/ppl/" title="分词">分词(163)</a> <a rel="tag" href="https://blog.huangque888.com/tag/echarts/" title="echarts">echarts(152)</a> <a rel="tag" href="https://blog.huangque888.com/tag/data-struct/" title="数据结构">数据结构(144)</a> <a rel="tag" href="https://blog.huangque888.com/tag/k8s/" title="kubernetes">kubernetes(131)</a> <a rel="tag" href="https://blog.huangque888.com/tag/dp/" title="动态规划">动态规划(124)</a> <a rel="tag" href="https://blog.huangque888.com/tag/spark/" title="spark">spark(118)</a> <a rel="tag" href="https://blog.huangque888.com/tag/bootstrap/" title="bootstrap">bootstrap(117)</a> <a rel="tag" href="https://blog.huangque888.com/tag/pip/" title="pip">pip(107)</a> <a rel="tag" href="https://blog.huangque888.com/tag/webpack/" title="webpack">webpack(106)</a> <a rel="tag" href="https://blog.huangque888.com/tag/ssl/" title="ssl">ssl(103)</a> <a rel="tag" href="https://blog.huangque888.com/tag/sentinel/" title="sentinel">sentinel(97)</a> <a rel="tag" href="https://blog.huangque888.com/tag/asp/" title="asp">asp(94)</a> <a rel="tag" href="https://blog.huangque888.com/tag/electron/" title="electron">electron(87)</a> <a rel="tag" href="https://blog.huangque888.com/tag/rpc/" title="rpc">rpc(84)</a> <a rel="tag" href="https://blog.huangque888.com/tag/pycharm/" title="pycharm">pycharm(80)</a> <a rel="tag" href="https://blog.huangque888.com/tag/layui/" title="layui">layui(69)</a> <a rel="tag" href="https://blog.huangque888.com/tag/hash/" title="哈希算法">哈希算法(60)</a> <a rel="tag" href="https://blog.huangque888.com/tag/sort/" title="排序算法">排序算法(59)</a> <a rel="tag" href="https://blog.huangque888.com/tag/less/" title="less">less(58)</a> <a rel="tag" href="https://blog.huangque888.com/tag/tcp/" title="tcp">tcp(51)</a> <a rel="tag" href="https://blog.huangque888.com/tag/hive/" title="hive">hive(45)</a> <a rel="tag" href="https://blog.huangque888.com/tag/clickhouse/" title="clickhouse">clickhouse(43)</a> <a rel="tag" href="https://blog.huangque888.com/tag/chrome/" title="chrome">chrome(42)</a> <a rel="tag" href="https://blog.huangque888.com/tag/angular/" title="angular.js">angular.js(42)</a> <a rel="tag" href="https://blog.huangque888.com/tag/web-framework/" title="前端框架">前端框架(42)</a> <a rel="tag" href="https://blog.huangque888.com/tag/restful/" title="restful">restful(41)</a> <a rel="tag" href="https://blog.huangque888.com/tag/macos/" title="macos">macos(41)</a> <a rel="tag" href="https://blog.huangque888.com/tag/rust/" title="rust">rust(40)</a> <a rel="tag" href="https://blog.huangque888.com/tag/es6/" title="es6">es6(34)</a> <a rel="tag" href="https://blog.huangque888.com/tag/node/" title="node.js">node.js(28)</a> <a rel="tag" href="https://blog.huangque888.com/tag/leetcode/" title="leetcode">leetcode(28)</a> <a rel="tag" href="https://blog.huangque888.com/tag/innodb/" title="innodb">innodb(24)</a> <a rel="tag" href="https://blog.huangque888.com/tag/easyui/" title="easyui">easyui(23)</a> <a rel="tag" href="https://blog.huangque888.com/tag/phpstorm/" title="phpstorm">phpstorm(23)</a> <a rel="tag" href="https://blog.huangque888.com/tag/full-text/" title="全文检索">全文检索(20)</a> </div> </div>   <div class="widget"> <h4 class="title">最新文章</h4> <div class="content recent-post"> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61345.html" title="Cursor PHP + Laravel 最实用的Skills" class="post-title"> Cursor PHP + Laravel 最实用的Skills</a> <div class="date">2026年08月31日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61344.html" title="Cursor + PHP + Yii2 Backend Skill 完整的 Cursor Agent 配置" class="post-title"> Cursor + PHP + Yii2 Backend Skill 完整的 Cursor Agent 配置</a> <div class="date">2026年08月31日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61343.html" title="机器学习进阶：支持向量机SVM" class="post-title"> 机器学习进阶：支持向量机SVM</a> <div class="date">2026年04月10日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61342.html" title="OpenClaw + Ollama + Elasticsearch 本地知识库 Agent 实战" class="post-title"> OpenClaw + Ollama + Elasticsearch 本地知识库 Agent 实战</a> <div class="date">2026年04月10日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61341.html" title="OpenClaw 本地部署详细教程（Linux / Mac / Windows 通用）" class="post-title"> OpenClaw 本地部署详细教程（Linux / Mac / Windows 通用）</a> <div class="date">2026年04月10日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61339.html" title="分布式与一致性协议之Quorum NWR算法" class="post-title"> 分布式与一致性协议之Quorum NWR算法</a> <div class="date">2026年04月10日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61338.html" title="Vue实战：el-table单独列样式定制——cell-style函数深度解析与实战" class="post-title"> Vue实战：el-table单独列样式定制——cell-style函数深度解析与实战</a> <div class="date">2025年10月18日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61337.html" title="无人机编队协同：分布式控制算法深度剖析与实战" class="post-title"> 无人机编队协同：分布式控制算法深度剖析与实战</a> <div class="date">2025年10月09日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61336.html" title="Redis+Lua实战：分布式滑动窗口限流算法全解析" class="post-title"> Redis+Lua实战：分布式滑动窗口限流算法全解析</a> <div class="date">2025年09月06日</div> </div> <div class="recent-single-post"> <a href="https://blog.huangque888.com/archives/61335.html" title="PCA降维在特征工程中的实践案例" class="post-title"> PCA降维在特征工程中的实践案例</a> <div class="date">2025年09月06日</div> </div> </div> </div>       <div class="widget"> <h4 class="title">公众号</h4> <div class="content recent-post"> <div class="recent-single-post" align="center"> <img src="https://blog.huangque888.com/qr.png" alt="微信扫码关注公众号" /> </div> </div> </div>   <div class="widget"> <h4 class="title">友情链接</h4> <div class="content recent-post">  <div class="recent-single-post"><a rel="noopener" href="https://app.huangque888.com/" title="鸟鸟配音-免费在线配音工具 " target="_blank" class="post-title"><img src="https://app.huangque888.com/favicon.ico" alt="鸟鸟配音" height="32"><span style="margin-left: 10px;">鸟鸟配音</span></a></div><div class="recent-single-post"><a rel="noopener" href="https://www.huangque888.com/" title="微群网-微信小程序小程序app发布推广平台 " target="_blank" class="post-title"><img src="https://www.huangque888.com/img/favious.ico" alt="微群网" height="32"><span style="margin-left: 10px;">微群网</span></a></div><div class="recent-single-post"><a rel="noopener" href="https://tools.huangque888.com/" title="在线工具 - DevTools " target="_blank" class="post-title"><img src="https://tools.huangque888.com/favicon.ico" alt="DevTools" height="32"><span style="margin-left: 10px;">DevTools</span></a></div><div class="recent-single-post"><a rel="noopener" href="https://tao.huangque888.com/" title="优惠淘-先领券再淘宝" target="_blank" class="post-title"><img src="https://tao.huangque888.com/favicon.ico" alt="优惠淘" height="32"><span style="margin-left: 10px;">优惠淘</span></a></div>  </div> </div>    </aside> </div class="row"> </div class="container"> </section> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-sm-12"> <span> Copyright © 2026 <a href="https://blog.huangque888.com/" target="_blank">Tech Blog</a></span><br /> <span>All Right Reserved | <a rel="nofollow noopener noreferrer" href="https://beian.miit.gov.cn/" target="_blank">京ICP备19053165号</a></span></span><br /> </div> </div> </div> </div> <a id="back-to-top"><i class="glyphicon glyphicon-menu-up"></i></a>          <script src="https://blog.huangque888.com/usr/themes/Waxy/js/jquery.min.js"></script> <script src="https://blog.huangque888.com/usr/themes/Waxy/js/bootstrap.min.js"></script> <script src="https://blog.huangque888.com/usr/themes/Waxy/js/jquery.fancybox.min.js"></script> <script src="https://blog.huangque888.com/usr/themes/Waxy/js/jquery.lazyload.min.js"></script>  <script src="https://blog.huangque888.com/usr/themes/Waxy/js/waxy-main.js"></script>  <script type="text/javascript"> (function(){ var pres = document.querySelectorAll('pre'); var lineNumberClassName = 'line-numbers'; pres.forEach(function (item, index) { item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName; }); })(); </script> <script type="text/javascript" src="https://blog.huangque888.com/usr/themes/Waxy/lib/prism/clipboard.min.js"></script> <script type="text/javascript" src="https://blog.huangque888.com/usr/themes/Waxy/lib/prism/prism.js"></script>     <script type="text/javascript"> $("#loading").fadeOut(500); </script>    </body> </html>