2017-05-21 16 views
-1

私は、HTMLコンポーネントからYouTubeリンクを検出するコードブロックを持っています。この関数は動作し、iframeを返しますが、返されるiframeは引用符 ""内にあります。これは、ページ上のiframeのレンダリングがキャンセルされたと思います。ここでは、コードです:有効なiframeを返すHTMLコード

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> 

を...と、これは、このようなものを返す: error in iframe codeblock

とこれはブラウザ上での表示方法です。 iframe didnt render correctly

正しい方向を教えてください。

EDITED:私は、要求ごとのように完全なコードを提供するために、以前のコードを編集しました。これはMeteorJsプロジェクトの一部で、Blazeを使用しています。

+0

この機能の使い方は表示されていません。 **ランナブル** [mcve]を提供してください。コード – charlietfl

+0

の画像ではなく実際のコードを掲載するこの問題は、関数自体を実行するのではなく、関数を実行する部分の可能性が高いです。コードを見せてくれますか? –

+0

@charlietflこれはmeteorjsプロジェクトの一部であるため、実行可能な例は提供できません。上記の質問を編集して完全なコードを提供しました。 –

答えて

0

@charlietfl & @ThomasvanBroekhoven。

これは私が見つけた解決策です: 生のHTMLをページに戻すには、{{youtube}}}をダブル{{youtube}}のままにしてください。

ソース:http://blazejs.org/api/spacebars.html

+0

問題ありません、あなたがそれを見つけられてうれしい! –

関連する問題