{"id":20485,"date":"2016-03-05T03:01:36","date_gmt":"2016-03-04T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20485"},"modified":"2016-03-04T22:51:07","modified_gmt":"2016-03-04T12:51:07","slug":"inter-web-application-communication-tool-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/inter-web-application-communication-tool-iframe-tutorial\/","title":{"rendered":"Inter Web Application Communication Tool Iframe Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Inter Web Application Communication Tool Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/top_documenttitle.jpg\" title=\"Inter Web Application Communication Tool Iframe Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Inter Web Application Communication Tool Iframe Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s work of <a title='Inter Web Application Communication Tool Primer Tutorial' href='#iwactpt'>Inter Web Application Communication Tool Primer Tutorial<\/a> below was all fine and good regarding a start to the use of &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='window.top information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_win_top.asp'>top<\/a>.<a target=_blank title='document.title information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_doc_title.asp'>document.title<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and our &#8220;messaging&#8221; conduit between web applications that took on the form, in our case, of one parent web application housing several HTML iframe child web application processes referencing the same HTML and Javascript software.  That first &#8220;draft&#8221; felt a bit &#8220;supervisory&#8221; heavy, so today we grow some awareness of the HTML iframe web applications to their siblings, via the help of <i>top.document.title<\/i> &#8230; our unifier.<\/p>\n<p>You might get a kick out of a couple of new dropdown options &#8230;<\/p>\n<ol>\n<li>Start the Ball Rolling<\/li>\n<li>Start the Ball Rolling (Name Prompting)<\/li>\n<\/ol>\n<p> &#8230; we add today feeling like &#8220;kludgy&#8221; &#8220;artificial intelligence&#8221;.  We add our &#8220;artificial intelligence&#8221; functionality just to orchestrate a question from one of your conversationalists, to another of the conversationalists, to get the ball rolling, so to speak.<\/p>\n<p>At this start point, of a question, on these new dropdown options, we control the processing by disallowing sibling HTML iframe input type=text interactions for those conversationalists who weren&#8217;t last referenced.<\/p>\n<p>And how do you suppose we know, as a sibling whether we were last referenced?  The last characters of <i>top.document.title<\/i> are scrutinised so that if one of &#8230;<\/p>\n<ol>\n<li>, [SiblingName]?<\/li>\n<li>, [SiblingName].<\/li>\n<\/ol>\n<p> &#8230; is at the end of <i>top.document.title<\/i>, respectively &#8230;<\/p>\n<ol>\n<li>[SiblingName] only is then allowed to enter the next conversation part, and is forced to answer to the other [SiblingName] they received the message from (and a ? prefix off the first question as that conversationalist&#8217;s answer causes the web application to slap in its default answer to the question &#8230; and for this bit of logic we&#8217;d like to thank <a target=_blank title='Useful ink' href='http:\/\/www.quirksmode.org\/js\/associative.html'>this link<\/a> helping with Javascript associative array ideas and the often used Javascript <a target=_blank title='Javascript eval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval<\/a> method we often use at this blog) &#8230; or &#8230;<\/li>\n<li>[SiblingName] only is then allowed to enter the next conversation part<\/li>\n<\/ol>\n<p>We do this with our recently popular Javascript keyboard events <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeyup<\/i><\/a> and <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeydown<\/i><\/a> to enforce any such restrictions, which, by the way, after the initial &#8220;artificial intelligence&#8221; starting phase, a conversationalist can reintroduce by ending their conversation part in one of the appropriate &#8220;fashions&#8221; talked about above.<\/p>\n<p>And so you can see the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html-GETME\" title='onion4co_chalkboard.html'>onion4co_chalkboard.html<\/a> (with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html\" title='Click picture'>live run<\/a> and its changes from yesterday as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html-GETME\" title='onion4co_chalkboard.html'>this link<\/a>).<\/p>\n<hr>\n<p id='iwactpt'>Previous relevant <a target=_blank title='Inter Web Application Communication Tool Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/inter-web-application-communication-tool-primer-tutorial\/'>Inter Web Application Communication Tool 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\/onion4co_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Inter Web Application Communication Tool Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/top_document_title.jpg\" title=\"Inter Web Application Communication Tool Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Inter Web Application Communication Tool Primer Tutorial<\/p><\/div>\n<p>Today we start on a series of ideas making use of a new <i>inter web application<\/i> tool.  Well, it&#8217;s &#8220;new&#8221; in the sense that we haven&#8217;t concentrated on it here at this blog, as of yet.<\/p>\n<p>This new conduit of <i>inter web application<\/i> is not rocket science &#8230; it is the use of &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='window.top information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_win_top.asp'>top<\/a>.<a target=_blank title='document.title information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_doc_title.asp'>document.title<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; da da da da!!<\/p>\n<p>We place this, at the very least, with &#8230;<\/p>\n<ul>\n<li>URL GET parameters via address bar URLs with ? and &#038; parts<\/li>\n<li>HTML form element POST parameters<\/li>\n<li>Server language database usage<\/li>\n<li>Server language file usage<\/li>\n<li>Javascript Ajax (perhaps)<\/li>\n<li>HTML iframe manipulations<\/li>\n<li>Sockets<\/li>\n<li>Server language HTTP cookie manipulations<\/li>\n<\/ul>\n<p> &#8230; in this category of &#8220;aids to <i>inter web application<\/i> communication&#8221;.<\/p>\n<p>The joy of using (Javascript DOM&#8217;s) <i>top.document.title<\/i> is the simplicity of the concept &#8230; just remember &#8220;<i>top.document.title<\/i>&#8221; and you pretty much remember the crux of what the method involves, while the other ideas all have their not so obvious usage issues, we think.<\/p>\n<p>So today we show the use of <i>top.document.title<\/i> as an &#8220;aid to <i>inter web application<\/i> communication&#8221; by imagining a conversation among up to five people and our web application&#8217;s job is twofold &#8230;<\/p>\n<ol>\n<li>we gather the input from each of our conversationalists &#8230; from individual HTML iframe &#8220;prompters&#8221; &#8230; into <i>top.document.title<\/i> &#8230; and we &#8230;<\/li>\n<li>present the conversation as a whole<\/li>\n<\/ol>\n<p>Couple of things here.<\/p>\n<p>It would be justifiable to rail against the use of HTML iframe elements as being too complicated.  But we do this to show the genericity of thinking with the use of <i>top.document.title<\/i> rather than <i>document.title<\/i> or even <i>parent.document.title<\/i> &#8230; to the point where, we don&#8217;t show it today, but we could encase what we show you today within the control of a supervisory &#8220;upper&#8221; parent web application, and a lot of the functionality would not have to change.  It is like <i>top.document.title<\/i> hovers reliably &#8220;above the fray&#8221; hoping to help and piece all the goings on of other parts to the whole, and be a conduit to be able to display that whole &#8220;conversation&#8221;.  Consequently, naming (program) wise, we felt like calling today&#8217;s program <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html_GETME\" title='onion4co_chalkboard.html'>onion4co_chalkboard.html<\/a> (with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html\" title='Click picture'>live run<\/a>) because it had a feeling of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=onions\" title='Onions of the 4th dimension'><i>&#8220;onions of the 4th dimension&#8221;<\/i><\/a> about it.<\/p>\n<p>Secondly, we need to consider (message) length limitations for this idea, which we&#8217;ll get to for later blog postings.<\/p>\n<p>A cute illustration of this is a (less detailed) but relevant HTML\/Javascript client (only) version of <a target=_blank title='Macbeth Act 1 Scene 1' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onion4co_chalkboard.html?num=4&#038;lines=First%20Witch%3A%20When%20shall%20we%20three%20meet%20again.%20%0AIn%20thunder%2C%20lightning%2C%20or%20in%20rain%3F%3BSecond%20Witch%3A%20When%20the%20hurlyburly%60s%20done%2C%20%0AWhen%20the%20battle%60s%20lost%20and%20won.%3BThird%20Witch%3A%20That%20will%20be%20ere%20the%20set%20of%20sun.%3BFirst%20Witch%3A%20Where%20the%20place%3F%3BSecond%20Witch%3A%20Upon%20the%20heath.%3BThird%20Witch%3A%20There%20to%20meet%20with%20Macbeth.%3BFirst%20Witch%3A%20I%20come%2C%20Graymalkin!%3BSecond%20Witch%3A%20Paddock%20calls.%3BThird%20Witch%3A%20Anon.%3BAll%3A%20Fair%20is%20foul%2C%20and%20foul%20is%20fair.%20Hover%20through%20the%20fog%20and%20filthy%20air.%20%5BExeunt%20...'><i>Macbeth Act 1 Scene 1<\/i><\/a> (by <a target=_blank title='Macbeth' href='http:\/\/www.william-shakespeare.info\/shakespeare-play-macbeth.htm'>William Shakespeare<\/a>) like what we did with three server languages when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/apache-centos-webserver-and-the-three-ps-primer-tutorial\/' title='Apache CentOS WebServer and The Three Ps Primer Tutorial'>Apache CentOS WebServer and The Three Ps Primer Tutorial<\/a>.  There, like here, we&#8217;d like to thank &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Background image thanks ... Background image courtesy of Jeff Hitchcock at flickr at https:\/\/www.flickr.com\/photos\/arbron\/66697520\/in\/photolist-5iSphL-6TQRf-5TK2Do-5TMPAn-5TSamJ-5TMPvM-5TMPDt-7CDip-5T2zrS-67g614-5TK2QL-5U1xiu-5UhhUG-5UhhxW-5UhhKs-5Uc8q6-5TN8by-5TEKWn-5TSa2d-5TMZcu-5TdSVN-5TPcPh-5U2QP1-74VJ52-7EaaYg-5TQT1C-5TEKQv-5TQdu3-5Uc8eP-5Ugury-5TKTbr-5UguCC-5TEFZ6-5TK2r7-5UguB5-5TtjkA-5TRfKS-5Uc7J2-6vFC9T-6vKQd9-6TQXQ-abDgmQ-5TSaFq-6TQUC-c8yAH-6TQK3-6TQDJ-3HwkWt-bxZcJo-bxZd55 ... thanks' href='https:\/\/www.flickr.com\/photos\/arbron\/66697520\/in\/photolist-5iSphL-6TQRf-5TK2Do-5TMPAn-5TSamJ-5TMPvM-5TMPDt-7CDip-5T2zrS-67g614-5TK2QL-5U1xiu-5UhhUG-5UhhxW-5UhhKs-5Uc8q6-5TN8by-5TEKWn-5TSa2d-5TMZcu-5TdSVN-5TPcPh-5U2QP1-74VJ52-7EaaYg-5TQT1C-5TEKQv-5TQdu3-5Uc8eP-5Ugury-5TKTbr-5UguCC-5TEFZ6-5TK2r7-5UguB5-5TtjkA-5TRfKS-5Uc7J2-6vFC9T-6vKQd9-6TQXQ-abDgmQ-5TSaFq-6TQUC-c8yAH-6TQK3-6TQDJ-3HwkWt-bxZcJo-bxZd55'>Background Image<\/a><\/li>\n<li><a target=_blank title='Thunder sound' href='http:\/\/soundbible.com\/1907-Thunder.html'>Thunder sound<\/a><\/li>\n<li><a target=_blank title='MP3 to OGG sound conversion ... thanks' href='http:\/\/www.online-convert.com\/'>Free MP3 to OGG Audio Conversion<\/a><\/li>\n<\/ul>\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='#d20464' onclick='var dv=document.getElementById(\"d20464\"); 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='d20464' 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='#d20485' onclick='var dv=document.getElementById(\"d20485\"); 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='d20485' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s work of Inter Web Application Communication Tool Primer Tutorial below was all fine and good regarding a start to the use of &#8230; top.document.title &#8230; and our &#8220;messaging&#8221; conduit between web applications that took on the form, in our &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/inter-web-application-communication-tool-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":[1818,1819,1709,1816,354,399,576,587,652,673,1817,775,1705,1812,997,1815,1319,1402],"class_list":["post-20485","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-artificial-intelligence","tag-associative-array","tag-communication","tag-document-title","tag-dom","tag-eval","tag-html","tag-iframe","tag-javascript","tag-keyboard","tag-message","tag-messaging","tag-onkeydown","tag-onkeyup","tag-programming","tag-top-document-title","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20485"}],"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=20485"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20485\/revisions"}],"predecessor-version":[{"id":20492,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20485\/revisions\/20492"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}