0

我正在测试jquery-oembed-all作为我提出的另一个问题的解决方案。该脚本是加载在页​​面中的一个小型 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.

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

4

1 回答 1

0

解决方案：

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

这段代码很快就被破解了，需要尽快重构，但它现在运行良好，并且失败对应用程序没有任何影响。

当显示我运行的课程parse_media_embeds时，lesson.notes它会找到所有链接，对于任何匹配的媒体站点，它会获取 oEmbed 代码（带有rescue错误的 a）并用 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
于 2013-12-07T20:22:48.937 回答