window.open以表单提交为中心(已关闭)

时间:2013-01-07 23:13:49

标签: javascript window.open onsubmit

更新

答案可以在这里找到:

center window.open on form submit

=============================================== =======

我正在尝试将表单提交到以屏幕为中心的弹出窗口中。我有“frankensteined”我在谷歌搜索时发现的几个js片段。

请记住,我可以理解html / css,但不能理解javascript。

<html>

  <head>
    <script type="text/javascript">
      function directions(sacred) {
        var x = screen.width / 2 - 700 / 2;
        var y = screen.height / 2 - 450 / 2;
        window.open(sacred.action, 'Directions', 'height=485,width=700,left=' + x + ',top=' + y);
      }
    </script>
  </head>

  <body>
    <form action="http://maps.google.com/maps" method="get" target="Directions"
    onsubmit="Directions=directions(sacred)">
      <p>
        <input class="directions-input" id="saddr" name="saddr" type="text" placeholder="enter zip-code"
        value="enter zip-code" onfocus="this.value = this.value=='enter zip-code'?'':this.value;"
        onblur="this.value = this.value==''?'enter zip-code':this.value;" />
        <input type="submit" class="directions-submit" />
        <input type="hidden" name="daddr" value="210+East+Northampton+Street,+Bath,+PA"
        />
        <input type="hidden" name="hl" value="en" />
      </p>
    </form>
  </body>

</html>

fiddle is here

表单提交到新选项卡,但不运行函数或window.open

提前感谢任何人。

P.S。我只是抓住了这个stackoverflow的东西。

2 个答案:

答案 0 :(得分:0)

你已经写好了,但在一个功能中使用它总是更好,所以你不会迷路。

使用此功能:

function openCenteredWindow(url, name) {
    var width = 700;
    var height = 450;
    var left = parseInt((screen.availWidth/2) - (width/2));
    var top = parseInt((screen.availHeight/2) - (height/2));
    var windowFeatures = "width=" + width + ",height=" + height + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
    myWindow = window.open(url, name, windowFeatures);
}

你会看到有什么区别。

答案 1 :(得分:0)

要不将onsubmit函数的表单提交到return false

function directions(sacred) {
    var x = screen.width / 2 - 700 / 2;
    var y = screen.height / 2 - 450 / 2;
    window.open(sacred.action, 'Directions', 'height=485,width=700,left=' + x + ',top=' + y);
    return false;
  }

和表格:

  <form action="http://maps.google.com/maps" method="get" target="Directions"
  onsubmit="return directions(sacred);">

我不确定变量sacred的来源。您还将当前directions()函数的返回值存储到Directions中,但该函数当前不会返回任何内容。但是我无法从你的代码中找到答案,但是通过上面的例子,你应该知道如何使它工作。