Sometimes an iframe on a page displays all content as invisible #9951

staffing created 3 years ago

System Configuration

What is your product version? 9.3.0
What is your product type (Angular or MVC)? Angular
What is product framework type (.net framework or .net core)? .Net Core 3.1

UI

Which theme are you using? Default with Light skin
What are the theme settings? Most settings are as default - I copied them in the next post here.

Issue

One of our pages has an iframe, which displays web pages from a subdomain (old VB.NET WebForms 4.0 site):

<iframe [src]="pageUrl | safeUrl" style="height: 100%;" frameBorder="0">
    <p>Your browser does not support iframes</p>
</iframe>

The pageUrl variable is changed by clicking on items in a navigation bar in the Angular app. Each of those items has a different value for the pageUrl.

This architecture works quite well the first 10-15 clicks on items in the navigation. After that, each click on a navigation item downloads the requested page successfully (browser's Network tab shows HTTP 200 and the actual ASPX response) but the iframe does not draw the content. The whole iframe content stays invisible (white), although loaded. This is experienced in latest Edge, Chrome (both confermed by me), and Safari (reported by a client).

There are a few symptoms that I think are important:

If I click and do not move the mouse, I see the web request fulfilled and the page stays white until I move the mouse over the iframe. The iframe content can stay white for a as long as I don't move the over.
When the page appears after the mouse hover, there is no activity in the Network tab and is definitely triggered by the mouse movement.
This "white page" effect happens even with ASPX pages that I have visited before and were displayed properly.
If somehow I move my mouse inside the iframe without triggering the redraw, I can see the mouse cursor changing when I go over a link or another element that has different cursor in the CSS.

The issue is most certainly in the Angular side as the pages may load properly and only the hover would display them.

There is nothing custom on our menu, CSS, or Angular for this behaviour to happen.

4 Answer(s)

staffing created 3 years ago

Here are the exported UI settings:

theme9.App.UiManagement.Header.DesktopFixedHeader	False
theme9.App.UiManagement.Header.MobileFixedHeader	False
theme9.App.UiManagement.MenuSearch	False
theme3.App.UiManagement.Header.DesktopFixedHeader	True
theme3.App.UiManagement.Header.MobileFixedHeader	False
theme3.App.UiManagement.SubHeader.Fixed	False
theme3.App.UiManagement.SubHeader.Style	NULL
theme3.App.UiManagement.Footer.FixedFooter	False
theme3.App.UiManagement.MenuSearch	False
theme5.App.UiManagement.Header.DesktopFixedHeader	True
theme5.App.UiManagement.Header.MobileFixedHeader	False
theme5.App.UiManagement.MenuSearch	False
theme6.App.UiManagement.Header.DesktopFixedHeader	True
theme6.App.UiManagement.Header.MobileFixedHeader	False
theme6.App.UiManagement.SubHeader.Fixed	False
theme6.App.UiManagement.SubHeader.Style	NULL
theme6.App.UiManagement.Footer.FixedFooter	False
theme6.App.UiManagement.MenuSearch	False
theme7.App.UiManagement.Header.DesktopFixedHeader	False
theme7.App.UiManagement.Header.MobileFixedHeader	False
theme7.App.UiManagement.SubHeader.Fixed	False
theme7.App.UiManagement.SubHeader.Style	NULL
theme7.App.UiManagement.Footer.FixedFooter	False
theme7.App.UiManagement.MenuSearch	False
theme8.App.UiManagement.Header.DesktopFixedHeader	True
theme8.App.UiManagement.Header.MobileFixedHeader	False
theme8.App.UiManagement.MenuSearch	False
theme10.App.UiManagement.Header.DesktopFixedHeader	True
theme10.App.UiManagement.Header.MobileFixedHeader	False
theme10.App.UiManagement.MenuSearch	False
theme11.App.UiManagement.Header.MobileFixedHeader	False
theme11.App.UiManagement.Left.FixedAside	True
theme11.App.UiManagement.MenuSearch	False
theme2.App.UiManagement.Header.DesktopFixedHeader	True
theme2.App.UiManagement.Header.MobileFixedHeader	False
theme2.App.UiManagement.MenuSearch	False
theme4.App.UiManagement.Header.DesktopFixedHeader	True
theme4.App.UiManagement.Header.MobileFixedHeader	False
theme4.App.UiManagement.MenuSearch	False
default.App.UiManagement.Left.AsideSkin	dark
default.App.UiManagement.SubHeader.Fixed	False
default.App.UiManagement.Header.DesktopFixedHeader	False
Abp.Localization.DefaultLanguageName	en-AU
Abp.Localization.DefaultLanguageName	en-AU
ExternalLoginProvider.Facebook.IsDeactivated	False
ExternalLoginProvider.Google.IsDeactivated	False
ExternalLoginProvider.Twitter.IsDeactivated	False
ExternalLoginProvider.Microsoft.IsDeactivated	False
ExternalLoginProvider.OpenIdConnect.IsDeactivated	False
ExternalLoginProvider.WsFederation.IsDeactivated	False
App.UserManagement.SessionTimeOut.TimeOutSecond	298
App.UserManagement.SessionTimeOut.ShowLockScreenWhenTimedOut	False
App.DashboardCustomization.Configuration.Angular	[{"DashboardName":"HostDashboard","Pages":[{"Id":"Pagefd5260c66782442890b424cb479fd4d0","Name":"Default Page","Widgets":[{"WidgetId":"Widgets_Host_TopStats","Height":4,"Width":12,"PositionX":0,"PositionY":0},{"WidgetId":"Widgets_Host_IncomeStatistics","Height":8,"Width":7,"PositionX":0,"PositionY":4},{"WidgetId":"Widgets_Host_RecentTenants","Height":9,"Width":5,"PositionX":7,"PositionY":12},{"WidgetId":"Widgets_Host_SubscriptionExpiringTenants","Height":9,"Width":7,"PositionX":0,"PositionY":12},{"WidgetId":"Widgets_Host_EditionStatistics","Height":8,"Width":5,"PositionX":7,"PositionY":4}]}]},{"DashboardName":"TenantDashboard","Pages":[{"Id":"Pageed2e0b986ce74baeb48dccd1ea0d8047","Name":"Default Page","Widgets":[{"WidgetId":"Widgets_Tenant_TopStats","Height":4,"Width":12,"PositionX":0,"PositionY":0},{"WidgetId":"Widgets_Tenant_SalesSummary","Height":12,"Width":6,"PositionX":0,"PositionY":4},{"WidgetId":"Widgets_Tenant_RegionalStats","Height":12,"Width":6,"PositionX":6,"PositionY":4},{"WidgetId":"Widgets_Tenant_GeneralStats","Height":8,"Width":6,"PositionX":0,"PositionY":16},{"WidgetId":"Widgets_Tenant_DailySales","Height":8,"Width":6,"PositionX":6,"PositionY":16},{"WidgetId":"Widgets_Tenant_ProfitShare","Height":11,"Width":6,"PositionX":0,"PositionY":24},{"WidgetId":"Widgets_Tenant_MemberActivity","Height":11,"Width":6,"PositionX":6,"PositionY":24}]}]}]
Abp.Zero.UserManagement.UserLockOut.DefaultAccountLockoutSeconds	303

0
ismcagdas created 3 years ago
Support Team
Hi @staffing

Could you share your typescript code as well ?

Could this be happening for specific ASPX pages ? Did you try it in that way ?

Thanks,

staffing created 3 years ago

1. Here is the TS code:

import { Component, HostListener, Injector, Input, OnInit, ViewChild } from '@angular/core';
import { BasicReportFilters } from '@app/shared/reports/basic-report-filters';
import { ReportingModalComponent } from '@app/shared/reports/reporting/reporting-modal.component';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { INameValueDto } from '@shared/service-proxies/service-proxies';
import { LocalStorageService } from '@shared/utils/local-storage.service';

@Component({
    selector: 'aspx-modal',
    templateUrl: './aspx-modal.component.html',
    animations: [appModuleAnimation()]
})
export class AspxModalComponent extends AppComponentBase implements OnInit {

    @ViewChild('reportingModal', { static: true }) reportingModal: ReportingModalComponent;

    @Input() pagePath: string;
    baseUrl = AppConsts.aspxBaseUrl;
    pageUrl = '';

    constructor(
        injector: Injector,
        private _localStorageService: LocalStorageService,
    ) {
        super(injector);
    }

    ngOnInit(): void {
        let self = this;
        this._localStorageService.getItem(AppConsts.myT, function (err, value) {
            self.pageUrl = self.baseUrl + self.pagePath + '?t=' + value;
        });
    }

    @HostListener('window:message', ['$event']) onMessageReceived(event: any): void {
        // Check origin
        if (event.origin !== this.baseUrl.replace(/\/$/, '')) {
            console.warn('A message came from some site we don\'t know. We\'re not processing it.');
            return;
        }

        const payload = event.data;
        switch (payload.command) {
            case 'abc':
                // do something
                break;

            default:
                break;
        }
    }

2. I cannot see a relation between the ASPX page and the issue yet. That is why I mentioned that some pages may load properly in the first few clicks and then stop drawing in the next ones.

ismcagdas created 3 years ago

Support Team

Hi,

We can offer you a few options.

You can disable animations on the modal and try again.
use ngAfterViewInit in your modal instead of ngOnInit.
Use below code in your ngAfterViewInit.

 ngAfterViewInit(): void {
        let self = this;
        this._localStorageService.getItem(AppConsts.myT, function (err, value) {
            self.pageUrl = self.baseUrl + self.pagePath + '?t=' + value;
            const cdRef = self.injector.get(ChangeDetectorRef);
            cdRef.detectChanges();
        });
    }

You can use ngIf in your iframe

<iframe *ngIf="pageUrl" [src]="pageUrl | safeUrl" style="height: 100%;" frameBorder="0">
    <p>Your browser does not support iframes</p>
</iframe>

If none works, you can try it in a setTimeout

 ngAfterViewInit(): void {
      setTimeout(() => {
        let self = this;
        this._localStorageService.getItem(AppConsts.myT, function (err, value) {
            self.pageUrl = self.baseUrl + self.pagePath + '?t=' + value;
            const cdRef = self.injector.get(ChangeDetectorRef);
            cdRef.detectChanges();
        });
      }, 0);
    }

Have an answer to this question? Log in and write your answer.