使用.load（）方法检测并发送多个wrap（）函数？

Question

我开发了一个脚本，其目的是从列出的url源位置获取（加载）第一个内容条目。

在那些特定的位置，无论第一个条目如何，我希望iframe（如果在该条目中检测到）将相应的包裹函数应用于它，（如下所示）。

这是脚本的一个例子：

$("#embed-content-div1").load("https://theurl.com/urltosource1/ #entry:first");
$("#embed-content-div2").load("https://theurl.com/urltosource2/ #entry:first", function(data) {
  $(function() {
    $("iframe.content1").wrap("<div class='content1-wrap'></div>");
  });
  $(function() {
    $("iframe.content2").wrap("<div class='content2-wrap'></div>");
  });
  $(function() {
    $("iframe.content3").wrap("<div class='content3-wrap'></div>");
  });
});

但是，这个特定的脚本似乎并不一致，并且在Chrome和Safari中的某些情况下出现故障。当整个页面刷新时，它似乎最有效。

有没有更好的方法来实现这一目标，确保它能够提供更好的跨浏览器性能？

Answer 1

由于您要将相同的内容加载到每个元素中，因此您应该在每个元素内部查找要包装的iframe。 load()是异步的，所以当你只使用其中一个回调时，时间可以关闭

您可以在一个简单的包装函数中复制每个代码，而不是复制每个代码

function loadContent( selector, url){
  var $cont = $(selector);
  $cont.load(url, function(){
   $.each([1,2,3], function(_, num){
     $cont.find('iframe.content' + num).wrap('<div class="content'+ num +'-wrap"></div>')
   });   
  });
}

loadContent('#embed-content-div1','https://theurl.com/urltosource1/ #entry:first')
loadContent('#embed-content-div2','https://theurl.com/urltosource2/ #entry:first')

Answer 2

所以，我找到了一个解决方案，它既修复并改进了脚本的性能：

$(document).ready(function() {
  $("#embed-content-div2").load("https://theurl.com/urltosource2/ #entry:first", function(data) {
    $(function() {
      $("iframe.content1").wrap("<div class='content1-wrap'></div>");
    });
    $(function() {
      $("iframe.content2").wrap("<div class='content2-wrap'></div>");
    });
    $(function() {
      $("iframe.content3").wrap("<div class='content3-wrap'></div>");
    });
  });
});
$("#embed-content-div1").load("https://theurl.com/urltosource1/ #entry:first");