{"id":53093,"date":"2021-08-27T03:01:51","date_gmt":"2021-08-26T17:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53093"},"modified":"2021-08-27T14:26:51","modified_gmt":"2021-08-27T04:26:51","slug":"window-open-focus-stays-on-parent-form-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-open-focus-stays-on-parent-form-tutorial\/","title":{"rendered":"Window Open Focus Stays on Parent Form Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Window Open Focus Stays on Parent Form Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focusmore.jpg\" title=\"Window Open Focus Stays on Parent Form Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Window Open Focus Stays on Parent Form Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Window Open Focus Stays on Parent Primer Tutorial' href='#wofsppt'>Window Open Focus Stays on Parent Primer Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>parent &#8220;focus&#8221; over window.open child window &#8230; today we add &#8230;<\/li>\n<li>form method=GET action=[here&#8217;sLookingAtYouKid] navigation to allow for all <a target=_blank title='Window.open method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open<\/a> argument arrangements &#8230;<br \/>\n<code><br \/>\n  var awois=null;<br \/>\n<br \/> <br \/>\n  var awoisc='';<br \/>\n<br \/> <br \/>\n  var url=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1].split('&')[0]) : ' ';<br \/>\n  var wname=location.search.split('name=')[1] ? decodeURIComponent(location.search.split('name=')[1].split('&')[0]) : ' ';<br \/>\n  var height=location.search.split('height=')[1] ? eval(location.search.split('height=')[1].split('&')[0]) : -1;<br \/>\n  var width=location.search.split('width=')[1] ? eval(location.search.split('width=')[1].split('&')[0]) : -1;<br \/>\n  var left=location.search.split('left=')[1] ? eval(location.search.split('left=')[1].split('&')[0]) : -1;<br \/>\n  var xtop=location.search.split('top=')[1] ? eval(location.search.split('top=')[1].split('&')[0]) : -1;<br \/>\n<br \/> <br \/>\n  var channelmode=location.search.split('channelmode=')[1] ? decodeURIComponent(location.search.split('channelmode=')[1].split('&')[0]) : ' ';<br \/>\n  var directories=location.search.split('directories=')[1] ? decodeURIComponent(location.search.split('directories=')[1].split('&')[0]) : ' ';<br \/>\n  var fullscreen=location.search.split('fullscreen=')[1] ? decodeURIComponent(location.search.split('fullscreen=')[1].split('&')[0]) : ' ';<br \/>\n<br \/> <br \/>\n  var xlocation=location.search.split('location=')[1] ? decodeURIComponent(location.search.split('location=')[1].split('&')[0]) : ' ';<br \/>\n  var menubar=location.search.split('menubar=')[1] ? decodeURIComponent(location.search.split('menubar=')[1].split('&')[0]) : ' ';<br \/>\n  var resizable=location.search.split('resizable=')[1] ? decodeURIComponent(location.search.split('resizable=')[1].split('&')[0]) : ' ';<br \/>\n<br \/> <br \/>\n  var status=location.search.split('status=')[1] ? decodeURIComponent(location.search.split('status=')[1].split('&')[0]) : ' ';<br \/>\n  var titlebar=location.search.split('titlebar=')[1] ? decodeURIComponent(location.search.split('titlebar=')[1].split('&')[0]) : ' ';<br \/>\n  var toolbar=location.search.split('toolbar=')[1] ? decodeURIComponent(location.search.split('toolbar=')[1].split('&')[0]) : ' ';<br \/>\n<br \/> <br \/>\n  var replace=location.search.split('replace=')[1] ? decodeURIComponent(location.search.split('replace=')[1].split('&')[0]) : ' ';<br \/>\n<br \/> <br \/>\n function perhapsopen() {<br \/>\n  var cdelim='', third='', thisv='';<br \/>\n  var arr=['channelmode','directories', 'fullscreen', 'xlocation', 'resizable', 'status', 'titlebar', 'toolbar', 'height', 'width', 'left', 'xtop'];<br \/>\n  if (url != ' ') {<br \/>\n    document.getElementById('url').value=url;<br \/>\n    if (wname == ' ') {<br \/>\n      awoisc='awois=window.open(\"' + url + '\")';<br \/>\n    } else {<br \/>\n      if (wname.replace('_blank','').replace('_parent','').replace('_top','').replace('_self','') != '') {<br \/>\n           document.getElementById('nondefopt').value=wname;<br \/>\n           document.getElementById('name').value=huh;<br \/>\n      } else {<br \/>\n           document.getElementById('name').value=wname;<br \/>\n      }<br \/>\n      if ((channelmode + directories + fullscreen + xlocation + resizable + status + titlebar + toolbar + height + width + left + top).replace(\/\\-1\/g, '').trim() == '') {<br \/>\n        if (replace == ' ') {<br \/>\n           awoisc='awois=window.open(\"' + url + '\", \"' + wname.trim() + '\")';<br \/>\n        } else {<br \/>\n           awoisc='awois=window.open(\"' + url + '\", \"' + wname.trim() + '\", \"' + '' + '\", \"' + replace + '\")';<br \/>\n        }<br \/>\n      } else {<br \/>\n        for (var ii=0; ii&lt;arr.length; ii++) {<br \/>\n          eval(\"thisv='' + \" + arr[ii]);<br \/>\n          if (thisv.replace(\/\\-1\/g, '').trim() != '') {<br \/>\n            third+=cdelim + arr[ii].replace('xlocation','location').replace('xtop','top') + '=' + thisv;<br \/>\n            document.getElementById(arr[ii].replace('xlocation','location').replace('xtop','top')).value=thisv;<br \/>\n            cdelim=',';<br \/>\n          }<br \/>\n        }<br \/>\n        if (replace == ' ') {<br \/>\n           awoisc='awois=window.open(\"' + url + '\", \"' + wname.trim() + '\", \"' + third + '\")';<br \/>\n        } else {<br \/>\n           document.getElementById('replace').value=replace;<br \/>\n           awoisc='awois=window.open(\"' + url + '\", \"' + wname.trim() + '\", \"' + third + '\", \"' + replace + '\")';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (('' + window.opener)) { if (('' + document.referer).indexOf(document.URL.split('#')[0].split('?')[0]) != -1) { setTimeout(andthenit, 4500);  } else { setTimeout(andthenit, 4500);  } } else { setTimeout(andthenit, 4500);  }<br \/>\n }<br \/>\n<br \/> <br \/>\nfunction andthenit() {<br \/>\n  if (awoisc != '') {  eval('' + awoisc); }<br \/>\n}<br \/>\n<br \/>\n  function atstart() {<br \/>\n    <font color=blue>var wonurl='';<br \/>\n    if (window.opener) {<br \/>\n      wonurl=window.opener.document.URL;<br \/>\n      if (wonurl.indexOf('?url=') != -1) {   document.getElementById('dstyle').innerHTML=(' &lt;style&gt; * { opacity: 0.5 !important; } &lt;\/style&gt;').substring(0,1).trim();   }<br \/>\n    }<br \/>\n    document.getElementById('url').value=document.URL.split('#')[0].split('?')[0];<br \/>\n    perhapsopen();<br \/>\n    if (!awois && awoisc == '') {<\/font><br \/>\n    if (document.URL.indexOf('focus=') != -1) {<br \/>\n    if (document.URL.indexOf('window_open_focus.htm?end=') == -1) { wois=window.open('.\/window_open_focus.htm?end=here', '_blank').focus(); }<br \/>\n    } else {<br \/>\n    if (document.URL.replace('url=','end=').indexOf('window_open_focus.htm?end=') == -1) {<br \/>\n      <font color=blue>if (document.URL.indexOf('?url=') == -1 && wonurl.indexOf('?url=') == -1) {<\/font><br \/>\n      window.name=\"parent\";<br \/>\n      wois=window.open('.\/window_open_focus.htm?end=here', '_blank');<br \/>\n      \/\/wois.window.opener.focus();<br \/>\n      <font color=blue>}<\/font><br \/>\n      }<br \/>\n    if (('' + window.opener)) { setTimeout(andthen, 4000);  }<br \/>\n    }<br \/>\n    <font color=blue>}<\/font><br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; very much a hotchpotch of possibilities depending on web browser brands and device platforms you are using &#8230; hence our thoughts of giving you, the user, the chance to try the arguments out for yourself, in some way shape or form.<\/p>\n<p>We think <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.phpone=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus.html-GETME\" title=\"window_open_focus.htm\">our changed HTML\/Javascript\/CSS<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus.html-GETME\" title=\"window_open_focus.htm\">window_open_focus.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus.htm\">live run<\/a> link!<\/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\/window-open-focus-stays-on-parent-form-tutorial\/'>Window Open Focus Stays on Parent Form Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wofsppt'>Previous relevant <a target=_blank title='Window Open Focus Stays on Parent Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-open-focus-stays-on-parent-primer-tutorial\/'>Window Open Focus Stays on Parent 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\/window_open_focus.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Window Open Focus Stays on Parent Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus_stays_on_parent.gif\" title=\"Window Open Focus Stays on Parent Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Window Open Focus Stays on Parent Primer Tutorial<\/p><\/div>\n<p>Regulars will have heard us talk about the <a target=_blank title='Window.open method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open<\/a> (sometimes popup) window opening method in Javascript, a lot.<\/p>\n<p>Regulars will have heard us talk about the input type=text focus, a lot.<\/p>\n<p>Regulars will have heard us talk about window focus, a bit.<\/p>\n<p>And so, am sure you&#8217;ll forgive us for thinking we could achieve &#8230;<\/p>\n<ul>\n<li>design a scenario whereby a parent window &#8230;<\/li>\n<li>opens a child window via window.open &#8230; but &#8230;<\/li>\n<li>instead of the immediate focus lying on the child we still have a child window, but &#8220;the focus webpage&#8221; shall we say, is the parent one<\/li>\n<\/ul>\n<p> &#8230; with a window.focus() style of solution, in all naivety.<\/p>\n<p>It&#8217;s curiouser and curiouser that great advice from <a target=_blank title='https:\/\/stackoverflow.com\/questions\/6910278\/how-to-return-focus-to-the-parent-window-using-javascript' href='https:\/\/stackoverflow.com\/questions\/6910278\/how-to-return-focus-to-the-parent-window-using-javascript'>https:\/\/stackoverflow.com\/questions\/6910278\/how-to-return-focus-to-the-parent-window-using-javascript<\/a> webpage we used working via the sage advice &#8230;<\/p>\n<blockquote cite='https:\/\/stackoverflow.com\/questions\/6910278\/how-to-return-focus-to-the-parent-window-using-javascript'><p>\nYou need to give your parent window a name.\n<\/p><\/blockquote>\n<p> &#8230; because <font color=purple>that means<\/font> at the child, who sees the parent as <a target=_blank title='window.opener information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_opener.asp'>window.opener<\/a> <font color=blue>they can<\/font> &#8230;<\/p>\n<p><code><br \/>\n  function atstart() {<br \/>\n    if (document.URL.indexOf('focus=') != -1) {<br \/>\n    if (document.URL.indexOf('window_open_focus.html?end=') == -1) { wois=window.open('.\/window_open_focus.html?end=here', '_blank').focus(); }<br \/>\n    } else {<br \/>\n    if (document.URL.indexOf('window_open_focus.html?end=') == -1) {<br \/>\n    <font color=purple>window.name=\"parent\";<\/font> wois=window.open('.\/window_open_focus.html?end=here', '_blank'); wois.window.opener.focus();  }<br \/>\n    <font color=blue>if (('' + window.opener)) { setTimeout(andthen, 2000);  }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function andthen() {<br \/>\n    window.opener.document.getElementById('myh4').innerHTML='reached the end';<br \/>\n    document.getElementById('myh4').innerHTML='at an end';<br \/>\n    <font color=blue>var goback = window.open('', 'parent');<br \/>\n    goback.focus();<\/font><br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; and do you know what?  Sometimes (ie. web browser brands differ) our &#8220;reached the end&#8221; parent window appears to the left (in tab order) of the &#8220;at an end&#8221; child window (as you might expect) and sometimes, as with today&#8217;s Opera web browser <a target=_blank title='Tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus_stays_on_parent.gif'>tutorial picture<\/a> example, it&#8217;s the other way around, and yet &#8220;focus&#8221; (if you like to call it that) remained on the parent window in both cases.  And no clicking element solutions are needed here with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus.html_GETME\" title=\"window_open_focus.html\">window_open_focus.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/window_open_focus.html\">live run<\/a> link!<\/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='#d53085' onclick='var dv=document.getElementById(\"d53085\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/ITblopg\/tag\/window.open\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53085' 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='#d53093' onclick='var dv=document.getElementById(\"d53093\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/ITblopg\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53093' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Adding to yesterday&#8217;s Window Open Focus Stays on Parent Primer Tutorial&#8216;s &#8230; parent &#8220;focus&#8221; over window.open child window &#8230; today we add &#8230; form method=GET action=[here&#8217;sLookingAtYouKid] navigation to allow for all window.open argument arrangements &#8230; var awois=null; var awoisc=&#8221;; var &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-open-focus-stays-on-parent-form-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":[1885,1835,400,448,452,576,652,3220,830,870,884,997,2001,3565,1319,1404,1418,1583,1433,3010],"class_list":["post-53093","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-argument","tag-arguments","tag-event","tag-focus","tag-form","tag-html","tag-javascript","tag-navigate","tag-navigation","tag-onload","tag-opera","tag-programming","tag-tab","tag-target","tag-tutorial","tag-web-browser","tag-webpage","tag-window","tag-window-open","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53093"}],"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=53093"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53093\/revisions"}],"predecessor-version":[{"id":53100,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53093\/revisions\/53100"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}