Iframes Not Valid In Xhtml Strict February 04, 2024 Post a Comment I am building a website with a Google Map, which by default generates this code: <h2 id="solution_1">Solution 1: </h2><div class="answer-desc"><p>If you must have a Maps iframe on your page, the easiest solution is to change your doctype to XHTML 1.0 Transitional instead, which permits the use of iframes:</p><pre><code id="code_0" class="hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span><span class="hljs-keyword">PUBLIC</span><span class="hljs-string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span><span class="hljs-string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_0')">Copy</button></pre><p>However if you start to see any differences in page rendering (see <a rel="nofollow noreferrer noopener" href="https://en.wikipedia.org/wiki/Quirks_mode">standards mode vs almost standards mode</a>), and you're more concerned about how your site looks in web browsers than validating your markup, just keep the XHTML 1.0 Strict doctype. Browsers won't error out simply because a page is invalid XHTML; they'll handle your iframe just fine either way.</p></div><h2 id="solution_2">Solution 2: </h2><div class="answer-desc"><p>There exists a dirty trick with Javascript:</p><a name='more'></a><pre><code id="code_1" class="hljs language-javascript"><span class="hljs-keyword">function</span><span class="hljs-title function_">load</span>(<span class="hljs-params"></span>) { <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"ramec"</span>).<span class="hljs-property">innerHTML</span> = <span class="hljs-string">'<iframe class="ramec"></iframe>'</span>; } </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_1')">Copy</button></pre><p>and:</p><pre><code id="code_2" class="hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span><span class="hljs-keyword">PUBLIC</span><span class="hljs-string">"-//W3C//DTD XHTML 1.0 Strict//EN"</span><span class="hljs-string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span>></span><span class="hljs-tag"><<span class="hljs-name">html</span><span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/1999/xhtml"</span><span class="hljs-attr">xml:lang</span>=<span class="hljs-string">"cs"</span><span class="hljs-attr">lang</span>=<span class="hljs-string">"cs"</span>></span><span class="hljs-tag"><<span class="hljs-name">head</span>></span><span class="hljs-tag"><<span class="hljs-name">meta</span><span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"content-type"</span><span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span> /></span><span class="hljs-tag"><<span class="hljs-name">script</span><span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span><span class="hljs-attr">src</span>=<span class="hljs-string">"yourjshere.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><span class="hljs-tag"><<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">head</span>></span><span class="hljs-tag"><<span class="hljs-name">body</span><span class="hljs-attr">onload</span>=<span class="hljs-string">"load()"</span>></span><span class="hljs-tag"><<span class="hljs-name">div</span><span class="hljs-attr">id</span>=<span class="hljs-string">"ramec"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_2')">Copy</button></pre><p>The document in the first link validates as XHTML1.0 Strict, although it uses iframe inside (try the links inside the document). The important part is that Javascript which puts iframe into the document is external.</p><p>I'm not sure if it worth all the effort. Maybe changing to HTML4.1 Strict document type would be much more helpful there (the rendering of page would be the same as with XHTML1.0 Strict).</p></div><h2 id="solution_3">Solution 3: </h2><div class="answer-desc"><p>An object tag performs the same function, no hacks required. Just change the "src" attribute to "data" and add type="text/html".</p><pre><code id="code_3" class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">object</span><span class="hljs-attr">width</span>=<span class="hljs-string">"550"</span><span class="hljs-attr">height</span>=<span class="hljs-string">"500"</span><span class="hljs-attr">data</span>=<span class="hljs-string">"http://maps.google.co.uk/maps?f=q<span class="hljs-symbol">&amp;</span>source=s_q<span class="hljs-symbol">&amp;</span>hl=en<span class="hljs-symbol">&amp;</span>geocode=<span class="hljs-symbol">&amp;</span>q=Amber,+115+Portswood+Road,+Southampton,+SO17+2FX,+United+Kingdom<span class="hljs-symbol">&amp;</span>aq=0<span class="hljs-symbol">&amp;</span>sll=50.923556,-1.394663<span class="hljs-symbol">&amp;</span>sspn=0.006709,0.01929<span class="hljs-symbol">&amp;</span>vpsrc=6<span class="hljs-symbol">&amp;</span>ie=UTF8<span class="hljs-symbol">&amp;</span>hq=Amber,<span class="hljs-symbol">&amp;</span>hnear=115+Portswood+Rd,+Southampton+SO17+2,+United+Kingdom<span class="hljs-symbol">&amp;</span>t=m<span class="hljs-symbol">&amp;</span>ll=50.923178,-1.393676<span class="hljs-symbol">&amp;</span>spn=0.012985,0.027466<span class="hljs-symbol">&amp;</span>z=15<span class="hljs-symbol">&amp;</span>output=embed"</span><span class="hljs-attr">type</span>=<span class="hljs-string">"text/html"</span>></span><span class="hljs-tag"></<span class="hljs-name">object</span>></span></code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_3')">Copy</button></pre></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/-/Google Maps?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Html?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Iframe?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Xhtml?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Xhtml 1.0 Strict?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script> showBacaJuga("https://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.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://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.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=Iframes Not Valid In Xhtml Strict&url=https://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.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://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.html&media=&description=Iframes Not Valid In Xhtml Strict' 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=Iframes Not Valid In Xhtml Strict%20%2D%20https://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.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://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.html&text=Iframes Not Valid In Xhtml Strict' 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 = ["Google Maps", "Html", "Iframe", "Xhtml", "Xhtml 1.0 Strict", ]; var relatedConfig = { postUrl: "https://pricebosema12.blogspot.com/2024/02/iframes-not-valid-in-xhtml-strict.html", homePageUrl: "https://pricebosema12.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/AVvXsEiCadk34HfsOLxS_m4K8GYjn2CKK_UTftK5mnQK-mW3KrYyrnNK5RruyT56qkR4QmFgeR6kxgYqOMzqREgQ27MrzTyTJDVLltQLLuunq236pp6XnIY2l0nlk4pss_phyphenhyphenroEZYpFilYtyvs/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 "Iframes Not Valid In Xhtml Strict" </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://www.blogger.com/comment/frame/5613122212524363534?po=7690704996355748545&hl=en&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%'>