Why does jQuery remove body and head tags when populating an iframe with a style tag but not without?

前端未结
关注
 2  1266
If I run the following code, the body and head tags are removed.

    <html>
    <head>
        <style type=\"text         
<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>2条回答</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-111.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000111.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-111.html" class="fly-link">
                  <cite>后悔当初 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-02-16 00:30</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>Here are steps you can follow to get an idea of how to copy the iframe content to a string, modify it, and replace it in the iframe. These steps are meant to be performed in your Chrome Debugger and are for educational/demonstration purposes only. Once you understand the process, you can then attempt to replicate in your code on your website.</p>

<p><strong>Run each function one at a time in Chrome Debugger:</strong></p>

<pre><code>// test iframe I loaded in a sandbox also at http://example.com
$('body div:first').before('&lt;iframe src="http://example.com/company"&gt;&lt;/iframe&gt;');

// retrieved the body of the iframe - I cloned it so I could perform operations
  // on the copy without bothering the iframe content.
iBody = $('iframe:first').contents().find('body').clone();

// got the head
iHead = $('iframe:first').contents().find('head').html();

// if there is script in the body, it really messes things up. So in my tests, 
  // I had to remove it before adding it back to the iframe.
iBody.find("script").remove();

// verify there are no script elements
ibody.html(); 

// replace the iframe head
$('iframe:first').contents().find('head').html(iHead);

// replace the iframe body first with a placeholder. The body is the sensitive 
  // part. If you destroy the DOM, it can make the entire page, including 
    // the parent, turn completely white.
$('iframe:first').contents().find('body').html('&lt;div&gt;&lt;/div&gt;');

// ** inserted something in the copy to prove we modified it!!
iBody.append("&lt;div style='position:absolute;z-index:5000; color:red; " + 
    "background-color:white;'&gt;JAMES WAS HERE&lt;/div&gt;");

// now replace the body
$('iframe:first').contents().find('body').html(iBody);
</code></pre>

<blockquote>
  <p><strong>In the bottom of the website, inside the iframe, I saw my message in red on a white background. I could also see it in the source:</strong></p>
</blockquote>

<pre><code>$('iframe:first').contents().find('body').html();
</code></pre>

<p>I performed these actions on an anonymous website, using Chrome's Debugger console to run the commands. The first command creates an iframe in the home page with the site's company page in the iframe. The remaining commands get the head and body of that iframe, clone the body, add some stuff, like a "JAMES WAS HERE" message, to the body clone, and then replace the iframe body with that copy.</p>

<p>I also verified the same results by loading http://getsatisfaction.com in my browser and loading http://getsatisfaction.com/explore/product-innovation in the iframe. By repeating the above steps, I saw my message, "JAMES WAS HERE".</p>

<p>**The most severe problem I ran into was not being able to leave the JavaScript or CSS style tags in the copy. The solution for styling is to make all style modifications <em>before</em> adding the body back to the iframe. ** </p>

<p>For some reason, the browser attempted to run the JavaScript and threw errors. The context of those errors made me think that the JavaScript was being run in the toplevel context instead of the iframe context! This may be a showstopper for you. You may need to come up with another plan for showing previews in a popup window or inline. Also, this may behave differently on different websites with different JavaScript. It also may behave strangely in IE.</p>

<p>In short, I don't actually see this solution being something that would support a production website, since the JavaScript must be removed in the iframe; however, depending on your needs, it may be possible to make this work in production if you don't need the iframe DOM to use any JavaScript.</p>

<p>Nevertheless, this was an interesting problem to explore!</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='2216032'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="2216032">
                <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_2216032">
                    <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="2216032">提交评论 </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' />
                        &nbsp;加载中...
                        </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-94.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000094.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-94.html" class="fly-link">
                  <cite>一整个雨季 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2021-02-16 00:40</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>I had the same issue and learned from this SO question that in fact it's the browser that does the stripping, as part of its parsing of the <code>innerHTML</code> property, which is what <code>jQuery</code> uses internally in <code>.html()</code>.</p>

<p>Rather, the problem is actually that <code>jQuery</code> uses an intermediate new DIV, which I believe is not allowed to contain certain tags, resulting in the stripping.</p>

<p>To the solution, then. It's as simple as setting the <code>innerHTML</code> property of the <code>html</code> element directly, like so:</p>

<pre><code>// This forcibly removes head, body, and other tags, since it internally uses an empty DIV and its innerHTML property
jQuery(targetElement).html(exitHtml);

// This works fine
h = document.getElementsByTagName('html')[0];
h.innerHTML = htmlString;
</code></pre>

<p>For your particular case, simply target the <code>html</code> element <strong>inside</strong> the <code>iframe</code>.
Your final code might be:</p>

<pre><code>&lt;script&gt;
    $('iframe').load(function () {
        var contents = $('iframe').text();
        iframeHtml = $('iframe').contents().find('html').get(0);
        iframeHtml.innerHTML = contents;
    });
&lt;/script&gt;
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='2216033'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="2216033">
                <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_2216033">
                    <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="2216033">提交评论 </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' />
                        &nbsp;加载中...
                        </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();">&nbsp;看不清?</a></span>
                </div>
              </div>
                                  <div class="layui-form-item">
                    <input type="hidden" value="1137037" id="ans_qid" name="qid">
   <input type="hidden" id="tokenkey" name="tokenkey" value=''/>
                <input type="hidden" value="Why does jQuery remove body and head tags when populating an iframe with a style tag but not without?" id="ans_title" name="title"> 
             
              <div class="layui-btn    layui-btn-disabled"  id="ajaxsubmitasnwer" >提交回复</div>
            </div>
          </form>
        </div>
      </div>
      <input type="hidden" value="1137037" 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>
            <!-- 本周热门讨论问题显示10条-->