{"id":65743,"date":"2024-11-27T03:01:00","date_gmt":"2024-11-26T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65743"},"modified":"2024-11-27T12:20:00","modified_gmt":"2024-11-27T02:20:00","slug":"webpage-before-onload-event-client-server-report-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/webpage-before-onload-event-client-server-report-tutorial\/","title":{"rendered":"Webpage Before Onload Event Client Server Report Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Webpage Before Onload Event Client Server Report Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.png?jhgkjh=jhb\" title=\"Webpage Before Onload Event Client Server Report Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Before Onload Event Client Server Report Tutorial<\/p><\/div>\n<p>And so, today, we expose all the fun we&#8217;ve been having running an Apache\/PHP\/MySql web server where both &#8230;<\/p>\n<ul>\n<li>HTML and Javascript and CSS &#8230; on the clientside of yesterday&#8217;s <a title='Webpage Before Onload Event Report Tutorial' href='#wboert'>Webpage Before Onload Event Report Tutorial<\/a> &#8230; can get backed up by &#8230;<\/li>\n<li>PHP &#8230; on the serverside<\/li>\n<\/ul>\n<p> &#8230; as they feature in the webpage creation paradigm.  And it&#8217;s not always PHP &#8230; we like <a target=\"_blank\" title=\"The Three P's\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=The+Three+P' rel=\"noopener\">The Three P&#8217;s<\/a> &#8230; <a target=\"_blank\" title='PHP' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/PHP' rel=\"noopener\">PHP<\/a> and <a target=\"_blank\" title='Python' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/Python' rel=\"noopener\">Python<\/a> and <a target=\"_blank\" title='Perl' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/Perl' rel=\"noopener\">Perl<\/a> all there installed on our AlmaLinux RJM Programming domain web server.<\/p>\n<p>Us adding in new <font size=1>(in order)<\/font> &#8230;<\/p>\n<ol>\n<li>Serverside settings &#8230; augmenting, and preceding (in time) &#8230;<\/li>\n<li>Clientside findings<\/li>\n<\/ol>\n<p> &#8230; shows this fuller picture, the whole of &#8220;Serverside settings&#8221; happening before any webpage document.body onload event.  Yes, that serverside is optional, and many a great website makes no reference to serverside anything, except in the sense of where it lives, which is a web server, somewhere out there in Internet Land.<\/p>\n<p>But it&#8217;s not as much fun ignoring these serverside aspects to what&#8217;s possible.  Think database, then you need serverside, just as one example.<\/p>\n<p>And this is why PHP and Javascript are such a great combination.  PHP &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$results=\"\";<br \/>\n$plus=\"\";<br \/>\n<br \/>\nforeach ($_GET as $name =&gt; $val) {<br \/>\n    if ($results == \"\") {<br \/>\n      $plus=\"+\";<br \/>\n      $results=\"&lt;br&gt;&lt;br&gt;Serverside settings:&lt;br&gt;&lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SERVER_PORT']=\\\"\" . $_SERVER['SERVER_PORT'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SERVER_NAME']=\\\"\" . $_SERVER['SERVER_NAME'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SCRIPT_FILENAME']=\\\"\" . $_SERVER['SCRIPT_FILENAME'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['REQUEST_URI']=\\\"\" . $_SERVER['REQUEST_URI'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['QUERY_STRING']=\\\"\" . $_SERVER['QUERY_STRING'] . \"\\\"; &lt;br&gt;\";<br \/>\n    }<br \/>\n    $results.=\"$\" . \"_GET['\" . $name . \"']=\\\"\" . str_replace('+',' ',urldecode($val)) . \"\\\"; &lt;br&gt;\";<br \/>\n}<br \/>\n<br \/>\nforeach ($_POST as $name =&gt; $val) {<br \/>\n    if ($results == \"\") {<br \/>\n      $plus=\"+\";<br \/>\n      $results=\"&lt;br&gt;&lt;br&gt;Serverside settings:&lt;br&gt;&lt;br&gt;\";<br \/>\n      if (strpos($results, \"REQUEST_URI\") === false) {<br \/>\n      $results.=\"$\" . \"_SERVER['SERVER_PORT']=\\\"\" . $_SERVER['SERVER_PORT'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SERVER_NAME']=\\\"\" . $_SERVER['SERVER_NAME'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SCRIPT_FILENAME']=\\\"\" . $_SERVER['SCRIPT_FILENAME'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['REQUEST_URI']=\\\"\" . $_SERVER['REQUEST_URI'] . \"\\\"; &lt;br&gt;\";<br \/>\n      }<br \/>\n    }<br \/>\n    $results.=\"$\" . \"_POST['\" . $name . \"']=\\\"\" . str_replace('+',' ',urldecode($val)) . \"\\\"; &lt;br&gt;\";<br \/>\n}<br \/>\n<br \/>\nif ($results == \"\") {<br \/>\n      $results=\"&lt;br&gt;&lt;br&gt;Serverside settings:&lt;br&gt;&lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SERVER_PORT']=\\\"\" . $_SERVER['SERVER_PORT'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SERVER_NAME']=\\\"\" . $_SERVER['SERVER_NAME'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['SCRIPT_FILENAME']=\\\"\" . $_SERVER['SCRIPT_FILENAME'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $results.=\"$\" . \"_SERVER['REQUEST_URI']=\\\"\" . $_SERVER['REQUEST_URI'] . \"\\\"; &lt;br&gt;\";<br \/>\n      $plus=\"+\";<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; can go around and <i>infill<\/i> Javascript, used <font size=1>(<a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">ie.<\/a> infilled)<\/font> here &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n    var clientstuff=\\\"<i>\" . str_replace('\"','\" + String.fromCharCode(34) + \"', $results) . \"<\/i>\\\";<br \/>\n    clientstuff+='&lt;br&gt;&lt;br&gt;&lt;br&gt;ClientSide findings:&lt;br&gt;&lt;br&gt;';<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/before_document_onload.php-GETME\" rel=\"noopener\">the tweaked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.php-GETME\" rel=\"noopener\">before_document_onload.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.php\" rel=\"noopener\">PHP web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-before-onload-event-client-server-report-tutorial\/' rel=\"noopener\">Webpage Before Onload Event Client Server Report Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wboert'>Previous relevant <a target=\"_blank\" title='Webpage Before Onload Event Report Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-before-onload-event-report-tutorial\/' rel=\"noopener\">Webpage Before Onload Event Report Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Webpage Before Onload Event Report Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.jpg\" title=\"Webpage Before Onload Event Report Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Before Onload Event Report Tutorial<\/p><\/div>\n<p>Although Javascript DOM used on the clientside of webpage production online thrives after the document.body <i>onload<\/i> event, we&#8217;ve been finding, especially regarding hashtag usage, more and more uses even before the document.body <i>onload<\/i> event.  Why this interest?<\/p>\n<ol>\n<li>the earlier you glean information the easier it is to mould the webpage data you create, as a programmer &#8230;<\/li>\n<li>personally, the reason for our interest in this mini project was to do with a webpage navigation idea we wondered about &#8230;<br \/>\n<blockquote><p>\nSupposing <a target=\"_blank\" title='Information about document.referrer' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/referrer' rel=\"noopener\">document.referrer<\/a> contained hashtag data it could mean there is a new way to share data between same domain webpages in a navigation chain.<br \/>\n<\/bnlockquote>\n<\/ol>\n<p> &#8230; but our <i>document.referrer<\/i> work here (and we did some at <a title='Webpage Vertical Position Return Content Tutorial' href='#wvprct'>Webpage Vertical Position Return Content Tutorial<\/a> as well) showed &#8230;<\/p>\n<ul>\n<li>document.referrer has become less and less reliable with web browsers over the years &#8230;<\/li>\n<li>now sometimes relying on real user button clicks to be populated &#8230; and &#8230; saddest of all &#8230;<\/li>\n<li>never contains <i>location.hash<\/i> hashtag data the way <i>document.URL<\/i> can<\/li>\n<\/ul>\n<p>Oh, well!  Never mind, there is a lot more to consider with this clientside only (so far) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.php_GETME\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/before_document_onload.php\" rel=\"noopener\">PHP web application<\/a>.  Why PHP for a clientside web application?  Well, HTML is a subset of PHP, to our mind.  In fact, just HTML content can be plonked as the content of a nominally <i>.php<\/i> named webfile and perform the same <font size=1>(<a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">ie.<\/a> regarding a web server, at the other end, supporting PHP such as, locally, a <a target=\"_blank\" title='MAMP' href='http:\/\/www.mamp.info' rel=\"noopener\">MAMP<\/a> Apache\/PHP\/MySql one or the AlmaLinux one up at the RJM Programming domain)<\/font>.  We&#8217;re using PHP so as to move on tomorrow to show the serverside of a webpage creation potential workflow.<\/p>\n<p>Try it out to see a bit of what is possible for four navigational concepts &#8230;<\/p>\n<ol>\n<li>form method=GET action=[here&#8217;sLookingAtYouKid] address bar URLs<\/li>\n<li>form method=POST action=[here&#8217;sLookingAtYouKid]<\/li>\n<li>iframe src=[asWithMethodGetURL] &#8230; bringing into play window.parent and window.top<\/li>\n<li>popup window.open([asWithMethodGetURL], &#8216;_blank&#8217;, &#8216;[positioningStuff]&#8217;) &#8230; bringing into play window.opener<\/li>\n<\/ol>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-before-onload-event-report-tutorial\/' rel=\"noopener\">Webpage Before Onload Event Report Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wvprct'>Previous relevant <a target=\"_blank\" title='Webpage Vertical Position Return Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-content-tutorial\/' rel=\"noopener\">Webpage Vertical Position Return Content 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\/returning_to_start.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Webpage Vertical Position Return Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start_content.jpg\" title=\"Webpage Vertical Position Return Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Vertical Position Return Content Tutorial<\/p><\/div>\n<p>The improvement, today, onto yesterday&#8217;s <a title='Webpage Vertical Position Return Tutorial' href='#wvprt'>Webpage Vertical Position Return Tutorial<\/a> is, nominally, to allow the user to specify what their table cell wording should be, as a comma separated string entered via a Javascript prompt window and accessed via a minus sign &#8220;a&#8221; link in amongst the header elements.<\/p>\n<p>Along the way, we realized a thing about returns to the same web application using the same web browser previously used.  The nature of the web application with its scrolling will cause autocompletion at the web browser address bar to &#8230;<\/p>\n<p><code>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html#lime<\/code><\/p>\n<p> &#8230; or something similar.  Within the web application this causes &#8220;location.hash&#8221; to get a value, and the implication of this is that for the working of the web application, including going off to external links and arriving back appropriately positioned, via that external webpage&#8217;s back button\/link we need to differentiate &#8230;<\/p>\n<ul>\n<li>a web browser address bar entry such as &#8230;<br \/>\n<code>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html#maroon<\/code><br \/>\n &#8230; as you first enter the web application from nowhere (ie. above is typed or copied into the web browser address bar and you act to navigate to that URL (with location.hash defined)) &#8230; as distinct from &#8230;<\/li>\n<li>a web browser address bar entry such as &#8230;<br \/>\n<code>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html#maroon<\/code><br \/>\n &#8230; as you return to the web application via one of those external webpage back button\/link<\/li>\n<\/ul>\n<p>What might help, at the client level or server level (as our web application is serverside PHP)?  Well, at client level there is &#8230;<\/p>\n<p><code>document.referrer<\/code><\/p>\n<p> &#8230; which is a client (ie. seen by Javascript) data item that contains a URL of a webpage navigated from or nothing\/blank\/null when you navigated to the webpage from the web browser address bar directly &#8230;<\/p>\n<p><code><br \/>\n\/\/ initialization of global variable<br \/>\n   var documentreferrer=('' + document.referrer);<br \/>\n<br \/>\n\/\/ document.body <font color=blue>part of<\/font> onload event logic ...<br \/>\n   function onl() {<br \/>\n     var ourrect;<br \/>\n     <font color=blue>if (('' + location.hash) != '' && ('' + documentreferrer) == '') {<br \/>\n       location.href=document.URL.split('#')[0];<br \/>\n     }<\/font><br \/>\n     for (var ii=0; ii<zcgcols.length; ii++) {  \n       document.getElementById('mytable').innerHTML+=\"&lt;tr&gt;&lt;td class=big onscroll='checkscroll(this);' onmousewheel='checkscroll(this);' id=\" + zcgcols[ii].replace(\/\\ \/g,'-') + \" style='text-align:center;vertical-align:middle;width:100%;height:400px;\" + bordstr + \"background-color:\" + cgcols[eval(ii % cgcols.length)] + \";'&gt;&lt;a onclick=\\\"settd(document.getElementById('s\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"'));\\\" style='background-color:white;padding: 5 5 5 5;' href='\/\/wikipedia.org\/wiki\/\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"'&gt;\"  + zcgcols[ii] + \"&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;\";     \n       document.getElementById('rhs').innerHTML+=\"&lt;tr&gt;&lt;td onclick='settd(this);' class=small id=s\" + zcgcols[ii].replace(\/\\ \/g,'-') + \" style='text-align:center;width:100%;height:40px;\" + bordstr + \"background-color:\" + cgcols[eval(ii % cgcols.length)] + \";'&gt;\" + zcgcols[ii] + \"&lt;\/td&gt;&lt;\/tr&gt;\";     \n       bordstr=\"\";\n     }\n     var ourbigs=document.getElementsByTagName('td');\n     for (var iii=0; iii<ourbigs.length; iii++) {\n       if (('' + ourbigs[iii].className) == 'big') {\n         bigs.push(ourbigs[iii].getBoundingClientRect());\n       }\n     }\n     <font color=blue>documentreferrer='x';<\/font><br \/>\n\/\/ rest of onload logic<br \/>\n   }<br \/>\n<\/code><\/p>\n<p>In that last scenario we actually check for this via a filled in &#8220;location.hash&#8221; value and redirect to a URL with no hash part so that <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html-GETME\" title=\"returning_to_start.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html-GETME\" title=\"returning_to_start.html\" rel=\"noopener\">second draft &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> you can also try for yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-content-tutorial\/' rel=\"noopener\">Webpage Vertical Position Return Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wvprt'>Previous relevant <a target=\"_blank\" title='Webpage Vertical Position Return Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-tutorial\/' rel=\"noopener\">Webpage Vertical Position Return 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\/returning_to_start.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=Webpage Vertical Position Return Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.gif\" title=\"Webpage Vertical Position Return Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Vertical Position Return Tutorial<\/p><\/div>\n<p>We have a very simple &#8220;proof of concept&#8221; web application to present today.  The reason for our &#8220;webpage position return&#8221; idea centres around four concepts &#8230;<\/li>\n<table>\n<tr>\n<th>Today we &#8230;<\/th>\n<th>Whereas usually we &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>&#8220;a&#8221; link navigation that is target=_self (ie. default navigation that stays on the same web browser tab clobbering content)<\/li>\n<li>webpage vertical scrolling of content to &#8220;below the fold&#8221;<\/li>\n<li>hashtag # navigation<\/li>\n<li>use of web browser back link\/button<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>&#8220;a&#8221; link navigation that is target=_blank (ie. to a new web browser tab leaving original webpage unaffected)<\/li>\n<li>try for &#8220;no webpage vertical scrolling of content required&#8221;<\/li>\n<li>try for &#8220;no need for hashtag # navigation&#8221;<\/li>\n<li>try for &#8220;no need for use of web browser back link\/button&#8221;<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/table>\n<p>So what happens if no hashtag # navigation happens ahead of navigating to a new webpage via an &#8220;a&#8221; link set to target=_self?  It will, unless catered for (and there is a mix out there), will return back to that previous webpage at its topmost positioning (as far as vertical scrolling goes).   The internal hashtag # navigation concerns taken in our proof of concept allows the return to be either exactly, or nearly, returned to &#8230;<\/p>\n<ul>\n<li>the appropriate webpage &#8230; doh! &#8230;<\/li>\n<li>at an apt vertical scrolling position<\/li>\n<\/ul>\n<p>See what we mean, and what we are talking about with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html_GETME\" title=\"returning_to_start.html\" rel=\"noopener\">our first draft &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.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='#d51696' onclick='var dv=document.getElementById(\"d51696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51696' 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='#d51709' onclick='var dv=document.getElementById(\"d51709\"); 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='d51709' 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='#d65734' onclick='var dv=document.getElementById(\"d65734\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65734' 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='#d65743' onclick='var dv=document.getElementById(\"d65743\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-server\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65743' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>And so, today, we expose all the fun we&#8217;ve been having running an Apache\/PHP\/MySql web server where both &#8230; HTML and Javascript and CSS &#8230; on the clientside of yesterday&#8217;s Webpage Before Onload Event Report Tutorial &#8230; can get backed &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/webpage-before-onload-event-client-server-report-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":[213,4286,4995,3013,2170,354,452,2229,557,3961,576,652,744,830,870,932,967,997,1986,3716,1319,1411,1418,1583,1433,3010],"class_list":["post-65743","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-clientserver","tag-clientside","tag-document-dody","tag-document-referrer","tag-document-url","tag-dom","tag-form","tag-hash","tag-hashtag","tag-hashtagging","tag-html","tag-javascript","tag-mamp","tag-navigation","tag-onload","tag-php","tag-popup","tag-programming","tag-proof-of-concept","tag-serverside","tag-tutorial","tag-web-server","tag-webpage","tag-window","tag-window-open","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65743"}],"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=65743"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65743\/revisions"}],"predecessor-version":[{"id":65761,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65743\/revisions\/65761"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}