jsp布局中关于标签的使用</h1> <div class="metas-body"> <span class="views-num"><i class="fa fa-eye"></i> 68 阅读</span> <span class="comment-num"><i class="fa fa-comments"></i> 0 评论</span> <span class="like-num"><i class="fa fa-thumbs-o-up"></i><span class="js-like-num"> 45 点赞</span></span> </div> </div> <div class="article-text"> <div class="article-desc">我是<a href="https://www.kaopuke.com" title="靠谱客">靠谱客</a>的博主 <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html" title="典雅眼神">典雅眼神</a>，最近开发中收集的这篇文章主要介绍<a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html">jsp布局中关于<iframe>标签的使用</a>，觉得挺不错的，现在分享给大家，希望可以做个参考。</div> <div>  </div> <div class="article-outline"> <h3>概述</h3> </div>  <p><p><span style="font-family:"microsoft yahei"; font-size:14px">iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。注意：在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。</span></p> <p><span style="font-family:microsoft yahei"><span style="font-size:14px"></span></span></p> <p><span style="font-family:"microsoft yahei"; font-size:14px"></span></p> <pre><code class="language-html"><div id="iframepage"> <iframe src="/test/common.html" align="middle" id="iframepage" width="100%" height="435" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ></iframe> </div></code></pre> <br/> 1.获取iframe的自适应大小，即：不适用height和width属性，而是用οnlοad="SetWinHeight(this);IFrameReSizeWidth(this)"方法 <p></p> <p><span style="font-family:"microsoft yahei"; font-size:14px"></span></p> <pre><code class="language-html"><script type="text/javascript"> function SetWinHeight(obj) { var win=obj; if (document.getElementById("iframepage")) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) { win.height = win.contentDocument.body.offsetHeight + 25; } else if(win.Document && win.Document.body.scrollHeight) { win.height = win.Document.body.scrollHeight + 25; } } } } function IFrameReSizeWidth(obj) { var win=obj; if (document.getElementById("iframepage")) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetWidth) { win.width = win.contentDocument.body.offsetWidth; } else if(win.Document && win.Document.body.scrollWidth) { win.width = win.Document.body.scrollWidth; } } } } </script></code></pre> <br/> 2.在iframe页面中用js操作父窗口的内容 <p></p> <p><span style="font-family:"microsoft yahei"; font-size:14px">window.<span style="color:rgb(255,0,0)">parent</span>.document.getElementById('mulufirst').innerHTML=$(this).text();<br/> </span></p> <p><span style="font-family:"microsoft yahei"; font-size:14px"><br/> </span></p> <p><span style="font-family:"microsoft yahei"; font-size:14px">3.iframe中的链接在父窗口中不出现”画中画“，即如何操作它的类似于target的属性：在location前加上window.top/parent/blank.....等，如果是单纯的<a>标签，直接设置target属性即可；</span></p> <p><span style="font-family:"microsoft yahei"; font-size:14px"><a class="search_btn" id="searchAnswer">搜索答案</a></span></p> <p><span style="font-family:"microsoft yahei"; font-size:14px"></span></p> <pre><code class="language-javascript"><script> $(function() { var searchKey = $("#searchAsk"); $("#searchAnswer") .click( function() { if (searchKey.val() == "" || searchKey.val() == "请输入你的问题？") { window.top.location.href = "http://baidu.com"; } else { var asktitle = escape(searchKey.val()); window.top.location.href = "http://hao123.com?key=121"; } }); </script></code></pre> <br/> <p>如果需要设成_blank属性的话，不能直接用<span style="font-size:13.3333px">window.blank.location.href</span></p> <p></p> <pre><code class="language-html">window.top.location.href = "http://baidu.com"; window.open("http://baidu.com","_blank");</code></pre> <br/> <br/> <p></p> <br/></p>  <h3>最后</h3> <p>以上就是<a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html" title="典雅眼神">典雅眼神</a>为你收集整理的<a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html">jsp布局中关于<iframe>标签的使用</a>的全部内容，希望文章能够帮你解决<a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html">jsp布局中关于<iframe>标签的使用</a>所遇到的程序开发问题。</p> <p>如果觉得靠谱客网站的内容还不错，欢迎将<a href="https://www.kaopuke.com" title="靠谱客网站">靠谱客网站</a>推荐给程序员好友。</p> <div class="alert alert-info" style="margin-top:20px;">本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。</div> </div>    <div class="article-donate"> <a href="javascript:" class="btn btn-primary btn-like btn-lg" data-action="vote" data-type="like" data-id="469622" data-tag="article"><i class="fa fa-thumbs-up"></i> 点赞(<span>45</span>)</a>  </div>           <div class="entry-meta"> <ul>  <li>本文分类：<a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_13_uzo_22_fz_132326_3.html">web前端</a></li> <li>浏览次数：<span>68</span> 次浏览</li> <li>发布日期：2023-12-25 11:50:23</li> <li>本文链接：<a href="https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html">https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html</a></li>  </ul> </div> <div class="related-article"> <div class="row">  <div class="panel-heading"> <h3 class="panel-title">相关文章</h3> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_22_4.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg3.png" alt="如何在jsp页面的java语句中使用获取jstl标签的数据" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_22_4.html">如何在jsp页面的java语句中使用获取jstl标签的数据</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_22_5.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg4.png" alt="taglib报The content of element type "taglib" must match "(tlib-version,jsp-version.....错误" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_22_5.html">taglib报The content of element type "taglib" must match "(tlib-version,jsp-version.....错误</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_w.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg5.png" alt="el标签" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_w.html">el标签</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_x.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg6.png" alt="EL标签基础EL标签" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_x.html">EL标签基础EL标签</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg7.png" alt="jsp布局中关于<iframe>标签的使用" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html">jsp布局中关于<iframe>标签的使用</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_z.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg8.png" alt="jsp中div 标签到底有什么用?" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_z.html">jsp中div 标签到底有什么用?</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_0.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg9.png" alt="div 标签实现的Jsp中的登录界面" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_0.html">div 标签实现的Jsp中的登录界面</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_1.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg10.png" alt="div标签布局的使用" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_1.html">div标签布局的使用</a></h5> </div>  </div> </div> <div class="clearfix"></div> </div> </div> <div class="panel panel-default" id="comments"> <div class="panel-heading"> <h3 class="panel-title">评论列表<small>共有 <span>0</span> 条评论</small></h3> </div> <div class="panel-body"> <div id="comment-container">  <div id="postcomment"> <h3>发表评论 <a href="javascript:;"> <small>取消回复</small> </a></h3> <form action="/comment/post.html" method="post" id="postform"> <input type="hidden" name="token" value="9ff530611aae50dbddca7cd6f431cf8e" /> <input type="hidden" name="type" value="archives"/> <input type="hidden" name="artid" value="469622"/> <input type="hidden" name="pid" id="pid" value="0"/> <div class="form-group"> <textarea name="content" class="form-control" disabled placeholder="请登录后再发表评论" id="commentcontent" cols="6" rows="5" tabindex="4"></textarea> </div> <div class="form-group"> <a href="/index/user/login.html" class="btn btn-primary">登录</a> <a href="/index/user/register.html" class="btn btn-outline-primary">注册新账号</a> </div> </form> </div>  </div> </div> </div> </main> <aside class="col-xs-12 col-md-4">   <div class="panel panel-default about-author no-padding" data-id="35932" itemProp="author" itemscope="" itemType="http://schema.org/Person"> <meta itemProp="name" content="典雅眼神"/> <meta itemProp="image" content="/assets/img/avatar.png"/> <meta itemProp="url" content="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html"/> <div class="panel-body no-padding"> <div class="author-card"> <div class="author-head" style="background-image:url('/assets/img/author-head.jpeg');"></div> <div class="author-avatar"> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html"> <img src="/assets/img/avatar.png"> </a> </div> <div class="author-basic"> <div class="author-nickname"> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html">典雅眼神</a> </div> <span class="text-muted"></span> </div> <div class="row author-statistics"> <div class="col-xs-4"> <div class="statistics-text">文章</div> <div class="statistics-nums"><a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html">4</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">资源</div> <div class="statistics-nums"><a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_.html?type=soft">0</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">加入时间</div> <div class="statistics-nums">2年前</div> </div> </div> </div> </div> </div>   <div class="panel panel-blockimg"> </div>  <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">热门文章</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_uzo_26_fx_14236_3.html" title="linux之dup和dup2函数解析1、文件描述符在内核中数据结构2、dup/dup2函数3、CGI中dup24、如何在CGI程序的fork子进程中还原STDOUT_FILENO5、实例">linux之dup和dup2函数解析1、文件描述符在内核中数据结构2、dup/dup2函数3、CGI中dup24、如何在CGI程序的fork子进程中还原STDOUT_FILENO5、实例</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_uzo_10_f5_14726_2.html" title="excel中怎么合并表格">excel中怎么合并表格</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_13_u_23_o_2_f5_13_j_18_y.html" title="jsp布局中关于<iframe>标签的使用">jsp布局中关于<iframe>标签的使用</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_13_u_7_o_22_f4_14__23_gw.html" title="【Opencv】于仕琪人脸68个特征点分布情况">【Opencv】于仕琪人脸68个特征点分布情况</a> </div> </div> </div> </div>   <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">推荐资讯</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_u_7_ogf1_14_j_18__27_.html" title="李想公布四季度目标：预计交付量将达到16-17万辆">李想公布四季度目标：预计交付量将达到16-17万辆</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_u_7_ogfz_13_zk_27_.html" title="下载次数破39万，CMU、Meta联合发布VQAScore文生图优化方案：Imagen3已采用背景介绍VQAScore:一种简单有效的评估指标VQAScore实验结果GenAI-Bench:由设计师收集的高难度文生图基准GenAI-Rank:用VQAScore来提升文生图表现">下载次数破39万，CMU、Meta联合发布VQAScore文生图优化方案：Imagen3已采用背景介绍VQAScore:一种简单有效的评估指标VQAScore实验结果GenAI-Bench:由设计师收集的高难度文生图基准GenAI-Rank:用VQAScore来提升文生图表现</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_u_7_ogf2_14236__27_.html" title="暖气费别忘交国家气候中心：今年冬天较易出现强降温、强降雪">暖气费别忘交国家气候中心：今年冬天较易出现强降温、强降雪</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_u_7_ogf1_13_j_14__27_.html" title="苹果喊话iPhone 13和14钉子户换机宋紫薇：苹果营销真接地气苹果向 iPhone 13 和 14 用户发出升级呼吁">苹果喊话iPhone 13和14钉子户换机宋紫薇：苹果营销真接地气苹果向 iPhone 13 和 14 用户发出升级呼吁</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_ujo_26_fx_13_zk_27_.html" title="小鹏汽车发布“公司史上最强财报”：第三季度总营收 101 亿元同比增长 18.4%，净亏损 18.1 亿元">小鹏汽车发布“公司史上最强财报”：第三季度总营收 101 亿元同比增长 18.4%，净亏损 18.1 亿元</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_u_7_ogf4_13__23_k_27_.html" title="iPhone 16系列首销4周销量不及15系列：果粉换机动力不足">iPhone 16系列首销4周销量不及15系列：果粉换机动力不足</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_u_7_ogf4_13726__27_.html" title="开始执行！无有效认证证书电动自行车不能上牌、上路：限速25公里每小时等">开始执行！无有效认证证书电动自行车不能上牌、上路：限速25公里每小时等</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_ujo_26_fy_13722__27_.html" title="360 数科：香港上市发行价 50.03 港元 / 股，获 2.46 倍认购">360 数科：香港上市发行价 50.03 港元 / 股，获 2.46 倍认购</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_ujo_26_fy_13__23_k_27_.html" title="原 360 借条运营方奇富科技 Q3 净利润 17.99 亿元，同比增加 58.11%">原 360 借条运营方奇富科技 Q3 净利润 17.99 亿元，同比增加 58.11%</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_ujo_26_fy_13726__27_.html" title="360 数科更名奇富科技，全面拥抱金融科技新战略">360 数科更名奇富科技，全面拥抱金融科技新战略</a> </div> </div> </div> </div>  <div class="panel panel-blockimg"> <a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=2qwpuaqd" rel="nofollow" title="推荐企业服务器" target="_blank"> <img src="/uploads/store/aliyun-sidebar.png" class="img-responsive" alt=""> </a> </div>  <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_14_u_7_o_2_f0_141027__27_.html" class="tag"> <span>Windows 10</span></a> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_14_u_7_ocf5_14_jgz.html" class="tag"> <span>JavaScript</span></a> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_13_u_7_o_10_f4_12718_4.html" class="tag"> <span>转载记录</span></a> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_13_u_7_okf2_14_z_6_x.html" class="tag"> <span>html</span></a> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_13_uzo_22_fz_132326_3.html" class="tag"> <span>web前端</span></a> <a href="/u/k-p-k_14_uzo_6_f5_14_z_18__27_/category/k-p-k_13_uzo_2_fw_142314_2.html" class="tag"> <span>图像处理和deeplearning</span></a> </div> </div> </div>   <div class="panel panel-default recommend-article"> <div class="panel-heading"> <h3 class="panel-title">推荐下载</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fy_13_w_27__27_.html" title="VMware Workstation Pro 17.5.2 纯天然绿色完整版下载">VMware Workstation Pro 17.5.2 纯天然绿色完整版下载</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_14_w_27__27_.html" title="PhpStudy8.1小皮面板">PhpStudy8.1小皮面板</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_141027__27_.html" title="视频音频编辑软件 Adobe Premiere Pro 2020 绿色便携免费版">视频音频编辑软件 Adobe Premiere Pro 2020 绿色便携免费版</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fy_14_w_27__27_.html" title="火焰纹章无双|官方中文|本体+1.5.0升补+5DLC | [NSP]">火焰纹章无双|官方中文|本体+1.5.0升补+5DLC | [NSP]</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_142627__27_.html" title="Photoshop CS6 中文汉化精简版">Photoshop CS6 中文汉化精简版</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fy_131027__27_.html" title="Adobe Fireworks CS6绿色精简版下载">Adobe Fireworks CS6绿色精简版下载</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fy_121027__27_.html" title="Photoshop CS6 Extend 绿色增强版">Photoshop CS6 Extend 绿色增强版</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fy_132627__27_.html" title="Adobe FireWorks cs5【FW cs5 】中文绿色版下载">Adobe FireWorks cs5【FW cs5 】中文绿色版下载</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fy_122627__27_.html" title="Photoshop CS6中文精简版">Photoshop CS6中文精简版</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_121027__27_.html" title="古龙风云录|中字-国语|Build.14142398-重要更新-狂雷陨落-剑破苍穹+DLC+修改器|解压即玩">古龙风云录|中字-国语|Build.14142398-重要更新-狂雷陨落-剑破苍穹+DLC+修改器|解压即玩</a> </div> </div> </div> </div>  <div class="panel panel-blockimg"> <a href="/" target="_blank"><img src="/uploads/store/enterprisehost.png" class="img-responsive"/></a> </div> <div class="panel panel-blockimg">  </div> </aside> </div> </div> </main> <footer>  <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="pull-left"> <p>网站内容，均来自于用户原创和互联网，若有侵犯到您的权益请联系我们，核实删除。</p> <p>本站为非营利性网站，靠谱客的资源均来自网络收集整理,个人纯属学习交流之用,如有侵犯您的版权请与我联系（wx:kaopuke）,我们会马上改正并在下载24小时内删除！</p> <p>Copyright © 2023 All Rights Reserved. <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">黔ICP备17011320号-2</a> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=52272602002071" rel="noreferrer" target="_blank">贵公网安备52272602002071</a></p> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e749fb7b04b857116f3a8b682641b74d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  </footer> <div id="floatbtn">  <a class="hover" href="/index/user/addarticle.html" target="_blank"> <i class="fa fa-paint-brush fa-lg"></i> <em>立即<br>投稿</em> </a> <div class="floatbtn-item floatbtn-share"> <i class="fa fa-share-alt fa-lg"></i> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a id="back-to-top" class="hover" href="javascript:;"> <i class="fa fa-reply fa-lg"></i> <em>返回<br>顶部</em> </a>  </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/jquery.autocomplete.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/swiper.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/share.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/cms.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/common.js?v=1.0.2"></script> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6850766", container: "_upguagn2t8", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u6850838", container: "_12s5gcmjcvx", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script>  <script src="/static/tool/clipboard.min.js"></script> <script> //代码高亮溢出显示滚动条 $('.main-content pre').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); $(this).removeAttr("style",""); // $(this).wrap('<pre><code></code></pre>'); }); $('.main-content .codebody').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); // $(this).wrap('<pre><code></code></pre>'); }); function unescapeSpecialChars(str) { return str .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&') .replace(/ /g, ' ') .replace(/"/g, '"') .replace(/'/g, '\''); } //复制代码 $('.copyCode').on('click',function(){ var txt = $(this).next().html(); txt = unescapeSpecialChars(txt); new ClipboardJS('.copyCode', {text: function() {return txt;}}); layer.msg('复制成功',{time:1000,offset:'100px'}); }); </script> <script> document.addEventListener("DOMContentLoaded", function() { const preElements = document.querySelectorAll("pre"); // 获取所有 <pre> 元素 preElements.forEach(pre => { const codeText = pre.innerHTML.trim(); // 获取代码块的内容 const lines = codeText.split("\n").length; // 计算代码行数 // 创建行号容器 const lineNumbers = document.createElement("div"); lineNumbers.className = 'line-numbers'; // 生成行号内容 let lineNumbersHtml = ''; for (let i = 1; i <= lines; i++) { lineNumbersHtml += i + '<br>'; } // 插入行号容器到 pre 元素中 lineNumbers.innerHTML = lineNumbersHtml; pre.appendChild(lineNumbers); // 保持代码块的格式化 pre.innerHTML = `<div class="line-numbers">${lineNumbersHtml}</div>` + `<div style="padding-left:40px;">${codeText}</div>`; }); }); </script> <style> .copyCode{ position:absolute; right:1px; z-index:999; background:rgba(255,255,255,0.5); border-bottom:1px solid #ddd; padding:2px 8px; font-size:11px !important; border-radius:4px; line-height:24px; cursor:pointer; } .copyCode:hover{ background:#fff; } pre code{ font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; } .hljs { border-radius:4px; padding: 8px !important; } .hljs-ln td { padding: 2px 8px; } .hljs-ln-numbers { text-align: center; color: #abb2bf; background-color: #282c34; border-right: 1px solid #c5c5c5; vertical-align: top; } /* for block of code / td .hljs-ln-code { padding-left: 5px; } pre { position: relative; padding-left: 5px; / 为行号留出空间 / background-color: #f8f9fa; border: 1px solid #e1e1e1; border-radius: 4px; font-size: 14px; line-height: 1.5; overflow-x: auto; } / 设置行号样式 */ pre .line-numbers { position: absolute; left: 0; top: 0; padding: 10px 10px; background-color: #f1f1f1; border-right: 1px solid #e1e1e1; text-align: right; user-select: none; color: #888; } </style> </body> </html>