Angular 2：iframe 在 chrome 中加载，但在 Firefox 中没有加载答案

【问题标题】：Angular 2 : iframe is loading in chrome but its not loading in firefoxAngular 2：iframe 在 chrome 中加载，但在 Firefox 中没有加载
【发布时间】：2016-12-07 05:02:08
【问题描述】：

我很困惑为什么 iframe 没有在 Firefox 中加载。但它在谷歌浏览器中运行良好。

这是我的 Angular 2 代码。

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 nopadding customPaddingOnMobileDevice" [ngClass]="{visibility: isMapViewHidden}">
   <div [style.height]="(windowHeight - 130) + 'px'">
    <div class="modal-header alert-info">
        <button type="button" class="close" (click)="hideBookingView()">&times;</button>
        <h4 class="modal-title text-center">FMA - Book Appointment </h4>
    </div>

    <iframe width="100%" height="790px;" [src]="'https://something.health.care/public/rmd_widget.php?shortname=something&width=1920#doctorLocationsContainer' | safeUrl"></iframe> 
  </div></div>

但是我在 chrome 加载我的地图组件时观察到的一件事我可以看到这个 iframe url 正在加载。但在 Firefox 中我看不到这个 iframe url 加载。

有人遇到过这种问题吗？

【问题讨论】：

浏览器控制台有错误信息吗？
我看不到任何错误
如果您调查 DOM，<iframe> 元素是否具有正确的 src="..." 属性值？
它在 chrome 浏览器上运行良好，是的，我检查了 firefox dom url 是正确的，它的显示内容也
可能是这样。我们仍然需要有关 Firefox 不同之处的信息来追踪根本原因。那么当您检查 DOM 时，Firefox 是否显示预期的 src 属性值？ <ifram> 是否包含任何内容？

标签： google-chrome firefox angular iframe

【解决方案1】：

好的，终于成功确定了问题。

我正在使用 ngClass，因为它不能在 Firefox 中工作，但不知何故它在 chrome 中工作。

我将 ngClass 更改为 *ngIf 它在两个浏览器中都可以使用。

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 nopadding customPaddingOnMobileDevice animated fadeInDown" [ngClass]="{visibility: bookAppointmentVisibility}">

到

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 nopadding customPaddingOnMobileDevice animated fadeInDown" *ngIf="!bookAppointmentVisibility">

【讨论】：