jquery - jQuery - 来自输入的 iframe src

问题描述

我从的每个实例iframe接收它，但我认为我的代码正在迭代每个发生的实例。srcinput.item.itemkeyup

如何修改代码以仅在更改.item该input项目的对象上执行？我想将它放在iframe复制/粘贴 url 后出现的位置。它不必在 keyup 上，但只要成功输入 url -> 显示iframe.

额外要求:: 我只想在 iframe 中显示value关联的内容时显示它input，无论是在加载时还是在输入链接时。

代码笔： https ://codepen.io/moofawsaw/pen/wvGNvrx

$(document).ready(function() {
  iframeKeyup();

  function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
      return match[2];
    } else {
      return "error";
    }
  }
  $("input").on("keyup change", function() {
    iframeKeyup();
  });

  var myId;

  function iframeKeyup() {
    $(".item").each(function() {
      var $this = $(this);
      var myUrl = $this.find("input").val();
      myId = getId(myUrl);
      $this
        .find(".iframe")
        .html(
          '<iframe width="100%" height="100" src="//www.youtube.com/embed/' +
          myId +
          '" frameborder="0" allowfullscreen></iframe>'
        );
    });
  }
});

.item {
  height: 100px;
  width: 100px;
  margin: 1.3rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <input type="text" value="https://www.youtube.com/watch?v=I7QJkecUpi8" />
  <div class="iframe"></div>
</div>

<div class="item">
  <input type="text" value="" />
  <div class="iframe"></div>
</div>

标签： jquery

解决方案

您可以将父元素传递给您iframeKeyup，然后iframe仅在到实际键入的输入时才找到要加载的paste或input。

此外，检查输入是否empty只是check它是否有val()，否则iframe再次为空。

编辑：由于您要加载iframeif 输入具有默认值，因此您需要设置 aflag并在调用时传递true给falseyour iframeKeyup which 将检查其是键入的输入iframe加载还是仅加载iframe-

现场演示：

$(document).ready(function() {
  iframeKeyup(false)

  function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
      return match[2];
    } else {
      return "error";
    }
  }
  $("input").on("input paste", function() {
    var parent = $(this).parent()
    iframeKeyup(true, parent); //pass the parent on input or paste
  });

  var myId;

  function iframeKeyup(isTyped, parent = null) {
    if (isTyped) {
      loadiFrame(parent)
    } else {
      $(".item").each(function(index, element) {
        var $item = $(element);
        loadiFrame($item)
      })
    }
  }

  function loadiFrame(parent) {
    var myUrl = parent.find("input").val();
    if (myUrl != '') {
      myId = getId(myUrl);
      parent
        .find(".iframe")
        .html(
          '<iframe width="100%" height="100" src="//www.youtube.com/embed/' +
          myId +
          '" frameborder="0" allowfullscreen></iframe>'
        );
    } else {
      parent
        .find(".iframe")
        .html('')
    }
  }
});

.item {
  height: 100px;
  width: 100px;
  margin: 1.3rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <input type="text" value="https://www.youtube.com/watch?v=I7QJkecUpi8" />
  <div class="iframe"></div>
</div>

<div class="item">
  <input type="text" value="" />
  <div class="iframe"></div>
</div>

<div class="item">
  <input type="text" value="https://www.youtube.com/watch?v=I7QJkecUpi8" />
  <div class="iframe"></div>
</div>

jquery - jQuery - 来自输入的 iframe src - 多个实例

问题描述

解决方案

推荐阅读