问题
I'm using modified code originally supplied by Google to make a transit trip planner form that uses Google Maps. I'd like the results to open in a new window/tab so the user doesn't have to leave the site (I realize this is a somewhat controversial usability issue, but this is at my client's behest, so...).
The code below uses target="_blank" in the tag - which seemed like the simplest solution - but that doesn't work in this instance - not sure why, but thought it may have something to do with the dynamically-built URL.
I tried several methods gleaned from previous similar questions on this site, the method below being one of them, as well as something along the lines of
myForm.setAttribute("target", "_blank");
but so far nothing has been successful.
Here's the code I'm using. Any suggestions would be greatly appreciated.
<script language="JavaScript" type="text/javascript">
// Edit the strings below this line
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
// End edit block
// Get and parse the user's current date/time
var date = new Date();
var isPM = false;
var currentTime = date.getHours();
var currentDate = "";
var amOption = '<option value="am">AM';
var pmOption = '<option value="pm">PM';
if(currentTime > 11)
isPM = true;
currentTime %= 12;
if(currentTime == 0)
currentTime = 12;
currentTime += ':';
if(date.getMinutes() < 10)
currentTime += '0';
currentTime += date.getMinutes();
if(isPM)
pmOption = '<option selected="true" value="pm">PM';
else
amOption = '<option selected="true" value="am">AM';
if(date.getMonth() < 9)
currentDate = '0';
currentDate += (date.getMonth() + 1) + '/';
if(date.getDate() < 10)
currentDate += '0';
currentDate += date.getDate() + '/' + date.getFullYear();
// Builds the destination URL
function buildURL() {
var loc = 'http://www.google.com/maps?ie=UTF8&f=d&';
for (var i = 0; (i < document.myForm.length - 1); i++) {
if(document.myForm[i].name == 'ampm')
continue;
if(document.myForm[i].name == 'time')
loc += document.myForm[i].name + '=' + document.myForm[i].value + document.myForm.ampm.value + '&';
else {
if(document.myForm[i].name == 'saddr')
loc += document.myForm[i].name + '=' + document.myForm[i].value + '+near+' + zip + '&';
else
loc += document.myForm[i].name + '=' + document.myForm[i].value + '&';
}
}
loc+='dirflg=r';
location.href=loc;
return true;
}
</script>
<form name="myForm" id="myForm" action="#" target="_blank">
<p>Powered by <a href="http://google.com/transit" target="_blank">Google Maps</a></p>
<label for="saddr"><strong>Start</strong> e.g.
<script language="JavaScript" type="text/javascript">
document.write(startExample)
</script>
</label>
<input type="text" name="saddr" maxlength="2048" title="Enter the Origin Address" class="startend" />
<label for="daddr"><strong>End</strong> e.g.
<script language="JavaScript" type="text/javascript">document.write(endExample)</script></label>
<input type="text" name="daddr" maxlength="2048" title="Enter the Destination Address" class="startend" />
<div class="gadgetform-row">
<script language="JavaScript" type="text/javascript">
document.write('<div class="datewrapper">');
document.write('<label for="date"><strong>Date</strong></label><br />');
document.write('<input class="date" type="text" id="fdate" name="date" value="' + currentDate + '" maxlength="10" title="Enter the Date in MM/DD/YY format">');
document.write('</div>');
document.write('<div class="timewrapper">');
document.write('<label for="time"><strong>Time</strong></label><br />');
document.write('<input class="time" type="text" id="ftime" name="time" value="' + currentTime + '" maxlength="8" title="Enter the Time in HH:MM AM or PM format">');
document.write('</div>');
document.write('<div class="ampmwrapper">');
document.write(' <br />');
document.write('<select name="ampm" class="ampm">' + amOption + pmOption + '</select>');
document.write('</div>');
document.write('<div class="clear"></div>');
</script>
</div>
<div class="planby">
<label for="ttype"><strong>Plan by:</strong> </label
><select name="ttype">
<option value="dep">Departure Time </option>
<option value="arr">Arrival Time</option>
</select>
</div>
<a class="button" href="javascript:void();" onclick='return buildURL();'><span class="plan">Plan My Trip</span></a>
</form>
回答1:
You can try using window.open
instead. Here's a function that I created for opening child windows:
openChildWindowWithDimensions = function(url, width, height, showMenu, canResize, showScrollbars) {
var childWindow = window.open(url, "", "\"width=" + width + ",height=" + height + ",menubar=" + (showMenu ? "1" : "0") + ",scrollbars=" + (showScrollbars ? "1" : "0") + ",resizable=" + (canResize ? "1" : "0") + "\"");
if (childWindow){
childWindow.resizeTo(width, height); //IE9 dimensions bug
}
}
Add this function to your page, and at the end of your function that builds the URL, call it like this:
openChildWindowWithDimensions(loc, 800, 600, true, true, true);
来源:https://stackoverflow.com/questions/7436723/opening-a-dynamically-built-google-url-in-new-window