IE 10 iframe 不呈现

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>

角度打印 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 总是会产生一些问题。 我发现的问题很容易描述：

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

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

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

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

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