javascript - 如何在十六进制网格上用图像替换悬停文本

标签 javascript image

我正在创建这个编码的六 Angular 网格来显示投资组合。一切正常,但我正在努力寻找将悬停文本更改为图像的解决方案。我使用的代码来自另一个用户,我认为这对我的网站来说是一个好主意,但是我对 JS 的了解非常有限,我修改了几行代码以获得与原始代码类似的外观/感觉 ID,然而,我发现用图像( Logo )替换文本很困难。

我尝试在其中放置一个 img 标签,但看起来这都是通过 JS 配置的。

代码笔:https://codepen.io/gambino85/pen/voZvNp

我喜欢六边形在悬停时显示 Logo (图像),但实际输出是文本。

(function($) {
  $.fn.honeycombs = function(options) {
    // Establish our default settings
    var settings = $.extend(
      {
        combWidth: 250,
        margin: 10
      },
      options
    );

    function initialise(element) {
      $(element).addClass("honeycombs-wrapper");

      var width = 0;
      var combWidth = 0;
      var combHeight = 0;
      var num = 0;
      var $wrapper = null;

      /**
       * Build the dom
       */
      function buildHtml() {
        // add the 2 other boxes
        $(element)
          .find(".comb")
          .wrapAll('<div class="honeycombs-inner-wrapper"></div>');
        $wrapper = $(element).find(".honeycombs-inner-wrapper");

        $(element)
          .find(".comb")
          .append('<div class="hex_l"></div>');
        $(element)
          .find(".hex_l")
          .append('<div class="hex_r"></div>');
        $(element)
          .find(".hex_r")
          .append('<div class="hex_inner"></div>');

        $(element)
          .find(".hex_inner")
          .append(
            '<div class="inner_span"><div class="inner-text"></div></div>'
          );

        num = 0;

        $(element)
          .find(".comb")
          .each(function() {
            num = num + 1;
            var image = $(this)
              .find("img")
              .attr("src");
            var css = 'url("' + image + '") ';

            $(this)
              .find(".hex_inner")
              .attr("style", "background-image: " + css);

            if ($(this).find("span").length > 0) {
              $(this)
                .find(".inner_span .inner-text")
                .html(
                  $(this)
                    .find("span")
                    .html()
                );
            } else {
              $(this)
                .find(".inner_span")
                .remove();
            }
          });

        $(element)
          .find("img, span, .inner_span")
          .hide();
      }

      /**
       * Update all scale values
       */
      function updateScales() {
        combWidth = settings.combWidth;
        combHeight = Math.sqrt(3) * combWidth / 2;
        edgeWidth = combWidth / 2;

        $(element)
          .find(".comb")
          .width(combWidth)
          .height(combHeight);
        $(element)
          .find(".hex_l, .hex_r")
          .width(combWidth)
          .height(combHeight);
        $(element)
          .find(".hex_inner")
          .width(combWidth)
          .height(combHeight);
      }

      /**
       * update css classes
       */
      function reorder(animate) {
        updateScales();
        width = $(element).width();

        newWidth = num / 1.5 * settings.combWidth;

        if (newWidth < width) {
          width = newWidth;
        }

        $wrapper.width(width);

        var row = 0; // current row
        var upDown = 1; // 1 is down
        var left = 0; // pos left
        var top = 0; // pos top

        var cols = 0;

        $(element)
          .find(".comb")
          .each(function(index) {
            top =
              row * (combHeight + settings.margin) +
              upDown * (combHeight / 2 + settings.margin / 2);

            if (animate == true) {
              $(this).stop(true, false);
              $(this).animate({ left: left, top: top });
            } else {
              $(this)
                .css("left", left)
                .css("top", top);
            }

            left = left + (combWidth - combWidth / 4 + settings.margin);
            upDown = (upDown + 1) % 2;

            if (row == 0) {
              cols = cols + 1;
            }

            if (left + combWidth > width) {
              left = 0;
              row = row + 1;
              upDown = 1;
            }
          });

        $wrapper
          .width(cols * (combWidth / 4 * 3 + settings.margin) + combWidth / 4)
          .height((row + 1) * (combHeight + settings.margin) + combHeight / 2);
      }

      $(window).resize(function() {
        reorder(true);
      });

      $(element)
        .find(".comb")
        .mouseenter(function() {
          $(this)
            .find(".inner_span")
            .stop(true, true);
          $(this)
            .find(".inner_span")
            .fadeIn();
        });

      $(element)
        .find(".comb")
        .mouseleave(function() {
          $(this)
            .find(".inner_span")
            .stop(true, true);
          $(this)
            .find(".inner_span")
            .fadeOut();
        });

      buildHtml();
      reorder(false);
    }

    return this.each(function() {
      initialise(this);
    });
  };
})(jQuery);
/*Codepen display adjustments*/
.container {
  width: 90%;
  margin: 0 auto;
}
.wrap {
  margin: 150px 0px;
}

