Question

我正在测试jquery-oembed-all作为another question的解决方案。该脚本是一个加载在页面中的小javascript文件，并提供用于获取媒体嵌入代码的oembed函数。

我很容易从链接中获取oEmbed iframe：

<script>
  $(function(){
    tag = $(document.createElement('div')).oembed('https://vimeo.com/40179668');
    $('.header').append(tag);
  });
</script>

这很有效，并将oEmbed生成的iframe元素添加到页面上的.header。但是我需要将生成的HTML作为字符串。在tag[0].outerHTML甚至是tag[0].parent()[0].outerHTML中进行了调查，只显示tag是脚本中创建的原始空div，但它显然包含所有嵌入代码，因为嵌入的视频在页面上加载。

如何将oembed函数返回的HTML作为文本字符串？我是否需要从创建的div标记中遍历DOM才能找到它？

修改我添加了一些警报，这与时间有关。因为它是一个网络调用，所以当我查询outerHTML时，oEmbed函数还没有返回HTML块。

编辑2： 看起来这可以通过JS回调来解决，因为oEmbed调用是异步的。当我有时间寻找解决方案时，我会将其作为答案发布回来。

Answer 1

<强> SOLUTION：

由于这是一个Rails应用程序，我决定使用oembed gem并在显示文本时解析视频链接，而不是在输入时解析。这对我来说是最好的解决方案，因为存储裸视频URL比存储oembed返回的完整嵌入iframe代码更具有前瞻性，并希望它永远不会改变。

这段代码很快被黑客攻击，很快就需要重构，但它现在正常运行，而且失败对应用程序来说并不重要。

在显示课程时，我在parse_media_embeds上运行lesson.notes，找到所有链接，对于任何匹配的媒体网站，它都会获取oEmbed代码（错误为rescue）和用iframe替换链接。完全是janky，但它允许我继续使用该应用程序。

我会在重构时发布新代码。

查看：lesson.html.rb

...
<section class='lesson-notes'>
  <p><%= lesson.parse_media_embeds.html_safe %></p>
</section>
...

MODEL：lesson.rb

def parse_media_embeds
  # get an array of links in the notes
  links = URI.extract self.notes, /http(s)?/
  # due to wysihtml5 parsing each link is stored twice, once as url and once as text
  # like <a href='http://google.com'>http://google.com</a>
  # so remove the double references
  for pos in (0..links.count)
    link.delete_at(pos)
  end
  # now replace each link that matches the Regexp pattern with oembed version
  links.each do |link|
    # only replace links for YouTube, Vimeo and Soundcloud
    if link.match(/youtu\.be|youtube|vimeo|soundcloud/)
      # get the full link tag, which includes both instances of the link text
      string = /(<a\w*[^>]*>#{Regexp.escape(link)}[^<]*<\/a>)/
      embed = get_oembed(link)
      self.notes = self.notes.gsub(string, embed) if embed
    end
  end
  self.notes
end

MODEL：lesson.rb

def get_oembed(link)
  # each provider has a different set of params
  if link.match(/youtu\.be|youtube/)
    begin
      resource = OEmbed::Providers::Youtube.get(link, {maxwidth: 320})
    rescue
      return
    end
    resource.html
  elsif link.match(/vimeo/)
    begin
      resource = OEmbed::Providers::Vimeo.get(link, {maxwidth: 320})
    rescue
      return
    end
    resource.html
  elsif link.match(/soundcloud/)
    begin
      resource = OEmbed::Providers::SoundCloud.get(link, {color: '39d', show_comments: false})
    rescue
      return
    end
    resource.html
  else
    return
  end
end

如何将jquery-oembed-all返回的HTML作为字符串？

1 个答案: