私は、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>
正しい方向を教えてください。
EDITED:私は、要求ごとのように完全なコードを提供するために、以前のコードを編集しました。これはMeteorJsプロジェクトの一部で、Blazeを使用しています。
この機能の使い方は表示されていません。 **ランナブル** [mcve]を提供してください。コード – charlietfl
の画像ではなく実際のコードを掲載するこの問題は、関数自体を実行するのではなく、関数を実行する部分の可能性が高いです。コードを見せてくれますか? –
@charlietflこれはmeteorjsプロジェクトの一部であるため、実行可能な例は提供できません。上記の質問を編集して完全なコードを提供しました。 –