{"id":48917,"date":"2020-05-06T03:01:23","date_gmt":"2020-05-05T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48917"},"modified":"2020-05-09T09:20:04","modified_gmt":"2020-05-08T23:20:04","slug":"top-location-href-troubleshooting-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/top-location-href-troubleshooting-tutorial\/","title":{"rendered":"Top Location Href Troubleshooting Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Top Location Href Troubleshooting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/top_location_href_nono.gif\" title=\"Top Location Href Troubleshooting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Top Location Href Troubleshooting Tutorial<\/p><\/div>\n<p>We have found with grandparent\/parent\/child modelled web applications, it might come back to bite you if you are not careful.<\/p>\n<p>This sprung to mind in the way the two most recent WordPress blog postings (here) like yesterday&#8217;s <a target=_blank title='Mobile Feedback Annotation Image Camera Capture Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-feedback-annotation-image-camera-capture-tutorial\/?rand=17856432'>Mobile Feedback Annotation Image Camera Capture Tutorial<\/a> would load okay but soon after, would hashtag navigate to well down this blog posting&#8217;s webpage, lobbing around our suspicion as to the source of the problem, as per &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe id='notsmooth' src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=maybe' title='Word Search'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; causing us to first scour that &#8220;feedback.htm&#8221; regarding hashtag navigation, that being codelines which involve <i>location.href=&#8217;#[idOfHTMLelement]&#8217;;<\/i> &#8230; spoiler alert &#8230; nothing suspicious <font color=blue>(but please see the next Saturday&#8217;s Stop Press)<\/font>.   But then we thought &#8230; <\/p>\n<blockquote><p>\nBut what about &#8220;grandparent\/parent\/child&#8221; modelled web applications <font size=1>&#8230; eh wot, guv&#8217;<\/font>?\n<\/p><\/blockquote>\n<p> &#8230; where you can have any\/all of &#8230;<\/p>\n<ul>\n<li><i>location.href=&#8217;#[idOfHTMLelement]&#8217;;<\/i><\/li>\n<li><i>parent.location.href=&#8217;#[idOfHTMLelement]&#8217;;<\/i><\/li>\n<li><i>top.parent.location.href=&#8217;#[idOfHTMLelement]&#8217;;<\/i><\/li>\n<\/ul>\n<p> &#8230; and so the way to a solution came from us going to macOS Terminal application&#8217;s command line into our usual coding place <font color=blue>and typing<\/font> &#8230;<\/p>\n<p><code><br \/>\nusers-mbp:htdocs user$ <font color=blue>fgrep '.location.href' *.html<\/font><br \/>\n<\/code> <\/p>\n<p> &#8230; tweaking our memory that the &#8220;fairy_assistant_story.html&#8221; (as one of the codefiles found) is called by (&#8220;parent&#8221;) &#8220;feedback.htm&#8221; (as one of its iframe &#8220;child&#8221; elements), and so a suspect for our &#8220;testing phase of code changes&#8221;.<\/p>\n<p>We guess the moral of today&#8217;s story (where our suspicion came to pass, as a future solution) revolving around a lazy programmatic approach (but forgivable in the sense that you would have to think outside the box at the time of coding) that immediately thinks <i>top.location.href=&#8217;#[idOfHTMLelement]&#8217;;<\/i> (going straight up to the webpage of the address bar of a web browser) will be a good idea, and a complete solution (which often, it will be).  However, what about if we &#8220;iframe&#8221; an example execution into a blog posting into the future to allow a user to try something out for themselves, at a future date?  That action may add the &#8220;grandparent\/&#8221; into &#8220;grandparent\/parent\/child&#8221; and mean &#8220;top.document&#8221; starts pointing at a web application not much to do with the &#8220;child&#8221; (hard working duck paddling) web application&#8217;s logic, and accidentally we are leaning on the &#8220;lateral vision&#8221; that coder of the &#8220;child&#8221; web application had at the time of coding.  To cut a long story short, would they have thought of <font color=blue>the blue<\/font> &#8220;future care&#8221; elements to the code<font color=olive>line<\/font> snippet below (that represents today&#8217;s fixed scenario) &#8230;<\/p>\n<p><code><br \/>\nfunction checkioq(iois) {<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n   try {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     var xemojicont=aconto.body.innerHTML;<br \/>\n     if (xemojicont.length &gt; 0) {<br \/>\n     <font color=blue>if (top.document.URL.replace('\/ITblog','\/wordpress').indexOf('\/wordpress') == -1) {<\/font><br \/>\n     <font color=olive>top.location.href=document.URL.split('#')[0].split('?')[0].replace(\/^\\\/\\\/\/g,'http:').replace('.html','.php').replace('.htm','.php'); \/\/.replace('http:','https:');<\/font><br \/>\n     <font color=blue>} else if (top.document != parent.document) {<br \/>\n     parent.location.href=document.URL.split('#')[0].split('?')[0].replace(\/^\\\/\\\/\/g,'http:').replace('.html','.php').replace('.htm','.php'); \/\/.replace('http:','https:');<br \/>\n     }<\/font><br \/>\n     } else {<br \/>\n     document.getElementById('topdetails').setAttribute(\"open\");<br \/>\n     }<br \/>\n   } catch(eee) {<br \/>\n     document.getElementById('topdetails').setAttribute(\"open\");<br \/>\n   }<br \/>\n   } else {<br \/>\n     document.getElementById('topdetails').setAttribute(\"open\");<br \/>\n   }<br \/>\n  } else {<br \/>\n     document.getElementById('topdetails').setAttribute(\"open\");<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>?  And so we come to the solution to the WordPress Blog Posting annoying hashtagging (coming to an end at about 5th May 2020 10:30 AEST and not involving any change to WordPress Blog Posting content <font size=1>(except, perhaps, that the cache would have to be bypassed if you have already visited the affected blog postings beforehand)<\/font>) via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html----GETME\" title=\"fairy_story_assistant.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html----GETME\" title=\"fairy_story_assistant.html\">fairy_story_assistant.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html\" title=\"Click picture\">live run<\/a> link (where there is not much resemblance to the problem at hand, and so a lesson in &#8220;context&#8221; in that &#8220;grandparent\/parent\/child&#8221; layered web application model).<\/p>\n<p><b><i><font color=blue>Stop Press<\/font><\/i><\/b><\/p>\n<p><font color=blue>But relooking at feedback.htm the next Saturday the change from &#8230;<\/p>\n<p><code><br \/>\ndocument.write(\"&lt;td id='emojis' style='vertical-align:top;border-top:4px solid red;border-left:4px solid red;border-right:4px solid red; float:left; height:200px; -webkit-overflow-scrolling:touch;overflow:hidden; align: top;'&gt;&lt;iframe style='height:200px;' name='emojis' id='emojis' src='\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php#myh3'&gt;&lt;\/iframe&gt;&lt;\/td&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; to &#8230;<\/p>\n<p><code><br \/>\ndocument.write(\"&lt;td id='emojis' style='vertical-align:top;border-top:4px solid red;border-left:4px solid red;border-right:4px solid red; float:left; height:200px; -webkit-overflow-scrolling:touch;overflow:hidden; align: top;'&gt;&lt;iframe style='height:200px;' name='emojis' id='emojis' src='\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php'&gt;&lt;\/iframe&gt;&lt;\/td&gt;\");  \/\/ #myh3<br \/>\n<\/code><\/p>\n<p> &#8230; has helped.<\/font><\/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='#d48917' onclick='var dv=document.getElementById(\"d48917\"); 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='d48917' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We have found with grandparent\/parent\/child modelled web applications, it might come back to bite you if you are not careful. This sprung to mind in the way the two most recent WordPress blog postings (here) like yesterday&#8217;s Mobile Feedback Annotation &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/top-location-href-troubleshooting-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,37],"tags":[1669,177,2525,349,354,3008,557,576,2716,652,1663,2411,997,1200,1292,1319,1404,1418,1583,1432],"class_list":["post-48917","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-address-bar","tag-cache","tag-child","tag-document","tag-dom","tag-grandparent","tag-hashtag","tag-html","tag-inherit","tag-javascript","tag-model","tag-parent","tag-programming","tag-stop-press","tag-top","tag-tutorial","tag-web-browser","tag-webpage","tag-window","tag-window-location"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48917"}],"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=48917"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48917\/revisions"}],"predecessor-version":[{"id":48968,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48917\/revisions\/48968"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}