/*Honeycomb CSS*/
.honeycombs {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.honeycombs .inner_span {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: rgba(12, 12, 12, 0.65);
  font-family: sans-serif;
  color: #000;
}
.honeycombs .inner-text {
  padding-top: 40%;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
}



.honeycombs .honeycombs-inner-wrapper {
  display: inline-block;
  overflow: hidden;
  width: 700px;
  position: relative;
  height: 1200px;
}

.honeycombs .comb {
  position: absolute;
  display: inline-block;
}

.honeycombs .hex_l,
.honeycombs .hex_r {
  overflow: hidden;
  position: absolute;
  /* -webkit-backface-visibility: hidden; */
}

.honeycombs .hex_l {
  visibility: hidden;
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);

  transform: rotate(60deg);
}

.honeycombs .hex_r {
  visibility: hidden;
  -moz-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  -webkit-transform: rotate(-120deg);

  transform: rotate(-120deg);
}

.honeycombs .hex_inner {
  display: block;
  visibility: visible;
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);

  transform: rotate(60deg);

  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrap">
    <div class="honeycombs">
      <div class="comb">
        <img src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2251&q=80" /><span> Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1527503499129-151b4843eff5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1469286714608-0defd688c4e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=956&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1513581166391-887a96ddeafd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1454486837617-ce8e1ba5ebfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1495954484750-af469f2f9be5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1474433188271-d3f339f41911?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1506953823976-52e1fdc0149a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1538964173425-93884d739596?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1496851002542-2fe43ae0ef15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2267&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1473951298521-f0f27c6bda7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1564067123764-f1181aea101f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2651&q=80" /> <span>Lorem Ipsum</span>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('.honeycombs').honeycombs({
      combWidth: 200,
      margin: 10
    });
  });
</script>

最佳答案

这是插入图像而不是文本的东西。显然,您希望迎合您的特定 Logo 和样式。

(function($) {
  $.fn.honeycombs = function(options) {
    // Establish our default settings
    var settings = $.extend(
      {
        combWidth: 250,
        margin: 10
      },
      options
    );

    function initialise(element) {
      $(element).addClass("honeycombs-wrapper");

      var width = 0;
      var combWidth = 0;
      var combHeight = 0;
      var num = 0;
      var $wrapper = null;

      /**
       * Build the dom
       */
      function buildHtml() {
        // add the 2 other boxes
        $(element)
          .find(".comb")
          .wrapAll('<div class="honeycombs-inner-wrapper"></div>');
        $wrapper = $(element).find(".honeycombs-inner-wrapper");

        $(element)
          .find(".comb")
          .append('<div class="hex_l"></div>');
        $(element)
          .find(".hex_l")
          .append('<div class="hex_r"></div>');
        $(element)
          .find(".hex_r")
          .append('<div class="hex_inner"></div>');

        $(element)
          .find(".hex_inner")
          .append(
            '<div class="inner_span"><div class="inner-text"></div></div>'
          );

        num = 0;

        $(element)
          .find(".comb")
          .each(function() {
            num = num + 1;
            var image = $(this)
              .find("img")
              .attr("src");
            var css = 'url("' + image + '") ';

            $(this)
              .find(".hex_inner")
              .attr("style", "background-image: " + css);

            if ($(this).find("span").length > 0) {
              $(this)
                .find(".inner_span .inner-text")
                .html('<img src="https://vuejs.org/images/logo.png" style="width:50px;height:50px;display:block !important" />');
            } else {
              $(this)
                .find(".inner_span")
                .remove();
            }
          });

        $(element)
          .find("img, span, .inner_span")
          .hide();
      }

      /**
       * Update all scale values
       */
      function updateScales() {
        combWidth = settings.combWidth;
        combHeight = Math.sqrt(3) * combWidth / 2;
        edgeWidth = combWidth / 2;

        $(element)
          .find(".comb")
          .width(combWidth)
          .height(combHeight);
        $(element)
          .find(".hex_l, .hex_r")
          .width(combWidth)
          .height(combHeight);
        $(element)
          .find(".hex_inner")
          .width(combWidth)
          .height(combHeight);
      }

      /**
       * update css classes
       */
      function reorder(animate) {
        updateScales();
        width = $(element).width();

        newWidth = num / 1.5 * settings.combWidth;

        if (newWidth < width) {
          width = newWidth;
        }

        $wrapper.width(width);

        var row = 0; // current row
        var upDown = 1; // 1 is down
        var left = 0; // pos left
        var top = 0; // pos top

        var cols = 0;

        $(element)
          .find(".comb")
          .each(function(index) {
            top =
              row * (combHeight + settings.margin) +
              upDown * (combHeight / 2 + settings.margin / 2);

            if (animate == true) {
              $(this).stop(true, false);
              $(this).animate({ left: left, top: top });
            } else {
              $(this)
                .css("left", left)
                .css("top", top);
            }

            left = left + (combWidth - combWidth / 4 + settings.margin);
            upDown = (upDown + 1) % 2;

            if (row == 0) {
              cols = cols + 1;
            }

            if (left + combWidth > width) {
              left = 0;
              row = row + 1;
              upDown = 1;
            }
          });

        $wrapper
          .width(cols * (combWidth / 4 * 3 + settings.margin) + combWidth / 4)
          .height((row + 1) * (combHeight + settings.margin) + combHeight / 2);
      }

      $(window).resize(function() {
        reorder(true);
      });

      $(element)
        .find(".comb")
        .mouseenter(function() {
          $(this)
            .find(".inner_span")
            .stop(true, true);
          $(this)
            .find(".inner_span")
            .fadeIn();
        });

      $(element)
        .find(".comb")
        .mouseleave(function() {
          $(this)
            .find(".inner_span")
            .stop(true, true);
          $(this)
            .find(".inner_span")
            .fadeOut();
        });

      buildHtml();
      reorder(false);
    }

    return this.each(function() {
      initialise(this);
    });
  };
})(jQuery);
/*Codepen display adjustments*/
.container {
  width: 90%;
  margin: 0 auto;
}
.wrap {
  margin: 150px 0px;
}

