{"id":53085,"date":"2021-08-26T03:01:29","date_gmt":"2021-08-25T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53085"},"modified":"2021-08-26T11:25:03","modified_gmt":"2021-08-26T01:25:03","slug":"window-open-focus-stays-on-parent-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-open-focus-stays-on-parent-primer-tutorial\/","title":{"rendered":"Window Open Focus Stays on Parent Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>Regulars will have heard us talk about the window.open (sometimes popup) window opening method in Javascript, a lot. Regulars will have heard us talk about the input type=text focus, a lot. Regulars will have heard us talk about window focus, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-open-focus-stays-on-parent-primer-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":[400,448,576,652,870,884,997,2001,1319,1404,1418,1583,1433,3010],"class_list":["post-53085","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-event","tag-focus","tag-html","tag-javascript","tag-onload","tag-opera","tag-programming","tag-tab","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\/53085"}],"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=53085"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53085\/revisions"}],"predecessor-version":[{"id":53092,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53085\/revisions\/53092"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}