我如何裁剪HTML中的IFrame？

WBOY 转载: 2023-08-29 16:33:16 235浏览

我如何裁剪HTML中的IFrame？

内联框架在 HTML 中称为 iframe。 </b> 标签指定内容中的一个矩形区域，浏览器可以在其中显示带有滚动条和边框的不同文档。要在当前 HTML 文档中嵌入另一个文档，请使用内联框架。</p> <p>可以使用 HTML iframe 名称属性指定 <b><Iframe></b> 元素的引用。在 JavaScript 中，对元素的引用也是使用 name 属性进行的。 iframe 本质上用于在当前显示的网页中显示网页。包含 iframe 的文档的 URL 使用“src”属性指定。</p> <h2>语法</h2> <p>以下是 HTML <iframe> 的语法</p> <pre class='brush:html;toolbar:false;'><iframe src="URL" title="description"></iframe> </pre> <p>为了更好地了解如何裁剪 HTML iframe，让我们看看以下示例。</p> <h2>示例</h2> <p>在下面，我们使用 div，使 iframe 被裁剪，并且使 iframe 的滚动不显示其输出。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <body> <div style="position: absolute; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;"> <div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"> </div> <iframe src="https://www.tutorialspoint.com/index.htm" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; "> </iframe> </div> </body> </html></pre> <p>当脚本执行时，它将生成一个由 iframe 组成的输出，该 iframe 被裁剪并嵌入到网页上，没有可滚动选项。</p> <h2>示例</h2> <p>考虑以下示例，我们在 iframe 中使用 div 类和 CSS 来裁剪并显示其输出。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <body> <style> iframe { position: fixed; top: -40px; left: 0; bottom: 0; right: 0; width: 65%; height: 70%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 999999; } </style> <div class="iframe"> <iframe src="https://www.tutorialspoint.com/index.htm"></iframe> </div> </body> </html></pre> <p>运行上述脚本时，将弹出输出窗口，显示被裁剪并滚动显示在网页上的 iframe。</p> <h2>示例</h2> <p>执行下面的代码并观察我们如何通过运行脚本并将可滚动设置为 no 来裁剪 iframe。</p> <pre class='brush:javascript;toolbar:false;'><!DOCTYPE html> <html> <body> <style> body { margin: 0; padding: 0; height: 100vh; } h1 { font-family: Impact, sans-serif; color: #8E44AD; } iframe { width: 1024px; height: calc(100vh - 300px); overflow: hidden; margin: 0 auto; border: none; } </style> <h1 id="tutorial">TutorialsPoint</h1> <p>The Best E-Way Learning</p> <iframe id="booking-content" title="booking-content" src="https://www.tutorialspoint.com/index.htm" scrolling="no" allowfullscreen="allowfullscreen"> </iframe> <script> let tutorial = 0; let element = document.getElementById('tutorial'); while (element.nodeName !== 'IFRAME') { tutorial += element.offsetHeight; element = element.nextElementSibling; } tutorial = window.innerHeight - tutorial - 100; document.querySelector('iframe').style.height = tutorial + 'px'; </script> </body> </html> </pre> <h2>输出</h2> <p>当脚本运行时，它将生成一个输出，其中包括文本以及已裁剪的 iframe，将可滚动减少为“无”。</p><p>以上就是我如何裁剪HTML中的IFrame？的详细内容，更多请关注php中文网其它相关文章！</p> </div> <div class="nphpQianMsg"><a href="//m.sbmmt.com/m/search?word=html">html</a> <a href="//m.sbmmt.com/m/search?word=iframe">iframe</a> <a href="//m.sbmmt.com/m/search?word=裁剪">裁剪</a><a href="//m.sbmmt.com/m/course/list/29/type/2.html">PHP课程</a><a href="//m.sbmmt.com/m/course/list/11.html">HTML视频教程</a><a href="//m.sbmmt.com/m/course/list/12.html">CSS视频</a><a href="//m.sbmmt.com/m/course/list/17.html">JS视频教程</a><a href="//m.sbmmt.com/m/course/list/18.html">Vue视频教程</a><div class="clear"></div></div> <div class="nphpQianSheng"><span>声明：</span>本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除</div>  </div> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/16e561434ad42f17963b25d80a9fabeb.html" ></script> <div class="nphpSytBox"> <span>上一条：<a class="dBlack" href="//m.sbmmt.com/m/faq/599594.html">如何在HTML5中显示文本的Ruby注释？</a></span> <span>下一条：<a class="dBlack" href="//m.sbmmt.com/m/faq/599622.html">如何使用JavaScript RegExp执行多行匹配？</a></span> </div> <div class="wwads-cn wwads-horizontal" data-id="164" style="max-width:100%"></div> <div class="nphpSytBox1"> <div class="nphpShou"> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7295e38849324c4a3f458e359856409d.html" ></script> <div class="clear"></div> </div> <ul class="nphpBian"> <li> <a href="//m.sbmmt.com/m/blog/detail/1046940.html"><span class="bg1"></span><dl><dt>编程学习群</dt><dd>技术答疑交流</dd></dl><div class="clear"></div></a> </li> <li> <a href="javascript:window.location.href = 'https://mp.weixin.qq.com/s?__biz=Mzk0MTE2MDU0Ng==&mid=2247487529&idx=1&sn=f4f9feda0951312daebe69478f219e7a&chksm=c2d7f124f5a0783233d879a6de3c59165dc2520e15813860b5bace817a6e08e530d454abd3c6#rd';"><span class="bg2"></span><dl><dt>关注公众号</dt><dd>获取学习资源</dd></dl><div class="clear"></div></a> </li> <div class="clear"></div> </ul> </div> <div class="nphpSytBox2"> <div class="nphpZbktTitle"> <h2>相关文章</h2> <em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>查看更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="nphpXgwzList">   <li><b></b><a href="//m.sbmmt.com/m/faq/337335.html" class="aBlack">怎样实现前端裁剪上传图片功能</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/384590.html" class="aBlack">HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/404554.html" class="aBlack">如何实现微信小程序图片选择区域裁剪</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/410402.html" class="aBlack">HTML怎么设置字体颜色？html字体颜色设置的三种方法</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/429865.html" class="aBlack">ps怎么裁剪不规则图片</a><div class="clear"></div></li> </ul> </div> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/cf85c41f1b0ce5f8359e5229784c31e4.html" ></script> <div class="nphpSytBox2"> <div class="nphpTjkcTitle"> <ul class="nphpTjkcMenu menu1"> <li class="current">热门课程</li> <div class="clear"></div> </ul> <div class="clear"></div> </div> <div class="nphpRmkcBox" style="padding-top:0px;"> <ul class="nphpRmkcList"> <li> <a href="//m.sbmmt.com/m/course/1540.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/068/643cef38f10ac763.png" alt="前端基础到实战（HTML5+CSS3+ES6+NPM）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/068/643cef38f10ac763.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1540.html" title="前端基础到实战（HTML5+CSS3+ES6+NPM）" class="aBlack">前端基础到实战（HTML5+CSS3+ES6+NPM）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢26633个</p> </span> <b><a href="//m.sbmmt.com/m/course/1540.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1541.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/068/643cf0cf4bc5d138.png" alt="PHP基础到实战（PHP+MySQL）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/068/643cf0cf4bc5d138.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1541.html" title="PHP基础到实战（PHP+MySQL）" class="aBlack">PHP基础到实战（PHP+MySQL）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢14098个</p> </span> <b><a href="//m.sbmmt.com/m/course/1541.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1563.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/6491138c05f26215.png" alt="前端开发（基础+实战项目合集）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/6491138c05f26215.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1563.html" title="前端开发（基础+实战项目合集）" class="aBlack">前端开发（基础+实战项目合集）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢7085个</p> </span> <b><a href="//m.sbmmt.com/m/course/1563.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1564.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/6491146f5949d175.png" alt="PHP编程（基础知识点汇总）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/6491146f5949d175.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1564.html" title="PHP编程（基础知识点汇总）" class="aBlack">PHP编程（基础知识点汇总）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢8595个</p> </span> <b><a href="//m.sbmmt.com/m/course/1564.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1565.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/649bcbb41f728422.png" alt="前后端分离的商城系统（Vue3+Laravel8+Uniapp）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/649bcbb41f728422.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1565.html" title="前后端分离的商城系统（Vue3+Laravel8+Uniapp）" class="aBlack">前后端分离的商城系统（Vue3+Laravel8+Uniapp）</a></dt> <dd> <span> <em> <h2>￥1200</h2> <i>￥2400</i> <div class="clear"></div> </em> <p>已抢17537个</p> </span> <b><a href="//m.sbmmt.com/m/course/1565.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1567.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/6497b00716a93137.png" alt="PHP MySQL基础编程课" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/6497b00716a93137.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1567.html" title="PHP MySQL基础编程课" class="aBlack">PHP MySQL基础编程课</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢7030个</p> </span> <b><a href="//m.sbmmt.com/m/course/1567.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> </ul> </div> <div class="nphpShou2"> <a href="//m.sbmmt.com/m/app/" class="aRed"><b></b><em>打开APP，随时随地在线学习！</em><span></span></a> <div class="clear"></div> </div> </div> </div>   <div class="nphpFoot" id="nphpFoot" style="display:none;"> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7c9c0cc71ad595f7716f2f0c50381e48.html" ></script> </div>   <div class="nphpYouBox" style="display: none;"> <div class="nphpYouBg"> <div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div> <ul class="nphpYouList"> <li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/blog.html"><b class="icon5"></b><span>博客</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>资源</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/search"><b class="icon9"></b><span>搜索</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/app/"><b class="icon10"></b><span>APP下载</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/mk.html"><b class="icon11"></b><span>PHP培训</span><em>新</em><div class="clear"></div></a></li> <div class="clear"></div> </ul> </div> </div>   <div class="nphpDing" style="display: none;"> <div class="nphpDinglogo"><a href="//m.sbmmt.com/m/faq/#"></a></div> <div class="nphpNavIn1"> <div class="swiper-container nphpNavSwiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="//m.sbmmt.com/m/" >首页</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >课程</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/map.html">路径</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">文章</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/mk.html" title="PHP培训">PHP培训</a><b></b></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/coding.html">精品课</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >下载</a></div> <div class="clear"></div> </div> </div> <script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto' }); </script> </div> </div>  </div> <script> (function () { var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';} var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://m.sbmmt.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>isLogin = 0;</script> <script type="text/javascript" src="//m.sbmmt.com/m/static/layui/layui.js"></script> <script type="text/javascript" src="//m.sbmmt.com/m/static/js/global.js?4.9.47"></script> <script> var returnCitySN = ''; </script> <script type="text/javascript" charset="UTF-8" src="//m.sbmmt.com/ip/city.php?sign=7ce9cb2a310c315b5fe0080855e4f09c"></script> <script> var cname = returnCitySN.cname; var cname = cname.split("|"); function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } //读cookies function getCookiea(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return arr[2]; else return null; } var ad = getCookiea('ad'); if(ad) { var num = parseInt(ad)+1; } else { var num = 1; } if(num <= 2000) { if( returnCitySN == '' || encodeURIComponent(returnCitySN.cname).indexOf('%E5%8C%97%E4%BA%AC') != -1 ) { $('#nphpFoot').remove(); $('#adTop').remove(); } else { $('#nphpFoot').show(); $('#adTop').show(); $(document).ready(function(){ $('.nphpQianCont').before('<div class="nphpShou"><a href="https://work.weixin.qq.com/kfid/kfc8cc2d6defcf3c202" targe="_blank" style="width:100%;" rel="nofollow" class="aRed"><b class="icon2"></b><em style=" font-style:normal">【'+cname[2]+'】PHP编程学习，咨询领取优惠！</em><span></span></a></div>') }) } setCookie('ad',num,1) } </script> </div> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='//m.sbmmt.com/m/static/css/viewer.min.css' type='text/css' media='all'/> <script type='text/javascript' src='//m.sbmmt.com/m/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='//m.sbmmt.com/m/static/js/jquery-viewer.min.js'></script> <script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); $(function() { $(".nphpFen em").click(function(){ if($(this).hasClass("icon1")){ $(this).removeClass("icon1").addClass("icon2").html("<b></b>已收藏") }else{ $(this).removeClass("icon2").addClass("icon1").html("<b></b>收藏") } }) $(".nphpFen i").click(function(){ if($(this).hasClass("icon1")){ $(this).removeClass("icon1").addClass("icon2").html("<b></b>已点赞") }else{ $(this).removeClass("icon2").addClass("icon1").html("<b></b>点赞") } }) }) </script> </body> </html>