{"id":51562,"date":"2021-01-31T03:01:19","date_gmt":"2021-01-30T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51562"},"modified":"2021-02-14T07:51:45","modified_gmt":"2021-02-13T21:51:45","slug":"iframe-srcdoc-equals-utf-8-issue-reveal-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/iframe-srcdoc-equals-utf-8-issue-reveal-tutorial\/","title":{"rendered":"Iframe Srcdoc Equals UTF-8 Issue Reveal Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Iframe Srcdoc Equals UTF-8 Issue Reveal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix_explained.jpg\" title=\"Iframe Srcdoc Equals UTF-8 Issue Reveal Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Iframe Srcdoc Equals UTF-8 Issue Reveal Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial' href='#iseutf-8ipt'>Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>HTML iframe &#8230;<\/li>\n<li>[iframe].src=data:text\/html;base64,[HTMLbase64Content] versus [iframe].srcdoc=atob([HTMLbase64Content]) nuance regarding &#8230;<\/li>\n<li>the display of UTF-8 data<\/li>\n<\/ul>\n<p> &#8230; is just that &#8230; nuanced, and hard to explain in terms of &#8220;what is the issue&#8221; and &#8220;what are we trying to achieve&#8221;.  Yesterday, our attempts may have helped with &#8220;what are we trying to achieve&#8221; but we think we can improve on this, as well as with &#8220;what is the issue&#8221; by fleshing out the processing and using a favourite <a target=_blank title='Reveal postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a> tool of ours, the use of the <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/summary element combination.  Using this, we feel that when a user &#8220;reveals&#8221; a hidden piece of a puzzle, something happens more clearly in their brain, which has been spared the whole complicated picture all at once.  At the other extreme, as it was for yesterday&#8217;s work, where there is too little obvious explanation, the user may just pack up and leave without even trying to understand what you are getting at.<\/p>\n<p>Another explanation &#8220;friend&#8221;, we think, is colour.  We use the colours of a stop sign to direct the users eyes through the display to the &#8220;green&#8221; logical conclusion.<\/p>\n<p>Over to you with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php-GETME\" title=\"fgc_utf_fix.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php-GETME\" title=\"fgc_utf_fix.php\">fgc_utf_fix.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php\" title=\"Click picture\">live run<\/a> for you to try to see whether the &#8220;reveal&#8221; usage helps the understanding better.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/iframe-srcdoc-equals-utf-8-issue-reveal-tutorial\/'>Iframe Srcdoc Equals UTF-8 Issue Reveal Tutorial<\/a>.<\/p-->\n<hr>\n<p id='iseutf-8ipt'>Previous relevant <a target=_blank title='Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/iframe-srcdoc-equals-utf-8-issue-primer-tutorial\/'>Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.jpg\" title=\"Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial<\/p><\/div>\n<p>Do you remember how with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-client-pre-emptive-iframe-tutorial\/' title='Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial'>Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial<\/a>, recently, we said &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-client-pre-emptive-iframe-tutorial\/'><p>\nWhy can\u2019t we manage this new functionality in the one pass through the \u201conload\u201d event logic? Well, any self-respecting webpage content will contain both apostrophe and double quote characters (let alone line feeds and carriage returns) <font size=2>( but we can if we can get to a Javascript DOM statement like <\/font><font size=1>document.getElementById(\u2018ifsd\u2019).srcdoc=atob((\u201d + ioissrc).split(\u2018;base64,\u2019)[1]).replace(\u2018&lt;\/bo\u2019 + \u2018dy&gt;\u2019, \u2018 &lt;style&gt; \u2018 + selectorplusis + \u2018&lt;\/style&gt; &lt;\/bo\u2019 + \u2018dy&gt;\u2019);<\/font><font size=2> )<\/font><\/p><\/blockquote>\n<p>?  Well, that is true, initializing an iframe&#8217;s <a target=_blank title='Iframe srcdoc information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp'>srcdoc<\/a> attribute at the same time as the iframe is created can be tricky for HTML data of any complexity.  Recently, though, we realized that the &#8230;<\/p>\n<p><code><br \/>\n<font size=1>document.getElementById(\u2018ifsd\u2019).srcdoc=atob((\u201d + ioissrc).split(\u2018;base64,\u2019)[1]).replace(\u2018&lt;\/bo\u2019 + \u2018dy&gt;\u2019, \u2018 &lt;style&gt; \u2018 + selectorplusis + \u2018&lt;\/style&gt; &lt;\/bo\u2019 + \u2018dy&gt;\u2019);<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; can be problematic, too, with UTF-8 (unicode) data (perhaps to do with UTF-16 surrogate pairs <font size=1>(we are not sure)<\/font>).  Of course, discovering this during that recent web application &#8220;Testing out document.querySelectorAll&#8221; in the blog posting thread owning the blog post above, as well as <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-textarea-placeholder-tutorial\/' title='Javascript document.querySelectorAll Textarea Placeholder Tutorial'>Javascript document.querySelectorAll Textarea Placeholder Tutorial<\/a>&#8216;s penchant for using as an absolute URL (thanks <a target=_blank title='Wikipedia, thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a>) &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='http:\/\/www.wikipedia.org\/wiki\/Einstein' href='http:\/\/www.wikipedia.org\/wiki\/Einstein'>HTTP:\/\/www.wikipedia.org\/wiki\/Einstein<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; we discovered it outputting strings like &#8230;<\/p>\n<p><code><br \/>\nKingdom of W\u00c3\u00bcrttemberg<br \/>\n<\/code><\/p>\n<p> &#8230; rather than, the better &#8230;<\/p>\n<p><code><br \/>\nKingdom of W\u00fcrttemberg<br \/>\n<\/code><\/p>\n<p> &#8230; leading us to be led down an &#8220;irrelevant PHP file_get_contents encoding problem garden path&#8221; until we undertook today&#8217;s &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php_GETME\" title=\"fgc_utf_fix.php\">fgc_utf_fix.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/fgc_utf_fix.php\" title=\"Click picture\">live run<\/a> simplifying (and thus paring down) the methodologies of that &#8220;Testing out document.querySelectorAll&#8221; project and decoupling it and putting it back together, plus a good hour of logical calm reasoning, led us to deduct that it was not file_get_contents that was the problem but that [iframe].srcdoc=[HTMLcontent] causing the issue when that [HTMLcontent] contains UTF-8 unicode data.  That makes sense.  Not all UTF-8 data fits with an initialization statement designed for character data that is made up of one byte per character, so there could be mis-mappings doing this.<\/p>\n<p>But then we stumbled upon the excellent <a target=_blank href='https:\/\/gist.github.com\/kasperkamperman\/198c6389840532b96069ba6a776d69e6' title='Function to fix ut8 special characters displayed as 2 characters (utf-8 interpreted as ISO-8859-1 or Windows-1252)'>Function to fix ut8 special characters displayed as 2 characters (utf-8 interpreted as ISO-8859-1 or Windows-1252)<\/a> and adapted its PHP code into a Javascript function equivalent that could help put &#8220;Humpty Dumpty back together again&#8221;.   Cute, huh?!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51548' onclick='var dv=document.getElementById(\"d51548\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/utf-8\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51548' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51562' onclick='var dv=document.getElementById(\"d51562\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51562' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Iframe Srcdoc Equals UTF-8 Issue Primer Tutorial&#8216;s &#8230; HTML iframe &#8230; [iframe].src=data:text\/html;base64,[HTMLbase64Content] versus [iframe].srcdoc=atob([HTMLbase64Content]) nuance regarding &#8230; the display of UTF-8 data &#8230; is just that &#8230; nuanced, and hard to explain in terms of &#8220;what is the issue&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/iframe-srcdoc-equals-utf-8-issue-reveal-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2830,1653,1824,224,257,2310,2364,429,576,587,652,748,932,997,1063,2506,2902,2311,3541,1319,1333,1345,3540,1352],"class_list":["post-51562","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-atob","tag-base64","tag-character","tag-colour","tag-content","tag-details","tag-explanation","tag-file_get_contents","tag-html","tag-iframe","tag-javascript","tag-mapping","tag-php","tag-programming","tag-reveal","tag-src","tag-srcdoc","tag-summary","tag-surrogate-pair","tag-tutorial","tag-unicode","tag-url","tag-utf-16","tag-utf-8"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51562"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51562"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51562\/revisions"}],"predecessor-version":[{"id":51688,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51562\/revisions\/51688"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}