1
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();
  },

});
Community
  • 1
  • 1
Abdul Sadik Yalcin
  • 1,744
  • 2
  • 19
  • 50
  • you might want to use `document.querySelector(".active iframe")` – S4beR Mar 17 '16 at 11:02
  • I have tried that already :( – Abdul Sadik Yalcin Mar 17 '16 at 11:09
  • just tested in IE and seems to be working. can you check the plnkr link i just posted – S4beR Mar 17 '16 at 11:11
  • Please share the code required to reproduce the problem. We don't even know whether you have an element with an active class or an iframe... and btw, what does this has to do with backbone.js? – T J Mar 17 '16 at 11:17
  • @TJ sorry I'm lost. It doesn't work in Safari & IE. The element exists because it works in Chrome+Firefox, no? – Abdul Sadik Yalcin Mar 17 '16 at 11:25
  • @Devrim You commented on another answer *"Chrome: `Uncaught TypeError: Cannot read property 'id' of undefined(…)`"* maybe that is specific to that answer... Maybe `runAnimation` is not even executing in other browsers..? We need a [mcve] to be sure. – T J Mar 17 '16 at 11:57
  • @TJ Yes, that was specific to that answer. The code above is fine in Chrome+Firefox. I can post more code of course if it helped but I don't think it will. See edit. – Abdul Sadik Yalcin Mar 17 '16 at 12:56

1 Answers1

0

i tried like this and it seems to work

var iframe = document.querySelector('.container iframe');
window.frames[iframe.id].contentWindow.runAnimation();

https://plnkr.co/edit/0pquvlK3beF1pqMcU1lc?p=preview

S4beR
  • 1,872
  • 1
  • 17
  • 33