Как получить доступ к элементам iframe из vue?
const YouTubePlayer =
{
methods:{
gettime()
{
let ytframe = this.$refs.frame;
ytplayer = document.getElementById("movie_player");
return ytplayer.getCurrentTime();
},
getIframeWindow(iframe_object)
{
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
},
// emits: ['OnAdded', 'OnMoved', 'OnDeleted'],
props: {
'url':
{ type: String, required: false},
'time':
{ type: String, required: false, default: null},
'width':
{ type: Number, required: false, default: 560},
'height':
{ type: Number, required: false, default: 315},
},
computed: {
url_for_embedded()// https://www.youtube.com/embed/2dLqBt8ZjR0?start=24 from
{
if(this.url==null) return "";
return this.url.replace(/https:\/\/www.youtube.com\/watch\?v=/gi, 'https://www.youtube.com/embed/')+(this.time==null ? "" : "?start="+this.time);
},
currtime()
{
let _document = this.getIframeWindow(this.$refs.frame);
ytplayer = _document.getElementById("movie_player");
return ytplayer.getCurrentTime();
},
},
template: `
<div>
<iframe :width="width" :height="height" :src="url_for_embedded" ref="frame" v-if="url!=null && url!=''"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</div> `
};
export { YouTubePlayer }
В методе gettime _document имеет тип global, а не document и через него не сделаешь getElementById к плееру внутри ифрейма.
Источник: Stack Overflow на русском