设置参数的宽度和高度的链接，将打开一个新窗口与javascript？

Question

使用下面的内容，我可以在一个新窗口中打开一个链接，如果它有一个“打开新窗口”的类。

  (function () {

    $('.new-window').click(function(){
       window.open(this.href, 'newwindow', 'width=400, height=200'); 
       return false;
     });

  })();

<a class="new-window" href="somesite.com">Link </a>

我如何重写它，以便通过HTML中的参数传递所创建窗口的宽度和高度？

所以我在想这样的事情：

 <a class="new-window" data-window-width="400" data-window-height="200" data-name=" href="somesite.com">Link</a>

注-我将需要有多个链接像这样在一个页面，每一个不同的高度和宽度参数。

我也需要中心弹出，但我想我可以这样做，使用这种方法，一旦我有窗口的高度和宽度作为参数。

Open new window on center of screen with this javascript?

Answer 1

您可以使用$(this).data("window-width")或$(this).attr("data-window-width")与jQuery一起获取数据属性。它们并不完全等价，但除非您计划修改JavaScript中的宽度/高度，否则您可以认为它们是相同的。如果您需要修改这些值，您应该花一些时间了解更新<a>对每个值的影响。

(function () {

  $('.new-window').click(function(){
    var window_width = $(this).data("window-width"),
      window_height = $(this).data("window-height"),
      window_name = $(this).data("name");
    window.open(this.href, window_name, 'width=' + window_width + ', height=' + window_height); 
    return false;
  });

})();

Answer 2

您可以通过dataset属性访问Element.prototype.dataset属性。

window.open(this.href, 'newwindow', 'width=' + this.dataset.windowWidth + ', height=' + this.dataset.windowHeight + '); 

注:连字符转换为camel case符号进行访问。