What are usability, accessibility, screen-reader or any other development, functionality, cross browser issue with iframe?

前端未结

关注

 3  1128

What are the usability, accessibility, screen-reader, or any other development, functionality, or cross browser issues with </code>? </p> <p>Is there an <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="relativetags"> 相关标签: </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>3条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-43.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000043.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-43.html" class="fly-link"> <cite>小蘑菇 </cite> </a> </div> <div class="detail-hits"> <span>2021-01-12 14:11</span> </div> </div> <div class="detail-body jieda-body photos"> <p>If you have a single Iframe, there would be little issue. However, multiple iframes compound the problem. A point of focus is not clearly available and the screen readers are not intelligent enough to find visual correlation (same reason why tables are bad for design). ARIA is an attempt being made to resolve some similar issues. YUI plugin link has more information.</p> <p>However iframes do find their place in design. In one project I worked before, the page contained two iframes (one of them hidden) and the hidden frame was used to download an authentication applet. This doesn't add any accessibility woes as the point of attention is limited to a single iframe which seemlessly merges with the page</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='1685064'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="1685064"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_1685064"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1685064">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />  加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-103.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000103.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-103.html" class="fly-link"> <cite>死守一世寂寞 </cite> </a> </div> <div class="detail-hits"> <span>2021-01-12 14:13</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Accessibility:</p> <ul> <li>It's harder to scroll you iframe , your mouse must be int the range of the iframe. It difficult with people with movement desabilities</li> <li>Browsers for blind people may not include the content from you iframe and those people will not reach to it.</li> </ul> <p>Usability:</p> <ul> <li>It's not cool when you have several scroll bars on the main window and on the iframe. It's difficult for scrolling</li> </ul> <p>Other issues:</p> <ul> <li>Mobile browsers probably won't render you iframe. Even if it render it, it will look bad and ugly.</li> <li>Search engines will have hard time indexing your pages in the iframe. Probably they will skip it or won't take indexed properly</li> <li>Loading an iframe will take longer time than a page with the same content and no frame</li> </ul> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='1685062'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="1685062"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_1685062"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1685062">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />  加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-130.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000130.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-130.html" class="fly-link"> <cite>再見小時候 </cite> </a> </div> <div class="detail-hits"> <span>2021-01-12 14:13</span> </div> </div> <div class="detail-body jieda-body photos"> <blockquote> <p>Why W3C not included Iframe in XHTML Strict</p> </blockquote> <p>Because at the time it was seen as a bastard child of the widely-reviled <code><frame></code> tag. In principle <code><iframe></code> has many of the same properties as <code><frame></code>, but in practice it seems to have encouraged more tasteful use, generally avoiding the worst of the navigational and usability problems that frameset interfaces suffered.</p> <blockquote> <p>While HTML 5 is supports Iframe ?</p> </blockquote> <p>(a). Because, unlike the <code><frame></code>, <code><iframe></code> has since turned out to be essential for mixed documents such as those including adverts, and many types of web application. There are still problems, as mentioned in other answers, but generally the <code><iframe></code> is seen as a necessary feature that is here to stay. This isn't true of <code><frame></code>, which is a “non-conforming feature” in HTML5 (the nearest HTML5 gets to any kind of ‘strict’).</p> <p>(b). because the authors of HTML5 don't so much care about encouraging good practice anyway; it's about documenting what user-agents must do. They have thrown every obsolete feature of HTML4 into the standard, along with a lot of other traditional but dodgy browser behaviour including every last quirk of broken tag soup parsing. [aside: I am greatly amused to see the latest argument being discussed on their list being how the <code><isindex></code> element should be handled — an element that literally nobody has used since HTML 2.0's form elements made it obsolete in 1995.]</p> <p>Given the staggering size and complexity of HTML5, it's not really surprising that they didn't want the extra effort of declaring a more limited ‘strict mode’ profile. As work comes to an end, though, I would love to see an XHTML5 Strict or similar effort to trim back some of this mess. As it stands, Hixie and chums have taken a snapshot of every nasty hack a browser has to put in for compatibility today, and made it a standard requirement for all browsers in the foreseeable future, effectively condoning the bad practice.</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='1685063'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="1685063"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_1685063"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1685063">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />  加载中... </li> </ul> </div> </li> <style> .laypage-main a, .laypage-main span { display: inline-block; } </style> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="710120" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="What are usability, accessibility, screen-reader or any other development, functionality, cross browser issue with iframe?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="710120" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4">  <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt>