{"id":56210,"date":"2022-06-23T03:01:31","date_gmt":"2022-06-22T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56210"},"modified":"2022-06-23T09:33:07","modified_gmt":"2022-06-22T23:33:07","slug":"javascript-getcomputedstyle-and-getpropertyvalue-method-iframe-ajax-srcdoc-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-getcomputedstyle-and-getpropertyvalue-method-iframe-ajax-srcdoc-tutorial\/","title":{"rendered":"Javascript getComputedStyle and getPropertyValue Method Iframe Ajax Srcdoc Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/getComputedStyle_plus.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript getComputedStyle and getPropertyValue Method Iframe Ajax Srcdoc Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/getComputedStyle_plus.gif\" title=\"Javascript getComputedStyle and getPropertyValue Method Iframe Ajax Srcdoc Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Javascript getComputedStyle and getPropertyValue Method Iframe Ajax Srcdoc Tutorial<\/p><\/div>\n<p>Of those Window Object Method calls of yesterday&#8217;s <a target=_blank title='Window Object Method Override Return Values Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/window-object-method-override-return-values-tutorial\/'>Window Object Method Override Return Values Tutorial<\/a> one, especially, got us intrigued, that being the two part &#8230;<\/p>\n<p><code><br \/>\nconst getComputedStyle = (one,two) => { lasto=window.getComputedStyle(one); console.log(lasto.getPropertyValue(two)); };<br \/>\n<\/code><\/p>\n<p> &#8230; conjoined use of the Window Object Method <a target=_blank href='https:\/\/www.w3schools.com\/jsref\/jsref_getcomputedstyle.asp' title='Gets the current computed CSS styles applied to an element'><i>getComputedStyle()<\/i><\/a> talent whereby it &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/jsref_getcomputedstyle.asp'><p>\nGets the current computed CSS styles applied to an element\n<\/p><\/blockquote>\n<p> &#8230; with the CSSStyleDeclaration <a target=_blank href='https:\/\/www.w3schools.com\/jsref\/met_cssstyle_getpropertyvalue.asp' title='Returns the value of the specified CSS property'><i>getPropertyValue()<\/i><\/a> method talent whereby it &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/met_cssstyle_getpropertyvalue.asp'><p>\nReturns the value of the specified CSS property\n<\/p><\/blockquote>\n<p> &#8230; it seems to us should make them be nominees for a <a target=_blank href='https:\/\/www.youtube.com\/watch?v=kmut0FMoK9E' title='?'>&#8220;Fred and Ginger&#8221;<\/a> award!<\/p>\n<p>Better yet <font size=1>(well, you had to be there)<\/font> is to combine &#8220;Fred and Ginger&#8221; with a dynamic threesome &#8230;<\/p>\n<ul>\n<li>Relative URL<\/li>\n<li>Ajax Document return<\/li>\n<li>Iframe srcdoc attribute<\/li>\n<\/ul>\n<p> &#8230; so that we can offer a user nominated whole RJM Programming webpage be &#8230;<\/p>\n<ol>\n<li>shown in an iframe via that iframe&#8217;s srcdoc (via the Ajax Document) &#8230;<\/li>\n<li>with dynamically added Javascript (into that srcdoc) whereby &#8230; well &#8230; take a look &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar rawhtml='';<br \/>\nvar zhr=null, zform=null;<br \/>\nvar newscr=String.fromCharCode(10) + \"&lt;scr\" + \"ipt type='text\/javascript'&gt;\" + String.fromCharCode(10) + \"&lt;\/scr\" + \"ipt&gt;\" + String.fromCharCode(10);<br \/>\n<br \/>\nfunction stateChanged() {<br \/>\n if (zhr.readyState == 4) {<br \/>\n  if (zhr.status == 200) {<br \/>\n   rawhtml = zhr.response;<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \" var lastogcs=null; \" + String.fromCharCode(10) + \" function gcstitleit() { \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"   var iels=0, jone=0, delimc='', onecssps='', cssps='\" + document.getElementById('csspty').value.trim().replace(\/\\ \/g,',').replace(\/\\;\/g,',').replace(\/\\:\/g,',') + \"'.split(','), elsare=document.getElementsByTagName('*'); \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"   for (iels=0; iels&lt;elsare.length; iels++) { \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"     delimc=''; onecssps=''; lastogcs=window.getComputedStyle(elsare[iels]); \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"     for (jone=0; jone&lt;cssps.length; jone++) { if (cssps[jone].trim() != '') { onecssps+=delimc + cssps[jone] + ':' + lastogcs.getPropertyValue(cssps[jone]);   ; delimc=';'; } }  \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"     if (('' + elsare[iels].title).replace('null','').replace('undefined','') == '') { \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"       elsare[iels].title='' + onecssps;   \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"     } else { \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"       elsare[iels].title+=' ... ' + onecssps;   \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"     }  \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \"   } \" + String.fromCharCode(10) + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \" } \" + String.fromCharCode(10) + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n<br \/>\n   newscr=newscr.replace('&lt;\/scr' + 'ipt&gt;',  String.fromCharCode(10) + \" setTimeout(gcstitleit, 3000); \" + \"&lt;\/scr\" + \"ipt&gt;\");<br \/>\n   if (rawhtml.indexOf('&lt;\/bo' + 'dy&gt;') != -1) {<br \/>\n     rawhtml=rawhtml.replace('&lt;\/bo' + 'dy&gt;', newscr + '&lt;\/bo' + 'dy&gt;');<br \/>\n   } else {<br \/>\n     rawhtml+=newscr;<br \/>\n   }<br \/>\n   document.getElementById('myif').srcdoc=rawhtml;<br \/>\n   document.getElementById('myif').style.display='block';<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n  function doit() {<br \/>\n   if (document.getElementById('urlrel').value.trim() != '' && document.getElementById('csspty').value.trim() != '') {<br \/>\n     zhr = new XMLHttpRequest();<br \/>\n     zform = new FormData();<br \/>\n     zform.append('calling', '');<br \/>\n     zhr.responseType='Document';<br \/>\n     zhr.onreadystatechange=stateChanged;<br \/>\n     zhr.open('get', document.getElementById('urlrel').value, true);<br \/>\n     zhr.send(zform);<br \/>\n   }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>adjusted webpage element title attributes outlining those CSS property findings<\/li>\n<\/ol>\n<p> &#8230; as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/getComputedStyle_plus.html-GETME\" title=\"getComputedStyle_plus.html\"><i>little bit better catering for href and src type attribute reference<\/i><\/a> &#8220;proof of concept&#8221; idea in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/getComputedStyle_plus.html-GETME\" title=\"getComputedStyle_plus.html\">getComputedStyle_plus.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/getComputedStyle_plus.html\" title=\"Click picture\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/getComputedStyle_plus.html\" style=\"width:100%;height:1200px;\"><\/iframe><\/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='#d56210' onclick='var dv=document.getElementById(\"d56210\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56210' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Of those Window Object Method calls of yesterday&#8217;s Window Object Method Override Return Values Tutorial one, especially, got us intrigued, that being the two part &#8230; const getComputedStyle = (one,two) => { lasto=window.getComputedStyle(one); console.log(lasto.getPropertyValue(two)); }; &#8230; conjoined use of the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-getcomputedstyle-and-getpropertyvalue-method-iframe-ajax-srcdoc-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":[2,12,14,37],"tags":[69,281,3999,1683,2730,1801,4000,576,587,652,1830,849,997,1045,2902,1319,1345,1418,1583],"class_list":["post-56210","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-css","tag-cssstyledeclarion","tag-dynamic","tag-formdata","tag-getcomputedstyle","tag-getpropertyvalue","tag-html","tag-iframe","tag-javascript","tag-method","tag-object","tag-programming","tag-relative-url","tag-srcdoc","tag-tutorial","tag-url","tag-webpage","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56210"}],"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=56210"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56210\/revisions"}],"predecessor-version":[{"id":56221,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56210\/revisions\/56221"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}