The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> New Window not Opening on Apple devices with Safari
dawson1989
post Feb 18 2016, 10:59 AM
Post #1





Group: Members
Posts: 2
Joined: 18-February 16
Member No.: 24,005



I've been really frustrated by this roadblock. I can get the new window/tab to open on windows across all browsers, but it won't work on Safari on Apple devices. I've seen elsewhere that this particular line of code could be helpful, but I haven't had luck getting it to play nicely with what I already have.

Any help would be greatly appreciated. Thanks!

var newTab = safari.self.browserWindow.openTab();


<select id="select" onchange="window.open(this.options[this.selectedIndex].value);">
<option value="">Choose your state</option>
<option value="http://www.treasury.state.al.us/Content/index.aspx">Alabama</option>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2016, 11:18 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,941
Joined: 10-August 06
Member No.: 7



QUOTE(dawson1989 @ Feb 18 2016, 04:59 PM) *

it won't work on Safari on Apple devices.

Have you checked that popup blocking is not enabled?

QUOTE
I've seen elsewhere that this particular line of code could be helpful,

Actually this kind of navigation is not a good idea at all for usability reasons --neither the SELECT menu, the javascript dependency, the onchange event nor the popup window. sad.gif

QUOTE
but I haven't had luck getting it to play nicely with what I already have.

You mean it works on its own? Then we need to see the complete page.

QUOTE
var newTab = safari.self.browserWindow.openTab();

This looks like some stray code. unsure.gif

QUOTE
<select id="select" onchange="window.open(this.options[this.selectedIndex].value);">

Does it make any difference if you add a name for the new window? See https://developer.mozilla.org/en-US/docs/Web/API/Window/open

QUOTE
<option value="">Choose your state</option>
<option value="http://www.treasury.state.al.us/Content/index.aspx">Alabama</option>

The SELECT menu needs a </select> end tag as well...

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dawson1989
post Feb 18 2016, 11:39 AM
Post #3





Group: Members
Posts: 2
Joined: 18-February 16
Member No.: 24,005



Thanks for looking at this Christian. I didn't do a good job explaining the issue

QUOTE
You mean it works on its own? Then we need to see the complete page.
This looks like some stray code. unsure.gif

This "var newTab = safari.self.browserWindow.openTab();" is stray code I found that I had heard was useful for getting a new window opened in Safari.

I included it to try to be helpful in that it was the only solution I had found to the issue, but I think that made it more confusing. The pop-up blocker was my first thought but the client swears up and down that it isn't the issue >.> so I wanted to rule out all other possibilities before I come back to that.

Here is the full code, the </select> tag is at the end.

