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

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

解决方案：

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

这段代码很快就被破解了，需要尽快重构，但它现在运行良好，而且失败对应用程序来说并不重要。

在显示课程时，我在 lesson.notes 上运行 parse_media_embeds，它会找到所有链接，对于任何匹配的媒体站点，它会获取 oEmbed 代码（带有 rescue 表示错误）并用 iframe 替换链接.完全笨拙，但它让我可以继续使用该应用程序。

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

查看：课程.html.rb

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

模型：课程.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

模型：课程.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