{"id":17058,"date":"2015-09-09T05:01:01","date_gmt":"2015-09-08T19:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17058"},"modified":"2016-02-08T18:23:38","modified_gmt":"2016-02-08T08:23:38","slug":"htmljavascript-slotting-in-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-iframe-tutorial\/","title":{"rendered":"HTML\/Javascript Slotting In Iframe Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin-172of.jpg\" title=\"HTML\/Javascript Slotting In Iframe Tutorial\" id='iosi' onmouseover=\"  this.src=this.src.replace('166of.j','167of.xj').replace('167of.j','168of.xj').replace('168of.j','169of.xj').replace('169of.j','170of.xj').replace('170of.j','171of.xj').replace('171of.j','172of.xj').replace('172of.j','173of.xj').replace('173of.j','166of.xj').replace('.xj','.j');  \" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Iframe Tutorial<\/p><\/div>\n<p>Okay, so we&#8217;ve come enough of a full circle to not be too dizzy, and to be able to show you a bit more to the &#8220;slotting in&#8221; concept of a couple of days ago, now that, yesterday, you saw how an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element can be a child to a normal everyday run-of-the-mill average so-so &#8230; okaaaayyy already! &#8230; HTML webpage parent, who is pretty much part of the crowd if you know what <font size=2>we of the usual crowd<\/font> <font size=1>mean.<\/font><\/p>\n<p>So, today, with no PHP tricks up the left sleeve and no handkerchiefs up the right sleeve, and definitely no Ajax cleaning products up the middle sleeve, we allow you (on this rjmprogramming.com.au) to pluck out HTML elements from one webpage, and be able to place them dynamically and position them on the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> webpage, building on <a target=_blank title='HTML\/Javascript Slotting In Follow Up Tutorial' href='#hjsifut'>HTML\/Javascript Slotting In Follow Up Tutorial<\/a> as shown below.<\/p>\n<p>Some issues surprise piecing this functionality together, when you involve real web data &#8230; that is a thing about programming &#8230; there is a big surprising phase of the programming\/unit testing phase when you let it loose on some real web data, where you should factor in &#8220;surprise time&#8221; &#8230; and we &#8220;kludged&#8221; somewhat for &#8230;<\/p>\n<ul>\n<li>CSS style position:absolute; &#8230; we &#8220;kludged&#8221; to position:relative; &#8230; no, we didn&#8217;t do position:second-cousin-twice-removed;<\/li>\n<li>we avoided &#8220;too simple&#8221; HTML elements not involving a blank of some sort (eg. &lt;br&gt;) &#8230; telling them apart would involve more work, which we didn&#8217;t do<\/li>\n<li>we did an initial <i>setTimeout(andthen, 2000);<\/i> approach to making the &#8220;connection&#8221; to the HTML iframe element, but found that, in the real world, you need to cater for slower scenarios and &#8220;wait&#8221; for &#8220;yf.body&#8221; &#8230; in that similar way to <a target=_blank title='Javascript DOM Big Changes Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-big-changes-iframe-tutorial\/'>Javascript DOM Big Changes Iframe Tutorial<\/a>&#8216;s (of yesterday) &#8220;yf.body&#8221; was not null &#8230; as per &#8230;<br \/>\n<code><br \/>\nfunction andthen() {<br \/>\n    xf = document.getElementById(\"myiframe\");<br \/>\n    yf = (xf.contentWindow || xf.contentDocument);<br \/>\n    if (yf.document) { yf = yf.document; }<br \/>\n    if (yf.body == null) {<br \/>\n    setTimeout(andthen, 2000);<br \/>\n    } else {<br \/>\n    fillarrays(encodeURIComponent(yf.body.innerHTML));<br \/>\n    }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>we didn&#8217;t try a drag and drop approach (which we may or may not try one day &#8230; again, mobile platforms present problems here)<\/li>\n<li>how good\n<p><i> var blah=window.open(&#8220;&#8221;, &#8220;_blank&#8221;, &#8220;top=100,left=100,width=400,height=400&#8221;);<br \/> blah.document.write([someHTML]);<\/i><\/p>\n<p> is as a way to display an HTML element &#8230; but, sadly, not so apt in the mobile platform space<\/li>\n<\/ul>\n<p>Behind today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html--GETME\" title='slotin.html'>slotin.html<\/a> which improved in functionality a couple of days ago via these <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html--GETME\" title='slotin.html'>changes<\/a>.  You will do best &#8220;connecting the dots&#8221; to the &#8220;iframe dash&#8221; by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> and seeing how this web application works.<\/p>\n<hr>\n<p id='hjsifut'>Previous relevant <a target=_blank title='HTML\/Javascript Slotting In Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-follow-up-tutorial\/'>HTML\/Javascript Slotting In Follow Up 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\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotting_in.gif\" title=\"HTML\/Javascript Slotting In Follow Up Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Follow Up Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='HTML\/Javascript Slotting In Primer Tutorial' href='#hjsipt'>HTML\/Javascript Slotting In Primer Tutorial<\/a> as shown below, got the ball rolling for our generic &#8220;slotting in&#8221; HTML element web application based around <a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>HTML DOM innerHTML property<\/a> program logic.<\/p>\n<p>The work yesterday was a start but the &#8220;slotting in&#8221; was pretty non-specific by nature, and in describing it in a dropdown (HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element) we describe it as <i>&#8220;Nearby&#8221;<\/i> &#8230; but what if you want to place the new HTML element <i>&#8220;Before&#8221;<\/i> or <i>&#8220;After&#8221;<\/i>?   Today&#8217;s work goes towards improving the program logic, with this more precise functionality in mind.<\/p>\n<p>We need Javascript <a target=_blank title='Javascript Array object information' href='http:\/\/www.ecma-international.org\/ecma-262\/5.1\/#sec-15.4'>Array<\/a> objects to get this going, and you may remember us discussing this with <a target=_blank title='Javascript Array List of Functionality Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-array-list-of-functionality-primer-tutorial\/'>Javascript Array List of Functionality Primer Tutorial<\/a> in previous times.<\/p>\n<p>Behind today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html-GETME\" title='slotin.html'>slotin.html<\/a> which improved in functionality from yesterday via these <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html-GETME\" title='slotin.html'>changes<\/a>.  You will do best &#8220;connecting the dots&#8221; by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> and seeing how this web application works.<\/p>\n<hr>\n<p id='hjsipt'>Previous relevant <a target=_blank title='HTML\/Javascript Slotting In Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-primer-tutorial\/'>HTML\/Javascript Slotting In 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\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotting_in.jpg\" title=\"HTML\/Javascript Slotting In Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Wordpress Posted On CSS Styling Following You Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-posted-on-css-styling-following-you-tutorial\/'>WordPress Posted On CSS Styling Following You Tutorial<\/a> set us to thinking about a generic web application to slot in HTML elements into existing web pages.  There are ways, again, with Javascript DOM to do with nodes and hierarchical child and parent HTML element relationships that may do the job, but we opted to concentrate (with Javascript DOM) on the <a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>HTML DOM innerHTML property<\/a>, and nag away at its endless uses, it seems to us.  This property is truly amazingly useful.<\/p>\n<p>As your HTML knowledge has progressed you have no doubt come across HTML elements where the <i>innerHTML<\/i> property is not defined, the one springing to mind being the HTML <a target=_blank title='HTML input tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_input.asp'>input<\/a> element.  They are ones not needing a <i>&lt;\/[tagName]&gt;<\/i> type of closing arrangement.  Our web application, today, still attempts to be able to allow a <i>&#8220;slotting in&#8221;<\/i> even for these, if they have a defined ID= that is.  So how is this done?  Well, <i>innerHTML<\/i> is not only defined for those &#8220;smaller&#8221; sized HTML element arrangements, but it also makes sense for &#8230;<\/p>\n<ul>\n<li>body &#8230; as in document.body.innerHTML &#8230; and do you remember? &#8230;<\/li>\n<li>head &#8230; as in document.head.innerHTML &#8230; and the use of this in <a target=_blank title='HTML\/Javascript Vertical Buttons Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-vertical-buttons-primer-tutorial\/'>HTML\/Javascript Vertical Buttons Primer Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; so we make use of that document.body.innerHTML to slot our new HTML element in front of <i>&lt;[document.getElementById([theID]).tagName] ID=&#8221;[theID]&#8221;<\/i> to make this happen.<\/p>\n<p>What else comes into play today?  One thing that we hadn&#8217;t had to resort to much in the past was the <a target=_blank title='HTMLCollection interface information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCollection'>HTMLCollection<\/a> interface whose friendliness with the return (array) of <i>document.getElementsByTagName([tagName])<\/i> was invaluable.<\/p>\n<p>So all this is all about Javascript DOM and web application client logic, and it may seem a bit of a dry subject at first glance, but, really, it is a thing that is best placed (and understood) in practice, and that is what you should do &#8230; practice with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a>.<\/p>\n<p>Behind this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html_GETME\" title='slotin.html'>slotin.html<\/a> and we&#8217;ll leave you with the crucial generic Javascript functionality that makes this functionality work &#8230;<\/p>\n<p><code><br \/>\nfunction slotthisin(placedhtml, intowhat) {<br \/>\n var ispot=0, lastbit=\"\";<br \/>\n if (typeof intowhat === 'undefined') {<br \/>\n  document.body.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n } else if (typeof intowhat === 'object') {<br \/>\n  if (typeof intowhat.length === 'undefined') {<br \/>\n   if (intowhat.innerHTML != \"\") {<br \/>\n     if (intowhat.tagName != 'A') {<br \/>\n      intowhat.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.innerHTML + \"&lt;\/a&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + \"&lt;\/a&gt;\", intowhat.innerHTML + \"&lt;\/a&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.innerHTML + \"&lt;\/A&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + \"&lt;\/A&gt;\", intowhat.innerHTML + \"&lt;\/A&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     }<br \/>\n   } else if (document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.tagName.toUpperCase() + ' ID=\"' + intowhat.id.toUpperCase() + '\"') != -1) {<br \/>\n     ispot=document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.tagName.toUpperCase() + ' ID=\"' + intowhat.id.toUpperCase() + '\"');<br \/>\n     lastbit=document.body.innerHTML.substring(ispot);<br \/>\n     document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;<br \/>\n   }<br \/>\n  } else {<br \/>\n   for (var ii=0; ii&lt;intowhat.length; ii++) {<br \/>\n    if (intowhat.item(ii).innerHTML != \"\") {<br \/>\n     if (intowhat.item(ii).tagName != 'A') {<br \/>\n      intowhat.item(ii).innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\", intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\", intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     }<br \/>\n    } else if (intowhat.item(ii).id) {<br \/>\n     if (intowhat.item(ii).id != '') {<br \/>\n      if (document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.item(ii).tagName.toUpperCase() + ' ID=\"' + intowhat.item(ii).id.toUpperCase() + '\"') != -1) {<br \/>\n       ispot=document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.item(ii).tagName.toUpperCase() + ' ID=\"' + intowhat.item(ii).id.toUpperCase() + '\"');<br \/>\n       lastbit=document.body.innerHTML.substring(ispot);<br \/>\n       document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n } else if (intowhat != \"\") {<br \/>\n  slotthisin(placedhtml.replace('[action]', '[' + raction + ']'), document.getElementById(intowhat));<br \/>\n } else {<br \/>\n  document.body.innerHTML=placedhtml.replace('[action]', '[' + raction + ']') + document.body.innerHTML;<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/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='#d16986' onclick='var dv=document.getElementById(\"d16986\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16986' 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='#d16998' onclick='var dv=document.getElementById(\"d16998\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=array\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16998' 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='#d17058' onclick='var dv=document.getElementById(\"d17058\"); 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='d17058' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Okay, so we&#8217;ve come enough of a full circle to not be too dizzy, and to be able to show you a bit more to the &#8220;slotting in&#8221; concept of a couple of days ago, now that, yesterday, you saw &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-iframe-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":[103,1596,354,576,1681,587,1525,652,997,1319],"class_list":["post-17058","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-document-body-innerhtml","tag-dom","tag-html","tag-htmlcollection","tag-iframe","tag-innerhtml","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17058"}],"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=17058"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17058\/revisions"}],"predecessor-version":[{"id":20056,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17058\/revisions\/20056"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}