【问题标题】:Opening a dynamically built Google URL in new window在新窗口中打开动态构建的 Google URL
【发布时间】:2011-09-15 19:54:54
【问题描述】:

我正在使用最初由 Google 提供的修改后的代码来制作使用 Google 地图的公交旅行计划表。我希望结果在新窗口/选项卡中打开,这样用户就不必离开网站(我意识到这是一个有争议的可用性问题,但这是我客户的要求,所以......)。

下面的代码在标签中使用 target="_blank" - 这似乎是最简单的解决方案 - 但在这种情况下不起作用 - 不知道为什么,但认为它可能与动态构建有关网址。

我尝试了从该站点上以前类似问题中收集的几种方法,下面的方法是其中之一,以及类似于

的方法
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>

【问题讨论】:

    标签: javascript forms google-maps new-window


    【解决方案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);
    

    【讨论】:

    • 投反对票?对不起@James,我不知道那是什么(这里还是新的),我什至没有点击页面上的任何内容,而且我很确定无论如何我都没有对你投反对票。你在和别人说话吗?
    • 我对javascript也很天真...关于如何将其准确地应用于我现有代码的任何提示?感谢您的提示!
    • @Halfacre:当您单击问题或答案左侧的向下箭头时,就会投反对票。如果答案有用,您可以投票赞成,如果没有用,您可以投票否决。
    • 我保证我没有对你投反对票!感谢帮助。这有点工作。它现在所做的是在新窗口中打开结果,同时在同一窗口中打开它们。经过进一步思考,我认为理想的情况是让他们简单地在新选项卡中打开(就像目标属性一样),而不是在前面弹出打开一个新窗口。
    • 您无法可靠地控制它是否在新选项卡中打开,因为此选项由用户控制。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-19
    • 1970-01-01
    • 2014-03-24
    • 2014-04-15
    • 2012-12-17
    相关资源
    最近更新 更多