What’s the best way to reload / refresh an iframe?

前端未结

关注

 21  2782

I would like to reload an </code> using JavaScript. The best way I found until now was set the iframe’s <code>src</code> attribute to itself, but this is <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>21条回答</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-58.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000058.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-58.html" class="fly-link"> <cite>庸人自扰 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-22 10:50</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Use reload for IE and set src for other browsers. (reload does not work on FF) tested on IE 7,8,9 and Firefox</p> <pre><code>if(navigator.appName == "Microsoft Internet Explorer"){ window.document.getElementById('iframeId').contentWindow.location.reload(true); }else { window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src; } </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='104240'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="104240"> <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_104240"> <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="104240">提交评论 </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-39.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000039.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-39.html" class="fly-link"> <cite>佛祖请我去吃肉 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-22 10:50</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Another solution.</p> <pre><code>const frame = document.getElementById("my-iframe"); frame.parentNode.replaceChild(frame.cloneNode(), frame); </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='104244'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="104244"> <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_104244"> <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="104244">提交评论 </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-114.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000114.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-114.html" class="fly-link"> <cite>难免孤独 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-22 10:52</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Using <code>self.location.reload()</code> will reload the iframe.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe> <br><br> <input type='button' value="Reload" onclick="self.location.reload();" /></code></pre> </div> </div> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='104247'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="104247"> <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_104247"> <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="104247">提交评论 </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-106.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000106.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-106.html" class="fly-link"> <cite>一个人的身影 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-22 10:54</span> </div> </div> <div class="detail-body jieda-body photos"> <p>For debugging purposes one could open the console, change the execution context to the frame that he wants refreshed, and do <code>document.location.reload()</code></p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='104248'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="104248"> <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_104248"> <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="104248">提交评论 </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-113.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000113.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-113.html" class="fly-link"> <cite>情歌与酒 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-22 10:56</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Add empty space also reload the iFrame automatically. </p> <pre><code>document.getElementById('id').src += ''; </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='104231'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="104231"> <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_104231"> <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="104231">提交评论 </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-56.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000056.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-56.html" class="fly-link"> <cite>遇见更好的自我 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-22 10:57</span> </div> </div> <div class="detail-body jieda-body photos"> <p>If all of the above doesn't work for you:</p> <pre><code>window.location.reload(); </code></pre> <p>This for some reason refreshed my iframe instead of the whole script. Maybe because it is placed in the frame itself, while all those getElemntById solutions work when you try to refresh a frame from another frame?</p> <p>Or I don't understand this fully and talk gibberish, anyways this worked for me like a charm :)</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='104242'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="104242"> <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_104242"> <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="104242">提交评论 </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> <div style="text-align: center"> <div class="laypage-main"> <strong>1</strong> <a href="https://www.e-learn.cn/qa/q-25791/2.html">2</a> <a href="https://www.e-learn.cn/qa/q-25791/3.html">3</a> <a href="https://www.e-learn.cn/qa/q-25791/4.html">4</a> <a class="n" href="https://www.e-learn.cn/qa/q-25791/2.html">下一页</a> </div> </div> <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="25791" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="What’s the best way to reload / refresh an iframe?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="25791" 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>