<p style="font-size: 18px;">State treasurers and state finance officials are the chief financial officers for their respective states. They work for the good of their home states and for the greater good of the nation. To learn more about what's happening in your part of the country, find your state treasurer's office from the list below.</p>
<select id="select" onchange="window.open(this.options[this.selectedIndex].value);">
<option value="">Choose your state</option>
<option value="http://www.treasury.state.al.us/Content/index.aspx">Alabama</option>
<option value="http://treasury.dor.alaska.gov/">Alaska</option>
<option value="http://www.aztreasury.gov/">Arizona</option>
<option value="http://www.artreasury.gov/">Arkansas</option>
<option value="http://www.treasurer.ca.gov/">California</option>
<option value="https://www.colorado.gov/treasury">Colorado</option>
<option value="http://www.ott.ct.gov">Connecticut</option>
<option value="http://treasury.delaware.gov/">Delaware</option>
<option value="http://otr.cfo.dc.gov/">Dist of Columbia</option>
<option value="http://www.myfloridacfo.com/">Florida</option>
<option value="http://ost.georgia.gov/">Georgia</option>
<option value="http://hawaii.gov/budget">Hawaii</option>
<option value="http://sto.idaho.gov/">Idaho</option>
<option value="http://www.treasurer.il.gov/">Illinois</option>
<option value="http://www.state.in.us/tos/">Indiana</option>
<option value="http://www.treasurer.state.ia.us/">Iowa</option>
<option value="http://www.kansascash.com/prodweb/main/index.php">Kansas</option>
<option value="http://www.kytreasury.com/">Kentucky</option>
<option value="http://www.treasury.state.la.us/default.aspx">Louisiana</option>
<option value="http://www.state.me.us/treasurer/">Maine</option>
<option value="http://www.treasurer.state.md.us/">Maryland</option>
<option value="http://www.mass.gov/treasury/">Massachusetts</option>
<option value="http://www.mich.gov/treasury">Michigan</option>
<option value="http://mn.gov/mmb/">Minnesota</option>
<option value="http://www.treasurerlynnfitch.com/Pages/default.aspx">Mississippi</option>
<option value="http://www.treasurer.mo.gov/">Missouri</option>
<option value="http://revenue.mt.gov/">Montana</option>
<option value="http://www.treasurer.org/">Nebraska</option>
<option value="http://nevadatreasurer.gov/">Nevada</option>
<option value="http://www.nh.gov/treasury/">New Hampshire</option>
<option value="http://www.state.nj.us/treasury/tohome.shtml">New Jersey</option>
<option value="http://www.nmsto.gov/">New Mexico</option>
<option value="http://www.tax.ny.gov/treasury/">New York</option>
<option value="http://www.nctreasurer.com/Pages/default.aspx">North Carolina</option>
<option value="http://www.nd.gov/ndtreas/">North Dakota</option>
<option value="http://www.tos.ohio.gov/">Ohio</option>
<option value="http://www.ok.gov/treasurer/">Oklahoma</option>
<option value="http://www.oregon.gov/treasury/Pages/index.aspx">Oregon</option>
<option value="http://www.patreasury.gov/">Pennsylvania</option>
<option value="http://www.treasury.ri.gov/">Rhode Island</option>
<option value="http://www.treasurer.sc.gov/">South Carolina</option>
<option value="http://www.sdtreasurer.gov/">South Dakota</option>
<option value="http://www.treasury.state.tn.us/">Tennessee</option>
<option value="http://www.window.state.tx.us/">Texas</option>
<option value="http://www.utah.gov/treasurer/index.html">Utah</option>
<option value="http://www.vermonttreasurer.gov/">Vermont</option>
<option value="http://www.trs.virginia.gov/">Virginia</option>
<option value="http://www.tre.wa.gov/">Washington</option>
<option value="http://www.wvtreasury.com/">West Virginia</option>
<option value="http://www.statetreasury.wisconsin.gov/">Wisconsin</option>
<option value="http://treasurer.state.wy.us/">Wyoming</option>
</select>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2016, 12:57 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,941
Joined: 10-August 06
Member No.: 7



QUOTE(dawson1989 @ Feb 18 2016, 05:39 PM) *

This "var newTab = safari.self.browserWindow.openTab();" is stray code I found that I had heard was useful for getting a new window opened in Safari.

I included it to try to be helpful in that it was the only solution I had found to the issue, but I think that made it more confusing.

I don't think it should be necessary. OTOH I don't think it should interfere with the script below either, but try removing it anyway, just in case. Do you get any script errors in your other browsers' debugging tools?

QUOTE
The pop-up blocker was my first thought but the client swears up and down that it isn't the issue >.>

It's always best to see for yourself. cool.gif Does it work on Safari on an iPhone?

QUOTE
<select id="select" onchange="window.open(this.options[this.selectedIndex].value);">

Try adding a name above. Other than that, everything looks correct to me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 18 2016, 04:32 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You might try to search for "open new window in safari on iphone javascript" or "open new window in safari javascript", as there seems to be some trouble doing that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2016, 07:18 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,941
Joined: 10-August 06
Member No.: 7



A more reliable approach might be to use a server side script like PHP instead of javascript. Use a proper form with a submit button, and TARGET="_blank" to make it open a new window:

CODE
<form action="redirect.php" target="_blank">
<label>Choose your state:
<select name="url">
<option value="foo.com">foo</option>
<option value="bar.com">bar</option>
</select>
</label>
<input type="submit" value="Go">
</form>

Then let a PHP script in redirect.php send a redirect header to the domain specified in the submitted form's SELECT value:

CODE
<?php
if(isset($_GET['url']))
{
    $url='http://'.$_GET['url'].'/';
}
header("Location: $url");
exit;
?>

A disadvantage is that you can't use an idle "Choose your state" OPTION in the SELECT menu, all of them will submit to redirect.php. Also you need a submit button, but that's actually a good thing.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th November 2018 - 05:47 AM