使用 .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");

使用 .load() 方法检测并交付多个 wrap() 函数？

Using a .load() Method to Detect and Deliver Multiple wrap() Functions Within?

javascript

performance

jquery

load

function