Question

我有一个由oembed吐出的代码块。然后我需要定位iframe的src属性并将其替换为data-src。

她现在所拥有的：

embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {          
          var embed_html = (data.html).replace('src', 'data-src');
          $( "div#item"+number).html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };    

$.ajax(embed_request);

问题是上面的我的replace（）在代码块data.html中改变了太多src

我如何通过javascript或jquery告诉var embed_html = (data.html).replace('src', 'data-src');只更改它在html代码块中运行的iframe的src。

今天不幸的是，我当前的代码不仅更改了下面的iframe src，还更改了src="//platform.instagram.com/en_US/embeds.js"的src：

<iframe src="https://www.instagram.com/p/64567SDFFDFS/embed/captioned/?cr=1&amp;v=7" class="instagram-media instagram-media-rendered" id="instagram-embed-0"  allowtransparency="true" frameborder="0" height="849" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="border: 1px solid rgb(219, 219, 219);"></iframe>
<script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>

所以我进入最后的吐痰视图：

<iframe data-src="https://www.instagram.com/p/64567SDFFDFS/embed/captioned/?cr=1&amp;v=7" class="instagram-media instagram-media-rendered" id="instagram-embed-0"  allowtransparency="true" frameborder="0" height="849" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="border: 1px solid rgb(219, 219, 219);"></iframe>
    <script async="" defer="" data-src="//platform.instagram.com/en_US/embeds.js"></script>

如何定位iframe的src？

由于

修改

以下是oembed

吐出的html块代码的两个示例

的Instagram

<div class="item active" id="item1">
<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px; background: rgb(255, 255, 255);"></iframe>
    <script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>
</div>

实

<div class="item " id="item2">

          <div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="Facebook Cross Domain Communication Frame" aria-hidden="true" tabindex="-1" id="fb_xdm_frame_http" src="http://staticxx.facebook.com/connect/xd_arbiter/r/0eWevUAMuoH.js?version=42#channel=f3e391184&amp;origin=http%3A%2F%2Flocalhost%3A3000" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="Facebook Cross Domain Communication Frame" aria-hidden="true" tabindex="-1" id="fb_xdm_frame_https" src="https://staticxx.facebook.com/connect/xd_arbiter/r/0eWevUAMuoH.js?version=42#channel=f3e391184&amp;origin=http%3A%2F%2Flocalhost%3A3000" style="border: none;"></iframe></div></div></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script><div class="fb-post fb_iframe_widget" data-href="https://www.facebook.com/cocacolafrance/posts/1526674334016658" data-width="536" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;container_width=0&amp;href=https%3A%2F%2Fwww.facebook.com%2Fcocacolafrance%2Fposts%2F1526674334016658&amp;locale=fr_FR&amp;sdk=joey&amp;width=536"><span style="vertical-align: bottom; width: 536px; height: 404px;"><iframe name="f2115553f8" width="536px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:post Facebook Social Plugin" src="https://www.facebook.com/v2.3/plugins/post.php?app_id=&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0eWevUAMuoH.js%3Fversion%3D42%23cb%3Dfc155ce24%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A3000%252Ff3e391184%26relation%3Dparent.parent&amp;container_width=0&amp;href=https%3A%2F%2Fwww.facebook.com%2Fcocacolafrance%2Fposts%2F1526674334016658&amp;locale=fr_FR&amp;sdk=joey&amp;width=536" class="" style="border: none; visibility: visible; width: 536px; height: 404px;"></iframe></span></div></div>

Answer 1

您可以先将标记字符串转换为HTML元素（在DOM之外），然后找到任何iframe元素，替换它们的属性，并将整个内容添加到DOM中：

embed_request = {
  url: url,
  dataType: "jsonp",
  cache: false,
  success: function (data) {
    try {          
      $(data.html).filter('iframe').each(function() {
        var $this = $(this);
        $this.attr('data-src', $this.attr('src')).removeAttr('src');
      }).end().appendTo("div#item"+number);
    } catch (err) {
      console.log(err);
    }
  }
};    

$.ajax(embed_request);

这是一个模型（用函数调用替换了ajax调用等）来表明它正在工作：

var number = 1,
    data = {html: atob("PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3Lmluc3RhZ3JhbS5jb20vcC82NDU2N1NERkZERlMvZW1iZWQvY2FwdGlvbmVkLz9jcj0xJmFtcDt2PTciIGNsYXNzPSJpbnN0YWdyYW0tbWVkaWEgaW5zdGFncmFtLW1lZGlhLXJlbmRlcmVkIiBpZD0iaW5zdGFncmFtLWVtYmVkLTAiICBhbGxvd3RyYW5zcGFyZW5jeT0idHJ1ZSIgZnJhbWVib3JkZXI9IjAiIGhlaWdodD0iODQ5IiBkYXRhLWluc3Rncm0tcGF5bG9hZC1pZD0iaW5zdGFncmFtLW1lZGlhLXBheWxvYWQtMCIgc2Nyb2xsaW5nPSJubyIgc3R5bGU9ImJvcmRlcjogMXB4IHNvbGlkIHJnYigyMTksIDIxOSwgMjE5KTsiPjwvaWZyYW1lPjxzY3JpcHQgYXN5bmM9IiIgZGVmZXI9IiIgc3JjPSIvL3BsYXRmb3JtLmluc3RhZ3JhbS5jb20vZW5fVVMvZW1iZWRzLmpzIj48L3NjcmlwdD4=")}; // this is the html provided by you, containing the iframe and script tag, but I had to base64 encode it, as otherwise the code snippet tool wouldn't let me insert it

(function (data) {
  try {          
    $(data.html).filter('iframe').each(function() {
      var $this = $(this);
      $this.attr('data-src', $this.attr('src')).removeAttr('src');
    }).end().appendTo("div#item"+number);
  } catch (err) {
    console.log(err.message);
  }
})(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item1"></div>

在ajax_injected代码块

1 个答案: