Why Does Jquery Remove Body And Head Tags When Populating An Iframe With A Style Tag But Not Without? August 09, 2024 Post a Comment If I run the following code, the body and head tags are removed. <html><head><style type='text/css'><</div><h2 id="solution_1">Solution 1: </h2><div class="answer-desc"><p>I had the same issue and learned from <a rel="nofollow noreferrer noopener" href="https://stackoverflow.com/questions/2488839/does-jquery-strip-some-html-elements-from-a-string-when-using-html">this SO question</a> 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><a name='more'></a><pre><code id="code_6" class="hljs language-javascript"><span class="hljs-comment">// This forcibly removes head, body, and other tags, since it internally uses an empty DIV and its innerHTML property</span><span class="hljs-title function_">jQuery</span>(targetElement).<span class="hljs-title function_">html</span>(exitHtml); <span class="hljs-comment">// This works fine</span> h = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">'html'</span>)[<span class="hljs-number">0</span>]; h.<span class="hljs-property">innerHTML</span> = htmlString; </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_6')">Copy</button></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 id="code_9" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"> $(<span class="hljs-string">'iframe'</span>).<span class="hljs-title function_">load</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">var</span> contents = $(<span class="hljs-string">'iframe'</span>).<span class="hljs-title function_">text</span>(); iframeHtml = $(<span class="hljs-string">'iframe'</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">'html'</span>).<span class="hljs-title function_">get</span>(<span class="hljs-number">0</span>); iframeHtml.<span class="hljs-property">innerHTML</span> = contents; }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_9')">Copy</button></pre></div><h2 id="solution_2">Solution 2: </h2><div class="answer-desc"><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 id="code_10" class="hljs language-javascript"><span class="hljs-comment">// test iframe I loaded in a sandbox also at http://example.com</span> $(<span class="hljs-string">'body div:first'</span>).<span class="hljs-title function_">before</span>(<span class="hljs-string">'<iframe src="http://example.com/company"></iframe>'</span>); <span class="hljs-comment">// retrieved the body of the iframe - I cloned it so I could perform operations</span><span class="hljs-comment">// on the copy without bothering the iframe content.</span> iBody = $(<span class="hljs-string">'iframe:first'</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">'body'</span>).<span class="hljs-title function_">clone</span>(); <span class="hljs-comment">// got the head</span> iHead = $(<span class="hljs-string">'iframe:first'</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">'head'</span>).<span class="hljs-title function_">html</span>(); <span class="hljs-comment">// if there is script in the body, it really messes things up. So in my tests, </span><span class="hljs-comment">// I had to remove it before adding it back to the iframe.</span> iBody.<span class="hljs-title function_">find</span>(<span class="hljs-string">"script"</span>).<span class="hljs-title function_">remove</span>(); <span class="hljs-comment">// verify there are no script elements</span> ibody.<span class="hljs-title function_">html</span>(); <span class="hljs-comment">// replace the iframe head</span> $(<span class="hljs-string">'iframe:first'</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">'head'</span>).<span class="hljs-title function_">html</span>(iHead); <span class="hljs-comment">// replace the iframe body first with a placeholder. The body is the sensitive </span><span class="hljs-comment">// part. If you destroy the DOM, it can make the entire page, including </span><span class="hljs-comment">// the parent, turn completely white.</span> $(<span class="hljs-string">'iframe:first'</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">'body'</span>).<span class="hljs-title function_">html</span>(<span class="hljs-string">'<div></div>'</span>); <span class="hljs-comment">// ** inserted something in the copy to prove we modified it!!</span> iBody.<span class="hljs-title function_">append</span>(<span class="hljs-string">"<div style='position:absolute;z-index:5000; color:red; "</span> + <span class="hljs-string">"background-color:white;'>JAMES WAS HERE</div>"</span>); <span class="hljs-comment">// now replace the body</span> $(<span class="hljs-string">'iframe:first'</span>).<span class="hljs-title function_">contents</span>().<span class="hljs-title function_">find</span>(<span class="hljs-string">'body'</span>).<span class="hljs-title function_">html</span>(iBody); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_10')">Copy</button></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 id="code_11" class="hljs language-scss">$('iframe:first')<span class="hljs-selector-class">.contents</span>()<span class="hljs-selector-class">.find</span>('body')<span class="hljs-selector-class">.html</span>(); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_11')">Copy</button></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 <a rel="nofollow noreferrer noopener" href="http://getsatisfaction.com">http://getsatisfaction.com</a> in my browser and loading <a rel="nofollow noreferrer noopener" href="http://getsatisfaction.com/explore/product-innovation">http://getsatisfaction.com/explore/product-innovation</a> 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> </div> <div id='baca-juga'></div> <script> //<![CDATA[ var bacaJugaJudul=[],bacaJugaNum=0,bacaJugaUrl=[];function bacaJuga(a){for(var u=0;u<a.feed.entry.length;u++){var e=a.feed.entry[u];bacaJugaJudul[bacaJugaNum]=e.title.$t;for(var l=0;l<e.link.length;l++)if("alternate"==e.link[l].rel){bacaJugaUrl[bacaJugaNum]=e.link[l].href,bacaJugaNum++;break}}}function showBacaJuga(a){function u(a,u){u.parentNode.insertBefore(a,u.nextSibling)}var e=document.querySelector("#baca-juga"),l=document.createElement("div"),t=document.querySelector(".post-body-artikel").querySelectorAll("div > br, span > br, div > p, span > p"),r=Math.ceil(.5*t.length),n=document.getElementById("related"),c=(l.setAttribute("class","baca-juga-wrap"),{bacaJuga:!0,jumlahBacaJuga:3,judulBacaJuga:"Baca Juga"});optionLinkMagz(c);if(!0===c.bacaJuga&&void 0!==t[r]){u(e,null!==n?n:t[r]);for(var g=0;g<bacaJugaUrl.length;g++)bacaJugaUrl[g]==a&&(bacaJugaUrl.splice(g,1),bacaJugaJudul.splice(g,1));var J=Math.floor((bacaJugaJudul.length-1)*Math.random()),g=0;if(0<bacaJugaJudul.length&&0<c.jumlahBacaJuga){e.appendChild(l);n=e;null!=(n=n.previousElementSibling)&&"BR"===n.tagName&&(n.style.display="none");for(var i="<strong>"+c.judulBacaJuga+"</strong><ul>";g<bacaJugaJudul.length&&g<c.jumlahBacaJuga;g++)i+='<li><a href="'+bacaJugaUrl[J]+'">'+bacaJugaJudul[J]+"</a></li>",J<bacaJugaJudul.length-1?J++:J=0;l.innerHTML=i+="</ul>"}}} //]]> </script> <script src='/feeds/posts/summary/-/Iframe?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Javascript?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Jquery?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script> showBacaJuga("https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html"); </script> <div id='share-container'> <div class='share-title'> <p class='share-this-pleaseeeee'>Share</p> </div> <div id='share'> <a aria-label='facebook' class='facebook' href='//www.facebook.com/sharer.php?u=https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html' rel='nofollow noreferrer' title='facebook'> <svg viewBox='0 0 24 24'> <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path> </svg> </a> <a aria-label='twitter' class='twitter' href='//twitter.com/intent/tweet?text=Why Does Jquery Remove Body And Head Tags When Populating An Iframe With A Style Tag But Not Without?&url=https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html' rel='nofollow noreferrer' title='twitter'> <svg viewBox='0 0 24 24'> <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path> </svg> </a> <a aria-label='pinterest' class='pinterest' href='//pinterest.com/pin/create/button/?url=https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html&media=&description=Why Does Jquery Remove Body And Head Tags When Populating An Iframe With A Style Tag But Not Without?' rel='nofollow noreferrer' title='pinterest'> <svg viewBox='0 0 24 24'> <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path> </svg> </a> <a aria-label='whatsapp' class='whatsapp' href='//api.whatsapp.com/send?phone=&text=Why Does Jquery Remove Body And Head Tags When Populating An Iframe With A Style Tag But Not Without?%20%2D%20https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html' rel='nofollow noreferrer' title='whatsapp'> <svg viewBox='0 0 24 24'> <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path> </svg> </a> <a aria-label='telegram' class='telegram' href='https://t.me/share/url?url=https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html&text=Why Does Jquery Remove Body And Head Tags When Populating An Iframe With A Style Tag But Not Without?' rel='nofollow noreferrer' target='_blank' title='telegram'> <svg viewBox='0 0 24 24'> <path d='M19.4 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001l-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15l4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'></path> </svg> </a> </div> </div> <div id='ms-related-post'></div> <script> var postLabels = ["Iframe", "Javascript", "Jquery", ]; var relatedConfig = { postUrl: "https://20qticecreammaker.blogspot.com/2024/08/why-does-jquery-remove-body-and-head.html", homePageUrl: "https://20qticecreammaker.blogspot.com/", relatedTitleText: "You may like these posts", }; </script> <div id='ms-matched-content'></div> <script> //<![CDATA[ // related post js from www.dte.web.id modified by sugeng.id !function(){var e,b={relatedTitleOuterOpen:'<div class="related-title"><p class="ms-title">',relatedTitleOuterClose:"</p></div>",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvBKwxEoHJgHLjmqx6PB1Vm_NxS7Y-xP5vNxVRbGxPUl1aEQRzJ4hz0AvuT5khcfBKsbue9VtPs_oGnhdE3GWPkXjddMhbxZY3w2dZJyrYjfxlR3CIP0zPAAJaNYc_FA8p7fUihftbnE/w192-h108-n-k-rw-no-nu/nomage+%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0<postLabels.length?"/-/"+v(postLabels)[0]:"");l=l.replace("&","&"),msRelatedPosts=function(e){var t,l,a,s,r,d,o,n,i=b.relatedTitleOuterOpen+B.judulRelatedPosts+b.relatedTitleOuterClose,A=document.getElementById(b.relatedOuter),m=v(e.feed.entry);i+=1==B.relatedPostsThumb?'<ul class="ms-related-hasthumb">':'<ul class="ms-related-nothumb">';for(var u=0;u<m.length;u++)for(var h=0,c=m[u].link.length;h<c;h++)m[u].link[h].href==b.postUrl&&m.splice(u,1);if(0<m.length){for(var g=0;g<B.jumlahRelatedPosts&&g<m.length;g++){l=m[g].title.$t,void 0!==m[g].content&&(r=(s=m[g].content.$t).indexOf("<img",0));function f(e){a=e.replace(/.*?:\/\//g,"//").replace(/s72-(c|.*?-c)/,"w"+b.thumbWidth+"-h"+b.thumbHeight+"-c-rw")}"media$thumbnail"in m[g]?f(m[g].media$thumbnail.url):void 0!==r&&-1!==r?(d=s.indexOf("/>",r),o=(d=s.slice(r,d)).indexOf("src=",0)+5,n=d.indexOf('"',o),f(d.slice(o,n))):a=B.relatedPostsNoThumbImg;for(var p=0,c=m[g].link.length;p<c;p++)t="alternate"==m[g].link[p].rel?m[g].link[p].href:"#";i+='<li><a title="'+l+'" href="'+t+'">'+(1==B.relatedPostsThumb?'<div class="related-thumb-outer"><img alt="'+l+'" class="related-thumb" src="'+a+'" width="'+b.thumbWidth+'" height="'+b.thumbHeight+'"></div>':"")+('<div class="related-title-outer">'+l+"</div>")+"</a></li>"}1==B.relatedPosts&&(A.innerHTML=i+="</ul>")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1<e?1+Math.floor(Math.random()*e):1;t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/default"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+(B.jumlahRelatedPosts+1)+"&callback=msRelatedPosts")},t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=msRandomIndex")}(); function fullwidthImg(){var t=document.querySelector(".post-body img"),l=document.querySelector(".post-body > .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}(); //]]> </script> </div> <section class='comments comments-non-threaded embed' data-num-comments='0' id='comments'> <a name='comments'></a> <h2 class='comments-title'> Post a Comment for "Why Does Jquery Remove Body And Head Tags When Populating An Iframe With A Style Tag But Not Without?" </h2> <div id='Blog1_comments-block-wrapper'> </div> <div class='comment-footer'> <div class='comment-form default-comment-form'> <a name='comment-form'></a> <a aria-label='comment form' href='https://draft.blogger.com/comment/frame/3553936710377721231?po=335613498403418466&hl=en&saa=85391&skin=contempo' id='comment-editor-src'></a> <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' title='comment-editor' width='100%'>