IE 10 iframe not rendering

Question

Это в угловом приложении, но я считаю, что ошибка лежит исключительно в IE, относящейся к атрибуту iframe и src. Он отлично работает в Chrome. Это большое приложение, поэтому сложно выполнить симуляцию ошибки в jsfiddle. Вот соответствующие штуки.

HTML,/угловая уценки:

<div ng-repeat="form in formsToPrint"> 
    <h5>{{ form.FormName }} - {{ form.PageStatus }}</h5> 
    <iframe ng-if="form.FormId != '9' && form.FormId != '10'" 
      ng-src="{{ form.PageSrcUrl }}" 
      print-iframe seamless="seamless"></iframe> 
     <div ng-if="form.FormId == '9'" ng-repeat="srp in srpsToPrint"> 
      <h5>{{ srp.SrpCode }} - {{ srp.PageStatus }}</h5> 
      <iframe ng-src="{{ srp.PageSrcUrl }}" 
        print-iframe seamless="seamless"></iframe> 
     </div> 
     <div ng-if="form.FormId == '10'" ng-repeat="srp in localPackagesToPrint"> 
      <h5>{{ srp.SrpCode }} - {{ srp.PageStatus }}</h5> 
      <iframe ng-src="{{ srp.PageSrcUrl }}" 
        print-iframe seamless="seamless"></iframe> 
     </div> 
    </div> 

Угловая директива печати IFrame:

.directive("printIframe", function() { 
    return { 
     link: function(scope, element, attr) { 
      element.on("load", function() { 
       var self = this, 
        timeout = 8000; 
       if (self.src.indexOf("#/forms/8") !== -1 
        || self.src.indexOf("#/forms/5") !== -1 
        || self.src.indexOf("#/forms/36") !== -1 
        || self.src.indexOf("#/forms/9") !== -1 
        || self.src.indexOf("#/forms/10") !== -1 
        || self.src.indexOf("#/forms/19") !== -1 
        || self.src.indexOf("#/forms/37") !== -1 
        || self.src.indexOf("#/forms/38") !== -1) { 
        timeout = 8000; 
       } 

       setTimeout(function() { 
        $(element).contents().find("div.navbar").hide(); 
        $(element).contents().find("div.binder-menu").hide(); 
         $(element).contents().find("div.commonButtonBarContainer").hide(); 
        $(element).contents().find("textarea.notes").closest("fieldset").hide(); 
        $(".formContainer.print").height("100%"); 
        $(".formContainer.print").width("100%"); 

        var height = $(element).contents().outerHeight(); 
        var width = $(element).contents().outerWidth(); 

        if (height !== 0) { 
         $(element).height(height + 100); 
         $(element).width(width + 100); 
        } 

        $(element).contents().find(".formContainer").css({ "margin-left": "25px" }); 

        $(element).show(); 

        scope.showPrintWindow(); 
        console.dir(scope); 
       }, timeout); 
      }); 
     } 
     } 
    })  

Я не могу осмотреть имущество PageSrcUrl в консоли, но я предполагаю, что это правильно, потому что ему работает в Chrome. DOCTYPE объявляется правильно.

Другие проблемы с stackoverflow, которые я нашел, не решают проблему.

Answer 1

IFrames and Angular всегда производит некоторые завитки. Проблема, которую я нашел для этого, может быть легко описана:

Если у вас есть iframe где-то и использовать углы, чтобы, например, установить источник, браузер начнет захватывать src сразу после добавления iframe в DOM.

Это приводит к проблемам, часто не только в IE. Решение, которое я нашел в нашем проекте, состоит в том, чтобы добавить специализированную директиву lazyiframe, которая добавит iframe только к dom, как только все необходимые атрибуты будут оцениваться (а не неопределены).

В вашем случае, проблема, скорее всего, связано с ng-src, которые могут привести к следующему:

• IFrame добавляется йот, без атрибута SRC
• т.е. регистрирует IFRAME и захватывает источник
• т.е. проваливает IFRAME и останавливает
• ЦСИ изменяется, но IFrame повторно не загружается из-за IE ошибка

Если вам нужна помощь в разработке директивы lazyiframe, я могу предоставить дополнительную информацию.