新しいウィンドウで動的に作成されたGoogle URLを開く

Question

Googleマップを使用したトランジットトリッププランナーフォームを作成するために、Googleが最初に提供した修正コードを使用しています。私は新しいウィンドウ/タブで結果を開きたいので、ユーザーはサイトを離れる必要はありません（これは多少議論の余地のあるユーザビリティの問題だと思いますが、これは私のクライアントの願いのところです...）。

以下のコードでは、最も簡単な解決策のように見えるタグでtarget = "_ blank"を使用していますが、この場合は動作しません。理由は不明ですが、構築されたURL。

私は、以前の類似した、このサイト上の質問、それらの一つである下記の方法だけでなく、

myForm.setAttribute("target", "_blank"); 

の線に沿って何かから集められたいくつかの方法を試してみましたが、これまでのところ、何も成功しませんでした。

ここに私が使用しているコードがあります。どんな提案も大歓迎です。

 <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('&nbsp;<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>&nbsp;</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> 

Answer 1

代わりにwindow.openを試してみることができます。ここで私は子ウィンドウを開くために作成機能があります：

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 
    } 
} 

は、あなたのページにこの機能を追加し、URLを構築し、あなたの関数の最後に、このようにそれを呼び出す：

openChildWindowWithDimensions(loc, 800, 600, true, true, true);