FancyBox与iframe在Chrome中工作，但不能在IE或FireFox中工作

问题描述：

Fancybox模式窗口在Chrome中工作，但在IE或FireFox中不起作用。要查看此请转至https://billiving-qa.azurewebsites.net/spa1/#/invoice 单击“模板样式”窗口。FancyBox与iframe在Chrome中工作，但不能在IE或FireFox中工作

HTML：

<a fancybox="" href="#/templates?mp=b" class="btn fb-templates fancybox.iframe"><i class="fa fa-font"></i> Template Styles</a>

指令

myApp.directive('fancybox', ['$compile', '$timeout', function ($compile, $timeout) { 
    return { 
     link: function ($scope, element, attrs) { 
      element.fancybox({ 
       hideOnOverlayClick: false, 
       hideOnContentClick: false, 
       enableEscapeButton: false, 
       showNavArrows: false, 
       scrolling: false, 
       iframe: {'scrolling': 'no'}, 
       onComplete: function() { 
        $timeout(function() { 
         $compile($("#fancybox-content"))($scope); 
         $scope.$apply(); 
         $.fancybox.resize(); 
        }); 
       } 
      }); 
     } 
    } 
}]);

答

显然，这只是发生在一个页面中的应用。我最后的解决方法是添加另一个html页面，并在调用弹出窗口时引用它：

<a fancybox="" href="popup.html#/templates?mp=b" class="btn fb-templates fancybox.iframe"><i class="fa fa-font"></i> Template Styles</a>

FancyBox与iframe在Chrome中工作，但不能在IE或FireFox中工作

相关推荐