{"id":70283,"date":"2025-10-26T03:01:00","date_gmt":"2025-10-25T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=70283"},"modified":"2025-10-26T07:40:14","modified_gmt":"2025-10-25T21:40:14","slug":"iframe-hashtag-calling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/iframe-hashtag-calling-tutorial\/","title":{"rendered":"Iframe Hashtag Calling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/calling_iframe.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Iframe Hashtag Calling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parent_calling_iframe.png\" title=\"Iframe Hashtag Calling Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Iframe Hashtag Calling Tutorial<\/p><\/div>\n<p>Hashtag usage in the webpage navigation aspects of web browser web applications we find more and more appealing around here &#8230;<\/p>\n<ul>\n<li>the far more generous hashtag allowances for lengthy URLs where it comes to links off emails (via &#8220;a&#8221; mailto: links) or SMS (via &#8220;a&#8221; sms: link) messages allows us an alternative to an RJM Programming mail server usage &#8230;<\/li>\n<li>the hashtag usage can mean information can be passed &#8230;<br \/>\n<code><br \/>\n  var waconto=null, aconto=null, okay=false;<br \/>\n<br \/>\n  function checkif(iois) {  \/\/ <font color=blue>called via<\/font> &lt;iframe style='width:95%;height:400px;background-color:yellow;' frameborder=1 <font color=blue>onload='checkif(this);' <\/font>id=myif src='.\/calling_iframe.html?iam=called#Hello'&gt;&lt;\/iframe&gt;<br \/>\n    waconto = (iois.contentWindow || iois.contentDocument);   \/\/ iframe window reference<br \/>\n    if (waconto != null) {<br \/>\n       if (waconto.document) { aconto = waconto.document; }   \/\/ iframe window document reference<br \/>\n       if (aconto.body != null) {<br \/>\n         okay=true;<br \/>\n         setInterval(dodts, 1000);<br \/>\n         waconto.title='Child Iframe Called by Parent via Hashtag - RJM Programming - October, 2025';<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function sendit(ino) {<br \/>\n    if (ino.value != '') {<br \/>\n       if (okay) {<br \/>\n         waconto.location.hash=encodeURIComponent(ino.value);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function dodts() {<br \/>\n   aconto.getElementById('dts').innerHTML=('' + new Date());<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; from one webpage window to another (where an iframe element, or popup, can be one of these windows) without webpage reloads (as long as <a target=\"_blank\" title='Javascript window.location.hash information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_loc_hash.asp' rel=\"noopener\">location.hash<\/a> Javascript DOM &#8220;smarts&#8221; &#8230;<br \/>\n<code><br \/>\n  function checkw() {<br \/>\n    if (('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'').replace(\/^\\#\/g,'') != '') {<br \/>\n      if (lastino != decodeURIComponent(('' + location.hash).replace(\/^\\#\/g,''))) {<br \/>\n        lastino=decodeURIComponent(('' + location.hash).replace(\/^\\#\/g,''));<br \/>\n        document.getElementById('result').innerHTML='&lt;br&gt;&lt;br&gt;Child Iframe loaded at &lt;span id=loadat&gt;' + ('' + new Date()) + '<\/span>&lt;br&gt;&lt;br&gt;Child Iframe reloaded at &lt;span id=reloadat&gt;N\/A&lt;\/span&gt;&lt;br&gt;&lt;br&gt;Parent message is ...&lt;br&gt;&lt;textarea style=width:95%; value=\"' + lastino + '\" rows=6 title=\"Parent message\" id=outta&gt;&lt;\/textarea&gt;';<br \/>\n        \/\/while (lastino.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n        \/\/  lastino=lastino.replace(String.fromCharCode(10), '&lt;br&gt;');<br \/>\n        \/\/}<br \/>\n        document.getElementById('outta').value=lastino;<br \/>\n      }<br \/>\n    }<br \/>\n    setTimeout(checkw, 1000);<br \/>\n  }<br \/>\n  <br \/>\n  if (window.parent.parent) {<br \/>\n     setTimeout(checkw, 1000);<br \/>\n  } else if (window.parent) {<br \/>\n   if (window.self != window.parent && parent.document.URL.indexOf('\/ITblog') == -1) {<br \/>\n     setTimeout(checkw, 1000);<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; are written into the child window&#8217;s Javascript logic to check for any changes to location.hash (ie. hashtag information) relevant to that child window, presumably called that way by a parent supervising window)<\/li>\n<\/ul>\n<p> &#8230; and, believe it or not, we cannot recall using hashtagging as that conduit, hence the relatively short tutorial title today we&#8217;re surmising <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=_vcXp9SM_MQ' rel=\"noopener\">can definitely fit on a pinhead<\/a> <font size=1>(but don&#8217;t ask <i>us<\/i> to do it)<\/font>!<\/p>\n<p>We packaged our proof of concept application of this idea into a single dual purpose &#8220;parent&#8221; and &#8220;child&#8221; serving webpage <font size=1>(and you can unscramble this via double clicks in the separated colour coded webpage body parts, to reconstitute elsewhere, perhaps)<\/font>, via Javascript <a target=\"_blank\" title='Document.write method information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_output.asp' rel=\"noopener\">document.write<\/a> usage <font size=1>(but please be aware document.write is discouraged)<\/font> in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/calling_iframe.html_GETME\" rel=\"noopener\">our &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/calling_iframe.html\" rel=\"noopener\">Parent Calling Iframe via Hashtagging<\/a> web application you can also try below &#8230;<\/p>\n<p><iframe src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/calling_iframe.html' style=\"width:100%;height:800px;\"><\/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='#d70283' onclick='var dv=document.getElementById(\"d70283\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d70283' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hashtag usage in the webpage navigation aspects of web browser web applications we find more and more appealing around here &#8230; the far more generous hashtag allowances for lengthy URLs where it comes to links off emails (via &#8220;a&#8221; mailto: &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/iframe-hashtag-calling-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":[181,3913,4377,2525,3136,354,2229,3961,5308,564,576,587,652,1817,775,830,2411,997,1262,1319,1418],"class_list":["post-70283","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-call","tag-called","tag-calling","tag-child","tag-conduit","tag-dom","tag-hash","tag-hashtagging","tag-hastag","tag-hierarchy","tag-html","tag-iframe","tag-javascript","tag-message","tag-messaging","tag-navigation","tag-parent","tag-programming","tag-textarea","tag-tutorial","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70283"}],"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=70283"}],"version-history":[{"count":17,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70283\/revisions"}],"predecessor-version":[{"id":70303,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70283\/revisions\/70303"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=70283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=70283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=70283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}