【问题标题】:onclick open window and specific sizeonclick 打开窗口和特定大小
【发布时间】:2011-01-10 13:27:06
【问题描述】:

我有一个这样的链接:

<a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,')

我希望新的打开窗口以特定大小打开。如何指定高度和宽度?

【问题讨论】:

    标签: javascript html


    【解决方案1】:
    <a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11"
       onclick="window.open(this.href,'targetWindow',
                                       `toolbar=no,
                                        location=no,
                                        status=no,
                                        menubar=no,
                                        scrollbars=yes,
                                        resizable=yes,
                                        width=SomeSize,
                                        height=SomeSize`);
     return false;">Popup link</a>
    

    其中宽度和高度是没有单位的像素(宽度=400 而不是宽度=400px)。

    在大多数浏览器中,如果不是在没有换行符的情况下编写,它将无法工作,一旦设置了变量,所有内容都在一行中:

    <a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=SomeSize,height=SomeSize'); return false;">Popup link</a> 
    

    【讨论】:

    • 您还需要将最后一个 ")" 字符替换为 ");return false;"以防止在弹出窗口之外打开原始链接。
    • 一个旧的,但我通过搜索找到了这个,所以根据@AndrewSpear 的回复更正了答案
    • @Larry Hipp 我怎样才能改变它以适应屏幕的大小?
    • @IdhamChoudry 只需删除宽度/高度属性,它将自动占用所有可用空间。我相信设置width=100vw, height=100vh 也可以。
    • 对我来说它有效,但有一件重要的事情 - 你不应该在你的函数体中使用换行符,就像上面的例子一样。我已经删除了换行符,它对我有用。
    【解决方案2】:
    window.open ("http://www.javascript-coder.com",
    "mywindow","menubar=1,resizable=1,width=350,height=250");
    

    来自

    http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

    :]

    【讨论】:

      【解决方案3】:
      window.open('http://somelocation.com','mywin','width=500,height=500');
      

      【讨论】:

        【解决方案4】:

        只需将它们添加到参数字符串中即可。

        window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250')
        

        【讨论】:

          【解决方案5】:
          <a style="cursor:pointer"
            onclick=" window.open('http://YOUR.URL.TARGET','',' scrollbars=yes,menubar=no,width=500, resizable=yes,toolbar=no,location=no,status=no')">Your text</a>
          

          【讨论】:

          • 虽然我确实问过,但这对所有已经给出的答案有什么好处?
          【解决方案6】:

          这些是来自Mozilla Developer Network's window.open 页面的最佳实践:

          <script type="text/javascript">
          var windowObjectReference = null; // global variable
          
          function openFFPromotionPopup() {
            if(windowObjectReference == null || windowObjectReference.closed)
            /* if the pointer to the window object in memory does not exist
               or if such pointer exists but the window was closed */
          
            {
              windowObjectReference = window.open("http://www.spreadfirefox.com/",
             "PromoteFirefoxWindowName", "resizable,scrollbars,status");
              /* then create it. The new window will be created and
                 will be brought on top of any other window. */
            }
            else
            {
              windowObjectReference.focus();
              /* else the window reference must exist and the window
                 is not closed; therefore, we can bring it back on top of any other
                 window with the focus() method. There would be no need to re-create
                 the window or to reload the referenced resource. */
            };
          }
          </script>
          
          <p><a
           href="http://www.spreadfirefox.com/"
           target="PromoteFirefoxWindowName"
           onclick="openFFPromotionPopup(); return false;" 
           title="This link will create a new window or will re-use an already opened one"
          >Promote Firefox adoption</a></p>
          

          【讨论】:

            【解决方案7】:

            在打字稿中使用函数

            openWindow(){
                //you may choose to deduct some value from current screen size
                let height = window.screen.availHeight-100;
                let width = window.screen.availWidth-150;
                window.open("http://your_url",`width=${width},height=${height}`);
            }
            

            【讨论】:

              【解决方案8】:

              任何正在寻找快速 Vue 文件组件的人,都可以:

              // WindowUrl.vue
              
              <template>
                  <a :href="url" :class="classes" @click="open">
                      <slot></slot>
                  </a>
              </template>
              
              <script>
                  export default {
                      props: {
                          url: String,
                          width: String,
                          height: String,
                          classes: String,
                      },
                      methods: {
                          open(e) {
                              // Prevent the link from opening on the parent page.
                              e.preventDefault();
              
                              window.open(
                                  this.url,
                                  'targetWindow',
                                  `toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=${this.width},height=${this.height}`
                              );
                          }
                      }
                  }
              </script>
              

              用法:

              <window-url url="/print/shipping" class="btn btn-primary" height="250" width="250">
                  Print Shipping Label
              </window-url>
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多