JavaScript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CoreModule } from '../core/core.module';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';
import { AdminSharedModule } from '../admin/shared/adminShared.module';
import { HomeSharedModule } from '../home/shared/homeShared.module';
import { PortfoliosSharedModule } from '../portfolios/shared/portfoliosShared.module';

export const AppRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', loadChildren: '../home/home.module#HomeModule' },
    { path: 'reviews', loadChildren: '../reviews/reviews.module#ReviewsModule' },
    { path: 'portfolios', loadChildren: '../portfolios/portfolios.module#PortfoliosModule' },
    { path: 'admin', loadChildren: '../admin/admin.module#AdminModule' }
];

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        CoreModule.forRoot(),
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
        ReactiveFormsModule,
        MDBBootstrapModule.forRoot(),
        AdminSharedModule,
        HomeSharedModule,
        PortfoliosSharedModule,
        RouterModule.forRoot(AppRoutes)
    ],
    exports: [
        RouterModule
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { RouterModule, Routes } from '@angular/router';
import { ReviewsComponent } from './components/reviews.component';

const reviewsRoutes: Routes = [
    { path: '', component: ReviewsComponent }
];

@NgModule({<br />
    exports: [
        RouterModule
    ],
    imports: [
        CommonModule,
        FormsModule,
        HttpClientModule,
        MDBBootstrapModule.forRoot(),
        RouterModule.forChild(reviewsRoutes)<br />
    ],<br />
    declarations: [
        ReviewsComponent
    ]
})

export class ReviewsModule { }

I'm testing in Chrome, Edge, FF, IE, and O.

The case is that a page has up to 5 iframes that show on a single page. A page is executed in each iframe. These pages have links to other pages that have links. A browser refresh returns the screen to the initial page state in all 5 browsers. But in Chrome and O, the history of the iframes of the set are not deleted. The browser back button or a JavaScript history(-1) button work as originally intended in FF, IE, and Edge. But in Chrome and O, these back buttons start to step back through the sequential history of all iframes.   And the same thing happens with a single frame.

I do a querySelectorAll('iframe') on exit and refresh/load and no iframes are indicated. Yet, in Chrome and Opera, when the page refreshes and the iframes are created again, they remember the history of the same named iframes that were there before the refresh.

I refresh in 3 different ways in this application including the browser refresh button, parent,location,reload(parent.location.href), and parent,location,reload with a particular function. These all work in Edge, FF, and IE. I refresh and can back out of the page to the calling page. In chrome and Opera, even though the iframes have been removed, the new iframes retain the history of the previous iframes. 

I have tried about half dozen approaches in JavaScript to insuring the iframes have been removed. My latest attempt follows. I'm not sure if I'm executing right, but the length is always 0.

var iframesx = document.querySelectorAll('iframe');
for (var i = 0; i < iframesx.length; i++) {
 iframesx.parentNode.removeChild(iframesx);
}

This is a real navigation problem for this application in Chrome and Opera, and I would think for any application in a similar situation. The browser Back button and JavaScript History() methods are fundamental page navigation tools.  Below is a link that demonstrates the problem. The page shows up to the 5 most recent years of a color map. All data is only for testing and some of the data was doubled up for testing.   I believe this is a Chrome and Opera error.   I've tried to find a way to clean up iframe history thouroghly, but with no success.

http://steepusa.no-ip.info/scx/gencm.cgi?str=0b%7ESKY%7EC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2F%7EC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2Fchildren2%2Eview

Bring the page up in Chrome or Opera. Take some links in a couple of iframes. Refresh and hit the browser Back button as if you are backing out of the page. In Edge, FF, and IE, instead of going through the history of the iframes before the refresh, the back out works.  

My platform is Windows 10 running Apache/2.0.64 (Win32), mod_perl/2.0.3, and Perl/v5.8.3. I am running the latest versions of all browsers being used in testing.   However, I think this problem exists independent of platform.

Any help will be appreciated. Thanks.