{"id":17162,"date":"2015-09-14T05:01:16","date_gmt":"2015-09-13T19:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17162"},"modified":"2015-09-13T14:30:21","modified_gmt":"2015-09-13T04:30:21","slug":"javascript-writes-javascript-iframe-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-writes-javascript-iframe-overlay-tutorial\/","title":{"rendered":"Javascript Writes Javascript Iframe Overlay Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs_test.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript Writes Javascript Iframe Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs.gif\" title=\"Javascript Writes Javascript Iframe Overlay Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Writes Javascript Iframe Overlay Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Javascript Writes Javascript Primer Tutorial' href='#jwjpt'>Javascript Writes Javascript Primer Tutorial<\/a>, as shown below, got us started on our <i>Javascript writes Javascript<\/i> research project.  Today we extend that to catering for <i>Javascript writes Javascript<\/i> within an HTML iframe element, adding to our line of tutorials about <a target=_blank title='Overlay blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a>, as what we are doing here, is overlaying an HTML iframe element on top of a normal element via (our usual CSS &#8220;suspects&#8221;) &#8230;<\/p>\n<ul>\n<li>CSS style property <a target=_blank title='CSS position property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>&#8220;position:absolute&#8221;<\/a><\/li>\n<li>CSS style properties <a target=_blank title='CSS left property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_positioning.asp'>&#8220;left:[X co-ordinate of top left corner]&#8221;<\/a>, <a target=_blank title='CSS top property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_positioning.asp'>&#8220;top:[Y co-ordinate of top left corner]&#8221;<\/a>, <a target=_blank title='CSS width property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_positioning.asp'>&#8220;width:[X range]&#8221;<\/a>, <a target=_blank title='CSS height property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_positioning.asp'>&#8220;height:[Y range]&#8221;<\/a><\/li>\n<li>CSS style property <a target=_blank title='CSS z-index property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>&#8220;z-index:[layer weighting]&#8221;<\/a><\/li>\n<\/ul>\n<p>In order to do this we toggle control from the parent window to the (HTML <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a>) child window via the use of an HTML <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>form<\/a> element whose &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML form tag action property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_form_action.asp'>action<\/a>= property is set to use the same HTML<\/li>\n<li><a target=_blank title='HTML form tag method property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_form_method.asp'>method<\/a>= property is set to &#8216;GET&#8217; (for client-side usage processing)<\/li>\n<li><a target=_blank title='HTML form tag target property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_form_target.asp'>target<\/a>= property is set to be &#8230;\n<ol>\n<li>(HTML iframe) child window &#8230; when we are currently on the (pink) parent window<\/li>\n<li>parent window &#8230; when we are currently on the (orange) (HTML iframe) child window<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>So try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs_test.html\" title='Click picture'>live run<\/a> (now featuring a Numbers Guessing game in the HTML iframe child window incarnations), and peruse the HTML and (internal) Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs_test.html-GETME\" title=\"jswjs_test.html\">jswjs_test.html<\/a> which changed in its makeup from yesterday in this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs_test.html-GETME\" title=\"jswjs_test.html\">way<\/a>.  Hope it helps you understand these concepts.<\/p>\n<hr>\n<p id='jwjpt'>Previous relevant <a target=_blank title='Javascript Writes Javascript Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-writes-javascript-primer-tutorial\/'>Javascript Writes Javascript 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\/HTMLCSS\/jswjs_test.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript Writes Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs.jpg\" title=\"Javascript Writes Javascript Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Writes Javascript Primer Tutorial<\/p><\/div>\n<p>Some days back we discovered a use for PHP writing out PHP, though we readily admit there would have been other ways to achieve the same, or a similar solution, when we presented <a target=_blank title='PHP Writes PHP Vertical TextBoxes Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/'>PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a>.  This set us to thinking a bit about <i>Javascript writing Javascript<\/i>, and yes, we think there may be uses for this, as we do at WordPress 4.1.1 with <a target=_blank title='Javascript Writes Javascript Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-writes-javascript-primer-tutorial\/'>Javascript Writes Javascript Primer Tutorial<\/a>.  However, again, we see that the problem presented today, can be solved in a number of other ways, but just let&#8217;s let the discussion &#8220;stew&#8221; anyway.<\/p>\n<p>On this <i>Javascript writing Javascript<\/i> topic, we found, in practice, three approaches to trying it out (to make something happen (which was to append numbers, of some sort) onto <i>document.title<\/i>) &#8230;<\/p>\n<ol>\n<li>give an HTML script tag in document.head an id=&#8217;myscr&#8217; and later come along and try, a bit before the onload event, to (effectively) &#8230;<br \/>\n<code>document.getElementById('myscr').innerHTML+=' function se' + 'ta() { document.title+=cnt; }  ';<\/code><\/li>\n<li>give an HTML script tag in document.head an id=&#8217;myscr&#8217; and later come along and try, a bit after the onload event, to (effectively) &#8230;<br \/>\n<code>setTimeout(dothing,200); \/\/ where <i>dothing()<\/i> contains same code as for option 1<\/code><\/li>\n<li>use a<br \/>\n<code>document.write('&lt;script&gt; function se' + 'ta() { document.title+=cnt; }  &lt;\/script&lt;');<\/code><br \/>\n statement be given to the Javascript <a target=_blank title='Javascript eval() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval()<\/a> method before the onload event, working off what is supplied via <i>document.URL<\/i> from the web browser address bar<\/li>\n<\/ol>\n<p>So, what do you think happened?<\/p>\n<p>You could try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs_test.html\" title='Click picture'>live run<\/a> and see?!  Or, if you have to run (chortle, chortle), and want a quick answer &#8230; click <a id='myahere' href='#myahere' onclick=\" document.getElementById('whathappened').style.display='block'; \" onmouseover=\" document.getElementById('whathappened').style.display='block'; \">here<\/a>.<\/p>\n<div id='whathappened' style='display:none;'>\n<ol>\n<li>Too Hot &#8230; mission failure &#8230; ie. the &#8216;myscr&#8217; HTML script tag was not recognised before the onload event<\/li>\n<li>Too Cold &#8230; mission failure &#8230; ie. the &#8216;myscr&#8217; HTML script tag was already set in its ways after the onload event, that the cache takes over from any intervention you try to make (but maybe you know how to get around this??!!)<\/li>\n<li>Just Right &#8230; mission success &#8230; ie. the new HTML script tag is appended into document.head and is ready to be recognised when the <b>bold<\/b> bit of code as below is accessed &#8230;<br \/>\n<code><br \/>\nfunction sett() {<br \/>\n  document.title+='x';<br \/>\n  <b>if (typeof seta !== 'undefined') {<br \/>\n   seta();<br \/>\n  }<\/b><br \/>\n  setTimeout(sett, 3000);<br \/>\n} <\/code>\n<\/li>\n<\/ol>\n<\/div>\n<p>We leave you with the HTML and (internal) Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jswjs_test.html_GETME\" title=\"jswjs_test.html\">jswjs_test.html<\/a> to peruse, for further ideas, we hope.<\/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='#d17137' onclick='var dv=document.getElementById(\"d17137\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17137' 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='#d17162' onclick='var dv=document.getElementById(\"d17162\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17162' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Javascript Writes Javascript Primer Tutorial, as shown below, got us started on our Javascript writes Javascript research project. Today we extend that to catering for Javascript writes Javascript within an HTML iframe element, adding to our line of tutorials &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-writes-javascript-iframe-overlay-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":[281,354,452,576,587,652,894,997,1125,1126,1319,1583],"class_list":["post-17162","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-dom","tag-form","tag-html","tag-iframe","tag-javascript","tag-overlay","tag-programming","tag-setinterval","tag-settimeout","tag-tutorial","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17162"}],"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=17162"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17162\/revisions"}],"predecessor-version":[{"id":17170,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17162\/revisions\/17170"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}