Question

这是一个有角度的应用程序但我相信错误仅在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问题没有解决这个问题。

Answer 1

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

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

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

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

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

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

IE 10 iframe无法渲染

1 个答案: