runAnimation: function(){
var iframe = document.querySelector('.active iframe');
window.frames[iframe.id].contentWindow.runAnimation();
},
The above code prints the following error in Safari:
TypeError: undefined is not an object (evaluating 'window.frames[iframe.id].contentWindow.runAnimation')
I have tried the answer here, here and here, basically every possible solution.
Another interesting thing to point out is window returns undefined on Safari only!
/**
* @property {array} Templates.slide - The template part for each slide
* Html template for app
*/
//Iframe Template
presenter.Templates.slide = [
'<iframe id="slide-<%= id %>" class="slide" data-disable-back="<%= disableBack %>" data-disable-forward="<%= disableForward %>" data-position="<%= position %>" data-src="<%= url %>">',
].join('\n');
/**
* Default options for the carousel.
* @public
*/
//Owl Carousel options
Owl.Defaults = {
...
// Classes and Names
themeClass: 'owl-theme',
baseClass: 'owl-carousel',
itemClass: 'owl-item',
centerClass: 'center',
activeClass: 'active'
};
/**
* The main view for the presentation
* This renders a collection presentation
* Builds owlCarousel and attaches api controls
*/
presenter.PresentationView = Backbone.View.extend({
...
/**
* Runs slide animation. Called on the slide itself once its loaded
*/
runAnimation: function(){
var iframe = document.querySelector('.active iframe');
window.frames[iframe.id].contentWindow.runAnimation();
},
...
/**
* Adds listners for carousel events. Used to trigger runAnimation along with
* other function
*/
carouselEvents: function(){
var self = this;
this.slider.on('translated.owl.carousel', function(){
self.showControls();
self.runAnimation();
});
},
/**
* Standard backbone method. Called when view is instantiated
* @param {object} options - Options passed when creating the view
* (such as instanceURL)
*/
initialize : function(options){
this.options = options;
this.render();
this.buildSlider();
this.loadFour();
this.carouselControls();
this.carouselEvents();
this.keyNavigation();
this.UIEvent();
this.reScale();
},
});
