IE 10 iframe无法渲染

时间:2015-06-02 18:35:15

标签: angularjs internet-explorer iframe

这是一个有角度的应用程序但我相信错误仅在IE中与iframe和src属性有关。它在Chrome中渲染得很好。它是一个大型应用程序,因此很难在jsfiddle中填充错误。以下是相关内容。

html / angular markdown:

  <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>

angular print-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问题没有解决这个问题。

1 个答案:

答案 0 :(得分:1)

iframe和Angular总是产生一些hickup。 我发现的问题很容易描述:

如果你在某个地方有一个iframe并使用angular来设置源代码,那么在将iframe添加到DOM之后,浏览器将立即开始抓取src。

这会导致问题,通常不仅仅是在IE中。 我在项目中找到的解决方案是添加一个专门的lazyiframe指令,只要对所有必要的属性进行评估(而不是未定义),它就只会将iframe添加到dom中。

在您的情况下,问题很可能与ng-src有关,可能会导致以下问题:

  • 将iframe添加到没有src属性的dom
  • 即注册iframe并抓取来源
  • 即使iframe失败并停止
  • src已更改但由于IE错误而未重新加载iframe

如果您需要帮助制作lazyiframe指令,我可以提供更多详细信息。