Как получить доступ к элементам iframe из vue?

Рейтинг: 0Ответов: 0Опубликовано: 08.06.2023
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 к плееру внутри ифрейма.

Ответы

Ответов пока нет.