How to set custom http headers when changing iframe src?

前端未结

关注

 4  1084

Is there a way to add a custom http header into the request done by an </code> when changing the source (src) using javascript?</p> <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>4条回答</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-134.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000134.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-134.html" class="fly-link"> <cite>青春惊慌失措 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-02 11:38</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Rather than using a data URI, or setting the contents to a string, you can use URL.createObjectURL(), and set it as the <code>src</code> of the iframe.</p> <pre><code>var xhr = new XMLHttpRequest(); xhr.open('GET', 'some.pdf'); xhr.onreadystatechange = handler; xhr.responseType = 'blob'; xhr.setRequestHeader('Authorization', 'Bearer ' + token); xhr.send(); function handler() { if (this.readyState === this.DONE) { if (this.status === 200) { // this.response is a Blob, because we set responseType above var data_url = URL.createObjectURL(this.response); document.querySelector('#output-frame-id').src = data_url; } else { console.error('no pdf :('); } } } </code></pre> <p>The object URLs are pretty interesting. They're of the form <code>blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170</code>. You can actually open them in a new tab and see the response, and they're discarded when the context that created them is closed.</p> <p>Here's a full example: https://github.com/courajs/pdf-poc</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='717979'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="717979"> <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_717979"> <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="717979">提交评论 </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-115.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000115.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-115.html" class="fly-link"> <cite>时光说笑 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-02 11:40</span> </div> </div> <div class="detail-body jieda-body photos"> <p>I ended up going with the approach proposed by the other answers here, that use ajax to get the html string and then directly set the contents of the <code>iFrame</code>.</p> <p>However, I used the approach posted in this answer to actually set the contents of the <code>iFrame</code>, as I found it worked well cross platform with almost all devices I could dig up.</p> <p>Tested - successful:</p> <ul> <li>Chrome 54 (desktop) ^</li> <li>Firefox 49 (desktop) ^ </li> <li>IE 11 (desktop) ^</li> <li>IE 10 (desktop) in emulation mode ^</li> <li>Safari/Chrome on iOS 8 (ipad)</li> <li>Chrome on Android 6 (nexus phone)</li> <li>Edge on Lumia 950 (Win 10 Phone)</li> </ul> <p>^ confirmed that linked css and js in the content run correctly (others not tested)</p> <p>Tested - unsuccessful:</p> <ul> <li>IE 9 (desktop) in emulation mode</li> <li>Safari/Chrome on iOS 7 (iPhone)</li> </ul> <p>So putting them together gives something like this (Note: I havn't actually run this exact code):</p> <pre><code>$.ajax({ type: "GET", url: "https://yourdomain.com/gethtml", beforeSend: function(xhr) { xhr.setRequestHeader("yourheader", "value"); }, success: function(data) { var iframeDoc = document.querySelector('#myiframe').contentWindow.document; iframeDoc.open('text/html', 'replace'); iframeDoc.write(data); iframeDoc.close(); } }); </code></pre> <p>Here's an example of setting the <code>iFrame</code> contents in this JS Bin</p> <p><strong>Edit:</strong> Here's the html part</p> <pre><code><iframe id="myiframe" src="about:blank"></iframe> </code></pre> <p><strong>Edit 2:</strong></p> <p>The solution above appears to no longer be working in Firefox (50.1.0) for some unknown reason. Using the solution in this answer I've now changed to code to the example below, which also seems to be more robust:</p> <pre><code>$.ajax({ type: "GET", url: "https://yourdomain.com/gethtml", beforeSend: function(xhr) { xhr.setRequestHeader("yourheader", "value"); }, success: function(data) { var iframe = document.getElementById('myiframe'); iframe.contentWindow.contents = data; iframe.src = 'javascript:window["contents"]'; } }); </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='717980'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="717980"> <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_717980"> <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="717980">提交评论 </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-46.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000046.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-46.html" class="fly-link"> <cite>既然无缘 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-02 11:45</span> </div> </div> <div class="detail-body jieda-body photos"> <p>The following code works. It is a modification of the code provided by Matthew Graves, modified to use the <code>srcdoc</code> attribute to solve the problem of CSS and JavaScript references not been ran. Unfortunately, it is only working in Chrome.</p> <pre><code> $.ajax({ type: "GET", url: "https://app.icontact.com/icp/a/", contentType: "application/json", beforeSend: function(xhr, settings){ xhr.setRequestHeader("some_custom_header", "foo");}, success: function(data){ $("#output_iframe_id").attr('srcdoc',data) } }); </code></pre> <p><strong>Edit</strong>: Finally, I have resolved the issue of the scripts blocks cross-browser, by reassigning them to the iframe on document.ready function:</p> <pre><code>$(document).ready(function () { var doc = $(document); if (frames.length > 0) { doc = frames[0].document; $(doc).find('script').each(function () { var script = document.createElement("script"); if ($(this).attr("type") != null) script.type = $(this).attr("type"); if ($(this).attr("src") != null) script.src = $(this).attr("src"); script.text = $(this).html(); $(doc).find('head')[0].appendChild(script); $(this).remove(); }); } }); </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='717981'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="717981"> <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_717981"> <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="717981">提交评论 </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-25.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000025.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-25.html" class="fly-link"> <cite>执笔经年 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-02 11:54</span> </div> </div> <div class="detail-body jieda-body photos"> <p>You can have the results of an ajax request that has custom headers be set as the content of an iframe like so:</p> <pre><code>$.ajax({ type: "GET", url: "https://app.icontact.com/icp/a/", contentType: "application/json", beforeSend: function(xhr, settings){ xhr.setRequestHeader("some_custom_header", "foo");}, success: function(data){ $("#output_iframe_id").attr('src',"data:text/html;charset=utf-8," + escape(data)) } }); </code></pre> <p>This is assuming the iframe is pointing at a cross domain src. It is simpler if everything is on the same domain.</p> <p>Edit: Maybe try this variation.</p> <pre><code>$.ajax({ type: "GET", url: "https://app.icontact.com/icp/a/", contentType: "application/json", beforeSend: function(xhr, settings){ xhr.setRequestHeader("some_custom_header", "foo");}, success: function(data){ $("#output_iframe_id").attr('src',"/") $("#output_iframe_id").contents().find('html').html(data); } }); </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='717978'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="717978"> <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_717978"> <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="717978">提交评论 </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="194566" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="How to set custom http headers when changing iframe src?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="194566" 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>