/*Honeycomb CSS*/
.honeycombs {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.honeycombs .inner_span {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: rgba(12, 12, 12, 0.65);
  font-family: sans-serif;
  color: #000;
}
.honeycombs .inner-text {
  padding-top: 40%;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
}

.inner-text img {
  display: block !important;
}


.honeycombs .honeycombs-inner-wrapper {
  display: inline-block;
  overflow: hidden;
  width: 700px;
  position: relative;
  height: 1200px;
}

.honeycombs .comb {
  position: absolute;
  display: inline-block;
}

.honeycombs .hex_l,
.honeycombs .hex_r {
  overflow: hidden;
  position: absolute;
  /* -webkit-backface-visibility: hidden; */
}

.honeycombs .hex_l {
  visibility: hidden;
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);

  transform: rotate(60deg);
}

.honeycombs .hex_r {
  visibility: hidden;
  -moz-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  -webkit-transform: rotate(-120deg);

  transform: rotate(-120deg);
}

.honeycombs .hex_inner {
  display: block;
  visibility: visible;
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);

  transform: rotate(60deg);

  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrap">
    <div class="honeycombs">
      <div class="comb">
        <img src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2251&q=80" /><span> Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1527503499129-151b4843eff5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1469286714608-0defd688c4e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=956&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1513581166391-887a96ddeafd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1454486837617-ce8e1ba5ebfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1495954484750-af469f2f9be5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1474433188271-d3f339f41911?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1506953823976-52e1fdc0149a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1538964173425-93884d739596?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1496851002542-2fe43ae0ef15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2267&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1473951298521-f0f27c6bda7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" /> <span>Lorem Ipsum</span>
      </div>
      <div class="comb"><img src="https://images.unsplash.com/photo-1564067123764-f1181aea101f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2651&q=80" /> <span>Lorem Ipsum</span>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('.honeycombs').honeycombs({
      combWidth: 200,
      margin: 10
    });
  });
</script>

关于javascript - 如何在十六进制网格上用图像替换悬停文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57311237/

相关文章:

python - 在我的代码中添加边框和图像

javascript - 在移动设备上禁用粘性导航

css - 图片和文字重叠

c++ - 找到两幅图像之间的相同区域

html - 使用数据库中的图像使用 itextsharp 创建 pdf

ruby-on-rails - Rails + Dragonfly gem : Saving image in a directory structure based on ActiveRecord object attributes

JavaScript 对日期和时间进行降序排序

javascript - 无法使用 JS 打印 PHP 变量

javascript - 为什么我不能使用 window.open() 打开多个页面?

javascript - Meteor:从服务器上的url获取查询参数?用例 Instagram oAuth