Question

我有一段代码可以检测来自HTML组件的youtube链接。该函数有效，它返回一个iframe，但问题是返回的iframe在引号“”内，我认为取消了页面上iframe的呈现。这是代码：

    Template.statusBox.helpers({
  statuses: function(){
    return Status.find({}, {sort: {createdAt: -1}});
  },
  formattedDate: function(){
    var timecreated = this.createdAt;
    return moment(timecreated).fromNow();
  },
  author: function(){
    return this.author;
  },
  youtube: function(){
    var content = document.getElementsByClassName('hz-status-content');
    var innerContent = content[0].innerHTML;

    //regex to identify Youtube link in status
    const parts = (/(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/([\w\=\?]+)/gm).exec(innerContent)
    let mediaContent = ''

    if (parts && parts[3]) {
      let id = parts[3]

      if (id.indexOf('v=') > -1) {
        const subParts = (/v=([\w]+)+/g).exec(id)

        if (subParts && subParts[1]) {
          id = subParts[1]
        }
      }

      mediaContent = `http://www.youtube.com/embed/${id}`
    }
    var hzYoutube =  '<iframe src="'+ mediaContent +'" type="text/html" frameborder="0"></iframe>'
    return hzYoutube;

  }
});

...我在我的HTML代码中调用助手：

<template name="statusBox">
  {{#each statuses}}
  <div class="hz-newsfeed small-12 columns">
    <div class="small-2 columns">
      <img src="/hand.gif">
    </div>
    <div class="hz-newsfeed-name small-10 columns">
      {{author}} <span class="hz-greyfont">posted a status</span><br/>
      <span class="hz-greyfont-smaller"><i class="fa fa-clock-o" aria-hidden="true"></i> {{formattedDate}}</span>
    </div>
    <hr/>
    <div class="row">
      <div class="small-12 columns">
        <p class="hz-status-content">{{{status}}}</p>
        {{#with FS.GetFile "images" images}}
          <div class="row text-center">
            <a href="{{this.url}}" data-lightbox="newsfeedimages" class="thumbnail">
              <img src="{{this.url store='thumb'}}" />
            </a>
          </div>
        {{/with}}
        {{youtube}}
      </div>
    </div>
    <div class="row comment-section">
        {{> commentsBox id=this._id}}
    </div>
  </div>
  {{/each}}
</template>

...这会返回如下内容：

这就是它在浏览器上的外观：

你能指出我正确的方向吗？

已编辑：我已编辑上一代码，以根据要求提供完整代码。这是MeteorJs项目的一部分，我正在使用Blaze。

Answer 1

对不起你的麻烦@charlietfl＆amp; @ThomasvanBroekhoven。

这是我找到的解决方案：使用三重花括号的把手{{{youtube}}}，只需加倍{{youtube}}即可将原始HTML返回页面。

来源：http://blazejs.org/api/spacebars.html

返回有效的iframe HTML代码

1 个答案: