iframe如何用

发布时间：09/01 来源：未知浏览：关键词：

iframe是一个内联框架，可以在目前HTML页面中嵌入另一个文档，个别状况下运用iframe直接在页面嵌套iframe标签再指定src就可以了 iframe是一个内联框架，可以在目前HTML页面中嵌入另一个文档，个别状况下运用iframe直接在页面嵌套iframe标签再指定src就可以了

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 <p>你的阅读器不支撑iframe标签</p> 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

iframe 的常用属性：

name ：规定的名称。</p><p>width：规定 <iframe> 的宽度。</p><p>height ：规定 <iframe> 的高度。</p><p> src：规定在 <iframe> 中显示的文档的 URL。</p><p>frameborder ：规定可否显示 <iframe> 四周的边框。 (0为无边框，1位有边框)。</p><p>align：规定怎样依据四周的元从来对齐 <iframe>。　(left,right,top,middle,bottom)。</p><p> scrolling：规定可否在 <iframe> 中显示滚动条。 (yes,no,auto)</p><p>上面代码中 iframe的src属性为本人当地的一个html页面</p><p>代码如下：</p><pre class="brush:html;toolbar:false"><body> 这是一个外部文件里面的内容</body>《script》 var div = document.getElementById("div"); console.log(div);《script》</pre><p>有什么交互的局部也是写到这个页面中，iframe会主动传到引入的页面的。</p><p><strong>那怎样猎取iframe里面的内容呢？</strong></p><pre class="brush:html;toolbar:false">var iframe = document.getElementById("myrame"); //猎取iframe标签 var iwindow = iframe.contentWindow; //猎取iframe的window对象 var idoc = iwindow.document; //猎取iframe的document对象 console.log(idoc.documentElement); //猎取iframe的html console.log("body",idoc.body);</pre><p>但是，这里面是猎取不到里面的DOM的，可以在URL中猎取（也就是引入的html文件）</p><p><strong>iframe 的优缺陷</strong></p><p><strong>长处：</strong></p><p>重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载工夫）；</p><p>技术简略，运用利便，主要利用于不需要搜寻引擎来搜寻的页面；</p><p>利便开发，减少代码的反复率（比方页面的header，footer）；</p><p><strong>缺陷：</strong></p><p>会发生许多的页面，不易于治理；</p><p>不易打印；</p><p>多框架的页面会添加办事气得http要求；</p><p>阅读器的后退按钮无效等；</p><p>因为诸多的缺陷，不相符规范网页设计的理念，已经被扬弃，当前的HTML5不再支撑此标签。<p>以上就是iframe如何用的细致内容，更多请关注百分百源码网其它相干文章！</p> </div> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript" src="http://www.baidow.com/ds/js/jquery.min.js"></script> <title>打赏</title> <style type="text/css"> .content{width:100%;margin:0px auto;} .hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;} .shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;} .shang_box img{border:none;border-width:0;} .dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;} .dashang:hover{opacity:0.8;padding:15px;font-size:18px;} .shang_close{float:right;display:inline-block;} .shang_logo{display:block;text-align:center;margin:20px auto;} .shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('http://www.baidow.com/ds/img/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;} .shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;} .shang_payimg{width:140px;padding:10px;border:6px solid #EA5F00;margin:0 auto;border-radius:3px;height:140px;} .shang_payimg img{display:block;text-align:center;width:140px;height:140px; } .pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;} .radiobox{width: 16px;height: 16px;background: url('http://www.baidow.com/ds/img/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;} .checked .radiobox{background:url('http://www.baidow.com/ds/img/radio1.jpg');} .shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;} .shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;} .shang_info{clear:both;} .shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;} </style> </head> <body> <div class="content"> <p><a href="javascript:void(0)" onClick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a></p> <div class="hide_box"></div> <div class="shang_box"> <a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭"><img src="http://www.baidow.com/ds/img/close.jpg" alt="取消" /></a> <img class="shang_logo" src="http://www.baidow.com/ds/img/logos.png" alt="百分百源码网" /> <div class="shang_tit"> <p>感谢您的支持，我会继续努力的!</p> </div> <div class="shang_payimg"> <img src="http://www.baidow.com/ds/img/alipayimg.jpg" alt="扫码支持" title="扫一扫" /> </div> <div class="pay_explain">扫码打赏，你说多少就多少</div> <div class="shang_payselect"> <div class="pay_item checked" data-id="alipay"> <span class="radiobox"></span> <span class="pay_logo"><img src="http://www.baidow.com/ds/img/alipay.jpg" alt="支付宝" /></span> </div> <div class="pay_item" data-id="weipay"> <span class="radiobox"></span> <span class="pay_logo"><img src="http://www.baidow.com/ds/img/wechat.jpg" alt="微信" /></span> </div> </div> <div class="shang_info"> <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p> <p><a href="http://www.baidow.com" target="_blank" title="百分百源码网">百分百源码网</a> 建议打赏1～10元，土豪随意，感谢您的阅读！</p> </div> </div> </div> <script type="text/javascript"> $(function(){ $(".pay_item").click(function(){ $(this).addClass('checked').siblings('.pay_item').removeClass('checked'); var dataid=$(this).attr('data-id'); $(".shang_payimg img").attr("src","http://www.baidow.com/ds/img/"+dataid+"img.jpg"); $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信"); }); }); function dashangToggle(){ $(".hide_box").fadeToggle(); $(".shang_box").fadeToggle(); } </script> </div> <div class="context mt1 clearfix"> <ul> <li class="fl">上一篇：<a href='http://www.baidow.com/jiaocheng/wangyezhizuo/202009/48584.html'>网页制作h4有哪些意思</a> </li> <li class="fr">下一篇：<a href='http://www.baidow.com/jiaocheng/wangyezhizuo/202009/48600.html'>script有哪些意思</a> </li> </ul> </div> </div> <div class="relatenews"> <div class="tit"> <h3>相关文章<span></span></h3> </div> <ul class="list2 clearfix"> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202101/75712.html">如今网站建设以免冗杂扁平化设计已成趋势!</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202101/74790.html">404页面设计是什么技巧可言?</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202101/74782.html">公司网站页面是什么细节设计?</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202101/74778.html">网站设计怎样用配色诱惑会员?</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202101/74770.html">网站设计中前端视觉设计的重要性是什么?</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202012/74698.html">高端网站建设应当知足那些前提?</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202012/74693.html">相应式网站设计的流程是如何的?</a></li> <li><a target="_blank" href="http://www.baidow.com/jiaocheng/wangyezhizuo/202012/74690.html">哪些因素影响网页设计的结果?</a></li> </ul> </div> <div id="plq" class="mt2"> <div class="plqt"><span>共有<b>154</b>人阅读，期待你的评论！</span>发表评论</div> <form action="/" method="post" name="feedback"> <div class="plk"> <input type="hidden" name="dopost" value="send" /> <input type="hidden" name="comtype" value="comments"> <input type="hidden" name="aid" value="48594" /> <input type="hidden" name="fid" id='feedbackfid' value="0" /> <textarea name="msg" class="ipt-txt2"></textarea> </div> <div class="dcmp-post"> <div class="dcmp-userinfo" id="_ajax_feedback">昵称： <input name="username" type="text" size="10"/> 网址：<input name="userweb" type="text" /> 验证码： <input name="validate" type="text" id="validate" size="4" style="height:18px;width:65px;text-transform: uppercase;" /> <img src='/' style='cursor:pointer' id='validateimg' onclick="this.src=this.src+'?'" title='点击我更换图片' alt='点击我更换图片' /> <div class='dcmp-submit'> <button type='button' onClick='PostComment()'>发表</button> </div> </div> </div> </form> <a name='commettop'></a> <div class="feedbox clearfix"> <div class="plqt-2">最新评论</div> <div id='commetcontentNew'></div> <div id='commetcontent'></div> </div> </div> </div> <div class="sidec"> <div class="tags"> <div class="tit"> <h3>本文标签<span></span></h3> </div> <div class="cont"></div> </div> <a id="JRightMark" href=""></a> <div id="JRigthFlow"> <div class="ad mt2"> <div class="tit"> <h3>广告赞助</h3> </div> <div class="clearfix">能出一分力是一分吧！</div> </div> <div class="dingyue mt2"> <div class="tit"> <h3>订阅获得更多模板<span></span></h3> </div> <input name="t" value="qf_booked_feedback" type="hidden"> <input name="id" value="421cabea0768cc0f34489547656f8defea828c8668587c0b" type="hidden"> <input id="to" onfocus="if (this.value == '输入QQ邮箱获得更多模板') {this.value = '';}" onblur="if (this.value == '') {this.value = '输入QQ邮箱获得更多模板';}" value="输入QQ邮箱获得更多模板" name="to" class="feed-mail-input" type="text"> <input class="feed-mail-btn" value="订阅" type="submit"> </div> </div> <div class="sidec"> <div class="tags"> <div class="tit"> <h3>本文标签<span></span></h3> </div> <div class="cont"></div> </div> <a id="JRightMark" href=""></a> <div id="JRigthFlow"> <div class="ad mt2"> <div class="tit"> <h3>广告赞助</h3> </div> <div class="clearfix"> </div> </div> <div class="dingyue mt2"> <div class="tit"> <h3>订阅获得更多模板<span></span></h3> </div> <form class="feed-mail" action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post"> <input name="t" value="qf_booked_feedback" type="hidden"> <input name="id" value="#" type="hidden"> <input id="to" onfocus="if (this.value == '输入QQ邮箱获得更多模板') {this.value = '';}" onblur="if (this.value == '') {this.value = '输入QQ邮箱获得更多模板';}" value="输入QQ邮箱获得更多模板" name="to" class="feed-mail-input" type="text"> <input class="feed-mail-btn" value="订阅" type="submit"> </form> </div> </div> </div></div> </div>  <div class="footer_o"> <div class="footer"> <div class="footer_i"> <p><a href="/help/about.html">关于我们</a>-<a href="/help/mianze.html">免责声明</a>-<a href="#">业务报价</a>-<a href="#">广告服务</a>-意见反馈-<a href="#">常见问题</a>-<a href="/sitemap_wz1.html">网站地图</a></p> <p>百分百源码网声明：本站所有模板文章除标明原创外，均来自网络转载，版权归作者所有，如果有侵犯权益，请联系本站删除！</p> <p>Copyright © 2021 完整无错带数据网站源码模板下载平台! WWW.BAIDOW.COM. </p> </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); })(); </script> </div> </div> </body> </html>