javascript - 使用jquery触发多个mailto链接

Question

我开始认为这甚至是不可能的，但我正在尝试通过允许同时启动多封电子邮件来自动执行后端管理任务。

我和用户有一张 table 。表的最后一列有一个下拉按钮，其中包含 mailto 链接，可以向该行的用户发起各种电子邮件。该列按钮旁边还有一个复选框。这是一个简化的代码片段:

  <table>
    <tr>
      <td>
        User
      </td>
      <td>
        <div class="btn-group individual-btn">
          <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
            Email User
          <ul class="dropdown-menu">
            <li>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you open?
              </a>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you click?
              </a>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you pay?
              </a>
          </ul>
        </div>
        <input type="checkbox" class="selected-row">
      </td>
    </tr>
    <tr>
      rinse and repeat...

在表格的末尾，我有一个具有相同操作集的按钮，但该按钮的想法是单击它将为每个选定的用户打开一封电子邮件(如复选框所示)。

    <div class="btn-group master-btn">
      <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
        Email All Checked Users
      <ul class="dropdown-menu">
        <li class="email-items">
          <a class="no-open" href="#">
            Why didn't you open?
          </a>
          <a class="no-open" href="#">
            Why didn't you click?
          </a>
          <a class="no-open" href="#">
            Why didn't you pay?
          </a>
      </ul>
    </div>

我认为 js 可能就是这么简单:

    $(".master-btn .email-items a").click(function(e){
      linkClass = "a." + $(this).attr("class").trim()
      $(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
      e.preventDefault();
    });

但这仅打开了第一个选定行的电子邮件。所以，我想，也许 dom 需要这些点击之间的空间，所以我将迭代每个点击并添加延迟来模拟点击；但结果相同:仅通过电子邮件发送第一个选定的行:

    $(".master-btn .email-items a").click(function(e){
      linkClass = "a." + $(this).attr("class").trim()
      $(".selected-row:checked").each(function(i){
        var self = this
        setTimeout(function(){
          $(self).prev(".individual-btn").find(linkClass)[0].click();
        }, 2000*i);
      });
      e.preventDefault();
    });

有什么想法吗？浏览器会允许这样做吗？

Answer 1

工作示例:https://jsfiddle.net/gaboom/h81qov5g/

$("#send").on("click", function(event) {
  event.preventDefault();
  $("#iframes").empty();
  $("#links a").each(function() {
    setTimeout($.proxy(function() {
      var popup = window.open($(this).attr("href"))
      setTimeout($.proxy(function() {
        this.close();
      }, popup), 100);
    }, this), 100)
  })
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="send" href="#">CLICK TO SEND</a>
<div id="links" class="hidden">
  <a href="mailto:john@example.com">John</a>
  <a href="mailto:sarah@example.com">Sarah</a>
  <a href="mailto:john@example.com">John</a>
  <a href="mailto:sarah@example.com">Sarah</a>
  <a href="mailto:john@example.com">John</a>
  <a href="mailto:sarah@example.com">Sarah</a>
</div>